aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/drawing/world.js10
-rwxr-xr-xjs/lib/geom/circle.js61
-rwxr-xr-xjs/lib/geom/geom-obj.js80
-rwxr-xr-xjs/lib/geom/line.js38
-rwxr-xr-xjs/lib/geom/rectangle.js64
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///////////////////////////////////////////////////////////////////////
29var World = function GLWorld( canvas, use3D ) { 29var 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