diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/drawing/world.js | 10 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 61 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 80 | ||||
-rwxr-xr-x | js/lib/geom/line.js | 38 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 64 |
5 files changed, 212 insertions, 41 deletions
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 3d6c6fc4..04e4d96b 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js | |||
@@ -26,7 +26,7 @@ var MaterialsModel = require("js/models/materials-model").MaterialsModel; | |||
26 | // Class GLWorld | 26 | // Class GLWorld |
27 | // Manages display in a canvas | 27 | // Manages display in a canvas |
28 | /////////////////////////////////////////////////////////////////////// | 28 | /////////////////////////////////////////////////////////////////////// |
29 | var World = function GLWorld( canvas, use3D ) { | 29 | var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { |
30 | /////////////////////////////////////////////////////////////////////// | 30 | /////////////////////////////////////////////////////////////////////// |
31 | // Instance variables | 31 | // Instance variables |
32 | /////////////////////////////////////////////////////////////////////// | 32 | /////////////////////////////////////////////////////////////////////// |
@@ -39,7 +39,11 @@ var World = function GLWorld( canvas, use3D ) { | |||
39 | 39 | ||
40 | this._canvas = canvas; | 40 | this._canvas = canvas; |
41 | if (this._useWebGL) { | 41 | if (this._useWebGL) { |
42 | this._glContext = canvas.getContext("experimental-webgl"); | 42 | if(preserveDrawingBuffer) { |
43 | this._glContext = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true}); | ||
44 | } else { | ||
45 | this._glContext = canvas.getContext("experimental-webgl"); | ||
46 | } | ||
43 | } else { | 47 | } else { |
44 | this._2DContext = canvas.getContext( "2d" ); | 48 | this._2DContext = canvas.getContext( "2d" ); |
45 | } | 49 | } |
@@ -680,7 +684,7 @@ World.prototype.render = function() { | |||
680 | var root = this.getGeomRoot(); | 684 | var root = this.getGeomRoot(); |
681 | this.hRender( root ); | 685 | this.hRender( root ); |
682 | } else { | 686 | } else { |
683 | g_Engine.setContext( this._canvas.rdgeId ); | 687 | g_Engine.setContext( this._canvas.rdgeid ); |
684 | //this.draw(); | 688 | //this.draw(); |
685 | this.restartRenderLoop(); | 689 | this.restartRenderLoop(); |
686 | } | 690 | } |
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index dd82a4cc..8f9f54d1 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -442,16 +442,43 @@ var Circle = function GLCircle() { | |||
442 | var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); | 442 | var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); |
443 | if (bezPts) { | 443 | if (bezPts) { |
444 | var n = bezPts.length; | 444 | var n = bezPts.length; |
445 | var gradient, | ||
446 | colors, | ||
447 | len, | ||
448 | j, | ||
449 | position, | ||
450 | cs, | ||
451 | c; | ||
445 | 452 | ||
446 | // set up the fill style | 453 | // set up the fill style |
447 | ctx.beginPath(); | 454 | ctx.beginPath(); |
448 | ctx.lineWidth = 0; | 455 | ctx.lineWidth = 0; |
449 | if (this._fillColor) { | 456 | if (this._fillColor) { |
450 | var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | 457 | if(this._fillColor.gradientMode) { |
451 | ctx.fillStyle = c; | 458 | if(this._fillColor.gradientMode === "radial") { |
452 | 459 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | |
460 | xCtr, yCtr, Math.max(yScale, xScale)); | ||
461 | } else { | ||
462 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | ||
463 | } | ||
464 | colors = this._fillColor.color; | ||
465 | |||
466 | len = colors.length; | ||
467 | |||
468 | for(j=0; j<len; j++) { | ||
469 | position = colors[j].position/100; | ||
470 | cs = colors[j].value; | ||
471 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
472 | } | ||
473 | |||
474 | ctx.fillStyle = gradient; | ||
475 | |||
476 | } else { | ||
477 | c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; | ||
478 | ctx.fillStyle = c; | ||
479 | } | ||
453 | // draw the fill | 480 | // draw the fill |
454 | ctx.beginPath(); | 481 | // ctx.beginPath(); |
455 | var p = MathUtils.transformPoint( bezPts[0], mat ); | 482 | var p = MathUtils.transformPoint( bezPts[0], mat ); |
456 | ctx.moveTo( p[0], p[1] ); | 483 | ctx.moveTo( p[0], p[1] ); |
457 | var index = 1; | 484 | var index = 1; |
@@ -504,9 +531,29 @@ var Circle = function GLCircle() { | |||
504 | ctx.beginPath(); | 531 | ctx.beginPath(); |
505 | ctx.lineWidth = lineWidth; | 532 | ctx.lineWidth = lineWidth; |
506 | if (this._strokeColor) { | 533 | if (this._strokeColor) { |
507 | var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | 534 | if(this._strokeColor.gradientMode) { |
508 | ctx.strokeStyle = c; | 535 | if(this._strokeColor.gradientMode === "radial") { |
509 | 536 | gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), | |
537 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); | ||
538 | } else { | ||
539 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | ||
540 | } | ||
541 | colors = this._strokeColor.color; | ||
542 | |||
543 | len = colors.length; | ||
544 | |||
545 | for(j=0; j<len; j++) { | ||
546 | position = colors[j].position/100; | ||
547 | cs = colors[j].value; | ||
548 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
549 | } | ||
550 | |||
551 | ctx.strokeStyle = gradient; | ||
552 | |||
553 | } else { | ||
554 | c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; | ||
555 | ctx.strokeStyle = c; | ||
556 | } | ||
510 | // draw the stroke | 557 | // draw the stroke |
511 | p = MathUtils.transformPoint( bezPts[0], mat ); | 558 | p = MathUtils.transformPoint( bezPts[0], mat ); |
512 | ctx.moveTo( p[0], p[1] ); | 559 | ctx.moveTo( p[0], p[1] ); |
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index c5880843..1ea74475 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js | |||
@@ -138,22 +138,61 @@ var GeomObj = function GLGeomObj() { | |||
138 | // Methods | 138 | // Methods |
139 | /////////////////////////////////////////////////////////////////////// | 139 | /////////////////////////////////////////////////////////////////////// |
140 | this.setMaterialColor = function(c, type) { | 140 | this.setMaterialColor = function(c, type) { |
141 | if (type == "fill") { | 141 | var i = 0, |
142 | this._fillColor = c.slice(0); | 142 | nMats = 0; |
143 | if(c.gradientMode) { | ||
144 | // Gradient support | ||
145 | if (this._materialArray && this._materialTypeArray) { | ||
146 | nMats = this._materialArray.length; | ||
147 | } | ||
148 | |||
149 | var stops = [], | ||
150 | colors = c.color; | ||
151 | |||
152 | var len = colors.length; | ||
153 | // TODO - Current shaders only support 4 color stops | ||
154 | if(len > 4) { | ||
155 | len = 4; | ||
156 | } | ||
157 | |||
158 | for(var n=0; n<len; n++) { | ||
159 | var position = colors[n].position/100; | ||
160 | var cs = colors[n].value; | ||
161 | var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a]; | ||
162 | stops.push(stop); | ||
163 | |||
164 | if (nMats === this._materialTypeArray.length) { | ||
165 | for (i=0; i<nMats; i++) { | ||
166 | if (this._materialTypeArray[i] == type) { | ||
167 | this._materialArray[i].setProperty( "color"+(n+1), stop.slice(0) ); | ||
168 | this._materialArray[i].setProperty( "colorStop"+(n+1), position ); | ||
169 | } | ||
170 | } | ||
171 | } | ||
172 | } | ||
173 | if (type === "fill") { | ||
174 | this._fillColor = c; | ||
175 | } else { | ||
176 | this._strokeColor = c; | ||
177 | } | ||
143 | } else { | 178 | } else { |
144 | this._strokeColor = c.slice(0); | 179 | if (type === "fill") { |
145 | } | 180 | this._fillColor = c.slice(0); |
181 | } else { | ||
182 | this._strokeColor = c.slice(0); | ||
183 | } | ||
146 | 184 | ||
147 | if (this._materialArray && this._materialTypeArray) { | 185 | if (this._materialArray && this._materialTypeArray) { |
148 | var nMats = this._materialArray.length; | 186 | nMats = this._materialArray.length; |
149 | if (nMats === this._materialTypeArray.length) { | 187 | if (nMats === this._materialTypeArray.length) { |
150 | for (var i=0; i<nMats; i++) { | 188 | for (i=0; i<nMats; i++) { |
151 | if (this._materialTypeArray[i] == type) { | 189 | if (this._materialTypeArray[i] == type) { |
152 | this._materialArray[i].setProperty( "color", c.slice(0) ); | 190 | this._materialArray[i].setProperty( "color", c.slice(0) ); |
191 | } | ||
153 | } | 192 | } |
154 | } | 193 | } |
155 | } | 194 | } |
156 | } | 195 | } |
157 | 196 | ||
158 | var world = this.getWorld(); | 197 | var world = this.getWorld(); |
159 | if (world) { | 198 | if (world) { |
@@ -171,14 +210,15 @@ var GeomObj = function GLGeomObj() { | |||
171 | 210 | ||
172 | if (strokeMaterial) { | 211 | if (strokeMaterial) { |
173 | strokeMaterial.init( this.getWorld() ); | 212 | strokeMaterial.init( this.getWorld() ); |
174 | if(this._strokeColor) { | ||
175 | strokeMaterial.setProperty("color", this._strokeColor); | ||
176 | } | ||
177 | } | 213 | } |
178 | 214 | ||
179 | this._materialArray.push( strokeMaterial ); | 215 | this._materialArray.push( strokeMaterial ); |
180 | this._materialTypeArray.push( "stroke" ); | 216 | this._materialTypeArray.push( "stroke" ); |
181 | 217 | ||
218 | if(this._strokeColor) { | ||
219 | this.setStrokeColor(this._strokeColor); | ||
220 | } | ||
221 | |||
182 | return strokeMaterial; | 222 | return strokeMaterial; |
183 | }; | 223 | }; |
184 | 224 | ||
@@ -192,15 +232,15 @@ var GeomObj = function GLGeomObj() { | |||
192 | 232 | ||
193 | if (fillMaterial) { | 233 | if (fillMaterial) { |