diff options
-rwxr-xr-x | js/lib/geom/sub-path.js | 43 |
1 files changed, 37 insertions, 6 deletions
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index db115655..f765b715 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js | |||
@@ -77,6 +77,37 @@ GLSubpath.prototype.buildBuffers = function () { | |||
77 | //no need to do anything for now (no WebGL) | 77 | //no need to do anything for now (no WebGL) |
78 | }; | 78 | }; |
79 | 79 | ||
80 | //buildColor returns the fillStyle or strokeStyle for the Canvas 2D context | ||
81 | GLSubpath.prototype.buildColor = function(ctx, //the 2D rendering context (for creating gradients if necessary) | ||
82 | ipColor, //color string, also encodes whether there's a gradient and of what type | ||
83 | w, //width of the region of color | ||
84 | h, //height of the region of color | ||
85 | lw) //linewidth (i.e. stroke width/size) | ||
86 | { | ||
87 | if (ipColor.gradientMode){ | ||
88 | var position, gradient, cs, inset; //vars used in gradient calculations | ||
89 | inset = Math.ceil( lw ) - 0.5; | ||
90 | |||
91 | if(ipColor.gradientMode === "radial") { | ||
92 | var ww = w - 2*lw, hh = h - 2*lw; | ||
93 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); | ||
94 | } else { | ||
95 | gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); | ||
96 | } | ||
97 | var colors = ipColor.color; | ||
98 | |||
99 | var len = colors.length; | ||
100 | for(n=0; n<len; n++) { | ||
101 | position = colors[n].position/100; | ||
102 | cs = colors[n].value; | ||
103 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
104 | } | ||
105 | return gradient; | ||
106 | } else { | ||
107 | var c = "rgba(" + 255*ipColor[0] + "," + 255*ipColor[1] + "," + 255*ipColor[2] + "," + ipColor[3] + ")"; | ||
108 | return c; | ||
109 | } | ||
110 | }; | ||
80 | //render | 111 | //render |
81 | // specify how to render the subpath in Canvas2D | 112 | // specify how to render the subpath in Canvas2D |
82 | GLSubpath.prototype.render = function () { | 113 | GLSubpath.prototype.render = function () { |
@@ -112,17 +143,17 @@ GLSubpath.prototype.render = function () { | |||
112 | 143 | ||
113 | ctx.lineWidth = this._strokeWidth; | 144 | ctx.lineWidth = this._strokeWidth; |
114 | ctx.strokeStyle = "black"; | 145 | ctx.strokeStyle = "black"; |
146 | |||
147 | //vars used for the gradient computation in buildColor | ||
148 | var w = world.getViewportWidth(), h = world.getViewportHeight(); | ||
149 | |||
115 | if (this._strokeColor) { | 150 | if (this._strokeColor) { |
116 | //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); | 151 | ctx.strokeStyle = this.buildColor(ctx, this._strokeColor, w,h, this._strokeWidth); |
117 | var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")"; | ||
118 | ctx.strokeStyle = strokeColorStr; | ||
119 | } | 152 | } |
120 | 153 | ||
121 | ctx.fillStyle = "white"; | 154 | ctx.fillStyle = "white"; |
122 | if (this._fillColor){ | 155 | if (this._fillColor){ |
123 | //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); | 156 | ctx.fillStyle = this.buildColor(ctx, this._fillColor, w, h, this._strokeWidth); |
124 | var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; | ||
125 | ctx.fillStyle = fillColorStr; | ||
126 | } | 157 | } |
127 | var lineCap = ['butt','round','square']; | 158 | var lineCap = ['butt','round','square']; |
128 | ctx.lineCap = lineCap[1]; | 159 | ctx.lineCap = lineCap[1]; |