aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
authorValerio Virgillito2012-03-13 11:16:47 -0700
committerValerio Virgillito2012-03-13 11:16:47 -0700
commit9f3307810541ca6f95d7ca6d1febe8afdcd2c101 (patch)
treedac91cf9c9f65b33886160db3aae364873a4352b /js/lib
parent91335d6572a611ecde7a71dbbfdb82bdb40f7e2b (diff)
parent2ac9a855724cc4ccf147ce4130a733a84cc647c3 (diff)
downloadninja-9f3307810541ca6f95d7ca6d1febe8afdcd2c101.tar.gz
Merge pull request #110 from mqg734/WebGLFixes
Gradient Support for Shapes and Eyedropper support for gradients. Also fixed 3d bug when moving multiple selections in 3d using the Selection Tool
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/drawing/world.js10
-rwxr-xr-xjs/lib/geom/circle.js95
-rwxr-xr-xjs/lib/geom/geom-obj.js123
-rwxr-xr-xjs/lib/geom/line.js57
-rwxr-xr-xjs/lib/geom/rectangle.js102
5 files changed, 335 insertions, 52 deletions
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index 44c9e37d..df24f556 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -17,7 +17,7 @@ var worldCounter = 0;
17// Class GLWorld 17// Class GLWorld
18// Manages display in a canvas 18// Manages display in a canvas
19/////////////////////////////////////////////////////////////////////// 19///////////////////////////////////////////////////////////////////////
20var World = function GLWorld( canvas, use3D ) { 20var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) {
21 /////////////////////////////////////////////////////////////////////// 21 ///////////////////////////////////////////////////////////////////////
22 // Instance variables 22 // Instance variables
23 /////////////////////////////////////////////////////////////////////// 23 ///////////////////////////////////////////////////////////////////////
@@ -30,7 +30,11 @@ var World = function GLWorld( canvas, use3D ) {
30 30
31 this._canvas = canvas; 31 this._canvas = canvas;
32 if (this._useWebGL) { 32 if (this._useWebGL) {
33 this._glContext = canvas.getContext("experimental-webgl"); 33 if(preserveDrawingBuffer) {
34 this._glContext = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
35 } else {
36 this._glContext = canvas.getContext("experimental-webgl");
37 }
34 } else { 38 } else {
35 this._2DContext = canvas.getContext( "2d" ); 39 this._2DContext = canvas.getContext( "2d" );
36 } 40 }
@@ -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 f94d4e6b..4b155b4c 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -444,16 +444,43 @@ var Circle = function GLCircle() {
444 var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); 444 var bezPts = MathUtils.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI );
445 if (bezPts) { 445 if (bezPts) {
446 var n = bezPts.length; 446 var n = bezPts.length;
447 var gradient,
448 colors,
449 len,
450 j,
451 position,
452 cs,
453 c;
447 454
448 // set up the fill style 455 // set up the fill style
449 ctx.beginPath(); 456 ctx.beginPath();
450 ctx.lineWidth = 0; 457 ctx.lineWidth = 0;
451 if (this._fillColor) { 458 if (this._fillColor) {
452 var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 459 if(this._fillColor.gradientMode) {
453 ctx.fillStyle = c; 460 if(this._fillColor.gradientMode === "radial") {
454 461 gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
462 xCtr, yCtr, Math.max(yScale, xScale));
463 } else {
464 gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
465 }
466 colors = this._fillColor.color;
467
468 len = colors.length;
469
470 for(j=0; j<len; j++) {
471 position = colors[j].position/100;
472 cs = colors[j].value;
473 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
474 }
475
476 ctx.fillStyle = gradient;
477
478 } else {
479 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
480 ctx.fillStyle = c;
481 }
455 // draw the fill 482 // draw the fill
456 ctx.beginPath(); 483// ctx.beginPath();
457 var p = MathUtils.transformPoint( bezPts[0], mat ); 484 var p = MathUtils.transformPoint( bezPts[0], mat );
458 ctx.moveTo( p[0], p[1] ); 485 ctx.moveTo( p[0], p[1] );
459 var index = 1; 486 var index = 1;
@@ -506,9 +533,29 @@ var Circle = function GLCircle() {
506 ctx.beginPath(); 533 ctx.beginPath();
507 ctx.lineWidth = lineWidth; 534 ctx.lineWidth = lineWidth;
508 if (this._strokeColor) { 535 if (this._strokeColor) {
509 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 536 if(this._strokeColor.gradientMode) {
510 ctx.strokeStyle = c; 537 if(this._strokeColor.gradientMode === "radial") {
511 538 gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale),
539 xCtr, yCtr, 0.5*Math.max(this._height, this._width));
540 } else {
541 gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2);
542 }
543 colors = this._strokeColor.color;
544
545 len = colors.length;
546
547 for(j=0; j<len; j++) {
548 position = colors[j].position/100;
549 cs = colors[j].value;
550 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
551 }
552
553 ctx.strokeStyle = gradient;
554
555 } else {
556 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
557 ctx.strokeStyle = c;
558 }
512 // draw the stroke 559 // draw the stroke
513 p = MathUtils.transformPoint( bezPts[0], mat ); 560 p = MathUtils.transformPoint( bezPts[0], mat );
514 ctx.moveTo( p[0], p[1] ); 561 ctx.moveTo( p[0], p[1] );
@@ -561,8 +608,20 @@ var Circle = function GLCircle() {
561 rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; 608 rtnStr += "strokeWidth: " + this._strokeWidth + "\n";
562 rtnStr += "innerRadius: " + this._innerRadius + "\n"; 609 rtnStr += "innerRadius: " + this._innerRadius + "\n";
563 rtnStr += "strokeStyle: " + this._strokeStyle + "\n"; 610 rtnStr += "strokeStyle: " + this._strokeStyle + "\n";
564 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; 611
565 rtnStr += "fillColor: " + String(this._fillColor) + "\n"; 612 if(this._strokeColor.gradientMode) {
613 rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n";
614 rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
615 } else {
616 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n";
617 }
618
619 if(this._fillColor.gradientMode) {
620 rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n";
621 rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n";
622 } else {
623 rtnStr += "fillColor: " + String(this._fillColor) + "\n";
624 }
566 625
567 rtnStr += "strokeMat: "; 626 rtnStr += "strokeMat: ";
568 if (this._strokeMaterial) { 627 if (this._strokeMaterial) {
@@ -596,8 +655,22 @@ var Circle = function GLCircle() {
596 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); 655 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr );
597 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); 656 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr );
598 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); 657 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr );
599 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); 658 if(importStr.indexOf("fillGradientMode: ") < 0) {
600 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); 659 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" );
660 } else {
661 this._fillColor = {};
662 this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr );
663 this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ", importStr ));
664 }
665
666 if(importStr.indexOf("strokeGradientMode: ") < 0)
667 {
668 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" );
669 } else {
670 this._strokeColor = {};
671 this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr );
672 this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr ));
673 }
601 674
602 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName ); 675 var strokeMat = MaterialsModel.getMaterial( strokeMaterialName );
603 if (!strokeMat) { 676 if (!strokeMat) {
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 1a197832..f285f24a 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -159,22 +159,61 @@ var GeomObj = function GLGeomObj() {
159 // Methods 159 // Methods
160 /////////////////////////////////////////////////////////////////////// 160 ///////////////////////////////////////////////////////////////////////
161 this.setMaterialColor = function(c, type) { 161 this.setMaterialColor = function(c, type) {
162 if (type == "fill") { 162 var i = 0,
163 this._fillColor = c.slice(0); 163 nMats = 0;
164 if(c.gradientMode) {
165 // Gradient support
166 if (this._materialArray && this._materialTypeArray) {
167 nMats = this._materialArray.length;
168 }
169
170 var stops = [],
171 colors = c.color;
172
173 var len = colors.length;
174 // TODO - Current shaders only support 4 color stops
175 if(len > 4) {
176 len = 4;
177 }
178
179 for(var n=0; n<len; n++) {
180 var position = colors[n].position/100;
181 var cs = colors[n].value;
182 var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a];
183 stops.push(stop);
184
185 if (nMats === this._materialTypeArray.length) {
186 for (i=0; i<nMats; i++) {
187 if (this._materialTypeArray[i] == type) {
188 this._materialArray[i].setProperty( "color"+(n+1), stop.slice(0) );
189 this._materialArray[i].setProperty( "colorStop"+(n+1), position );
190 }
191 }