diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/drawing/world.js | 10 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 95 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 123 | ||||
-rwxr-xr-x | js/lib/geom/line.js | 57 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 102 |
5 files changed, 335 insertions, 52 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..05501ec3 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] ); |
@@ -559,8 +606,20 @@ var Circle = function GLCircle() { | |||
559 | rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; | 606 | rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; |
560 | rtnStr += "innerRadius: " + this._innerRadius + "\n"; | 607 | rtnStr += "innerRadius: " + this._innerRadius + "\n"; |
561 | rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; | 608 | rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; |
562 | rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; | 609 | |
563 | rtnStr += "fillColor: " + String(this._fillColor) + "\n"; | 610 | if(this._strokeColor.gradientMode) { |
611 | rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n"; | ||
612 | rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n"; | ||
613 | } else { | ||
614 | rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; | ||
615 | } | ||
616 | |||
617 | if(this._fillColor.gradientMode) { | ||
618 | rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n"; | ||
619 | rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n"; | ||
620 | } else { | ||
621 | rtnStr += "fillColor: " + String(this._fillColor) + "\n"; | ||
622 | } | ||
564 | 623 | ||
565 | rtnStr += "strokeMat: "; | 624 | rtnStr += "strokeMat: "; |
566 | if (this._strokeMaterial) { | 625 | if (this._strokeMaterial) { |
@@ -593,8 +652,22 @@ var Circle = function GLCircle() { | |||
593 | this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); | 652 | this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); |
594 | var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); | 653 | var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); |
595 | var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); | 654 | var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); |
596 | this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); | 655 | if(importStr.indexOf("fillGradientMode: ") < 0) { |
597 | this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); | 656 | this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); |
657 | } else { | ||
658 | this._fillColor = {}; | ||
659 | this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr ); | ||
660 | this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ", importStr )); | ||
661 | } | ||
662 | |||
663 | if(importStr.indexOf("strokeGradientMode: ") < 0) | ||
664 | { | ||
665 | this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); | ||
666 | } else { | ||
667 | this._strokeColor = {}; | ||
668 | this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr ); | ||
669 | this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr )); | ||
670 | } | ||
598 | 671 | ||
599 | var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); | 672 | var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); |
600 | if (!strokeMat) { | 673 | if (!strokeMat) { |
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index c5880843..fb1cb246 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 |