HuasoFoundries /
ig_markerfactory
| Conditions | 3 |
| Paths | 2 |
| Total Lines | 98 |
| Code Lines | 68 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 0 | ||
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | /** global: google */ |
||
| 5 | const generateCanvas = function(options) { |
||
| 6 | let canvas = document.createElement("canvas"); |
||
| 7 | let ancho = 30, |
||
| 8 | alto = 40; |
||
| 9 | canvas.width = ancho + 18; |
||
| 10 | canvas.height = alto; |
||
| 11 | let x = canvas.width / 2, |
||
| 12 | y = canvas.height - 2, |
||
| 13 | radius = ancho / 2, |
||
| 14 | angulo = 0.6; |
||
| 15 | |||
| 16 | let font = "'" + options.font + "'" || "Arial"; |
||
| 17 | let fontsize = options.fontsize || 11; |
||
| 18 | |||
| 19 | let context = canvas.getContext("2d"); |
||
| 20 | |||
| 21 | context.clearRect(0, 0, canvas.width, canvas.height); |
||
| 22 | |||
| 23 | let radius0 = 2 * radius, |
||
| 24 | cx = x + 0.95 * radius0, |
||
| 25 | cy = y + 0.45 * radius0; |
||
| 26 | |||
| 27 | let grad = context.createLinearGradient(0, 0, 0, canvas.height), |
||
| 28 | colors = getColors(options), |
||
| 29 | color0 = colors[0], |
||
| 30 | color1 = colors[1]; |
||
| 31 | |||
| 32 | grad.addColorStop(0, color0); |
||
| 33 | grad.addColorStop(1, color1); |
||
| 34 | |||
| 35 | context.fillStyle = grad; |
||
| 36 | context.strokeStyle = "rgba(200,200,200,0.7)"; |
||
| 37 | |||
| 38 | context.beginPath(); |
||
| 39 | |||
| 40 | //arco izquierdo |
||
| 41 | context.arc( |
||
| 42 | cx - 1, |
||
| 43 | cy, |
||
| 44 | radius0, |
||
| 45 | (9 * Math.PI) / 8, |
||
| 46 | (-6 * Math.PI) / 8, |
||
| 47 | false |
||
| 48 | ); |
||
| 49 | |||
| 50 | // arco superior |
||
| 51 | context.arc(x, (y - 7) / 2, radius, angulo, Math.PI - angulo, true); |
||
| 52 | |||
| 53 | //arco derecho |
||
| 54 | context.arc( |
||
| 55 | 2 * x - cx + 1, |
||
| 56 | cy, |
||
| 57 | radius0, |
||
| 58 | (-0.95 * Math.PI) / 3, |
||
| 59 | -Math.PI / 8, |
||
| 60 | false |
||
| 61 | ); |
||
| 62 | context.fill(); |
||
| 63 | context.stroke(); |
||
| 64 | |||
| 65 | context.beginPath(); |
||
| 66 | context.arc(x, 0.4 * y, (2 * radius) / 3, 0, 2 * Math.PI, false); |
||
| 67 | context.fillStyle = "white"; |
||
| 68 | context.fill(); |
||
| 69 | |||
| 70 | context.beginPath(); |
||
| 71 | |||
| 72 | // Render Label |
||
| 73 | //context.font = "11pt Arial"; |
||
| 74 | context.font = fontsize + "pt " + font; |
||
| 75 | context.textBaseline = "top"; |
||
| 76 | |||
| 77 | let textWidth = context.measureText(options.label); |
||
| 78 | |||
| 79 | if (textWidth.width > ancho || String(options.label).length > 3) { |
||
| 80 | context.rect( |
||
| 81 | x - 2 - textWidth.width / 2, |
||
| 82 | y - 30, |
||
| 83 | x - 2 + textWidth.width / 2, |
||
| 84 | y - 23 |
||
| 85 | ); |
||
| 86 | context.fillStyle = "#F7F0F0"; |
||
| 87 | context.fill(); |
||
| 88 | context.stroke(); |
||
| 89 | } |
||
| 90 | |||
| 91 | context.fillStyle = "black"; |
||
| 92 | context.strokeStyle = "black"; |
||
| 93 | // centre the text. |
||
| 94 | context.fillText( |
||
| 95 | options.label, |
||
| 96 | 1 + Math.floor(canvas.width / 2 - textWidth.width / 2), |
||
| 97 | 8 |
||
| 98 | ); |
||
| 99 | canvas.fillColor = color0; |
||
| 100 | |||
| 101 | return canvas; |
||
| 102 | }; |
||
| 103 | export function createTextMarker(theoptions) { |
||
| 125 |
