aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/rectangle.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib/geom/rectangle.js')
-rwxr-xr-xjs/lib/geom/rectangle.js107
1 files changed, 94 insertions, 13 deletions
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index f91e830c..a47295e0 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -79,6 +79,8 @@ var Rectangle = function GLRectangle() {
79 } else { 79 } else {
80 this._fillMaterial = MaterialsModel.exportFlatMaterial(); 80 this._fillMaterial = MaterialsModel.exportFlatMaterial();
81 } 81 }
82
83 this.exportMaterials();
82 }; 84 };
83 85
84 /////////////////////////////////////////////////////////////////////// 86 ///////////////////////////////////////////////////////////////////////
@@ -203,8 +205,20 @@ var Rectangle = function GLRectangle() {
203 rtnStr += "width: " + this._width + "\n"; 205 rtnStr += "width: " + this._width + "\n";
204 rtnStr += "height: " + this._height + "\n"; 206 rtnStr += "height: " + this._height + "\n";
205 rtnStr += "strokeWidth: " + this._strokeWidth + "\n"; 207 rtnStr += "strokeWidth: " + this._strokeWidth + "\n";
206 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n"; 208
207 rtnStr += "fillColor: " + String(this._fillColor) + "\n"; 209 if(this._strokeColor.gradientMode) {
210 rtnStr += "strokeGradientMode: " + this._strokeColor.gradientMode + "\n";
211 rtnStr += "strokeColor: " + this.gradientToString(this._strokeColor.color) + "\n";
212 } else {
213 rtnStr += "strokeColor: " + String(this._strokeColor) + "\n";
214 }
215
216 if(this._fillColor.gradientMode) {
217 rtnStr += "fillGradientMode: " + this._fillColor.gradientMode + "\n";
218 rtnStr += "fillColor: " + this.gradientToString(this._fillColor.color) + "\n";
219 } else {
220 rtnStr += "fillColor: " + String(this._fillColor) + "\n";
221 }
208 rtnStr += "tlRadius: " + this._tlRadius + "\n"; 222 rtnStr += "tlRadius: " + this._tlRadius + "\n";
209 rtnStr += "trRadius: " + this._trRadius + "\n"; 223 rtnStr += "trRadius: " + this._trRadius + "\n";
210 rtnStr += "blRadius: " + this._blRadius + "\n"; 224 rtnStr += "blRadius: " + this._blRadius + "\n";
@@ -244,9 +258,25 @@ var Rectangle = function GLRectangle() {
244 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); 258 var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr );
245 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); 259 var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr );
246 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); 260 this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr );
247 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); 261
248 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); 262 if(importStr.indexOf("fillGradientMode: ") < 0) {
249 this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) ); 263 this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" );
264 } else {
265 this._fillColor = {};
266 this._fillColor.gradientMode = this.getPropertyFromString( "fillGradientMode: ", importStr );
267 this._fillColor.color = this.stringToGradient(this.getPropertyFromString( "fillColor: ", importStr ));
268 }
269
270 if(importStr.indexOf("strokeGradientMode: ") < 0)
271 {
272 this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" );
273 } else {
274 this._strokeColor = {};
275 this._strokeColor.gradientMode = this.getPropertyFromString( "strokeGradientMode: ", importStr );
276 this._strokeColor.color = this.stringToGradient(this.getPropertyFromString( "strokeColor: ", importStr ));
277 }
278
279 this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) );
250 this._trRadius = Number( this.getPropertyFromString( "trRadius: ", importStr ) ); 280 this._trRadius = Number( this.getPropertyFromString( "trRadius: ", importStr ) );
251 this._blRadius = Number( this.getPropertyFromString( "blRadius: ", importStr ) ); 281 this._blRadius = Number( this.getPropertyFromString( "blRadius: ", importStr ) );
252 this._brRadius = Number( this.getPropertyFromString( "brRadius: ", importStr ) ); 282 this._brRadius = Number( this.getPropertyFromString( "brRadius: ", importStr ) );
@@ -264,8 +294,9 @@ var Rectangle = function GLRectangle() {
264 console.log( "object material not found in library: " + fillMaterialName ); 294 console.log( "object material not found in library: " + fillMaterialName );
265 fillMat = MaterialsModel.exportFlatMaterial(); 295 fillMat = MaterialsModel.exportFlatMaterial();
266 } 296 }
267
268 this._fillMaterial = fillMat; 297 this._fillMaterial = fillMat;
298
299 this.importMaterials( importStr );
269 }; 300 };
270 301
271 this.buildBuffers = function() { 302 this.buildBuffers = function() {
@@ -459,15 +490,44 @@ var Rectangle = function GLRectangle() {
459 var lw = this._strokeWidth; 490 var lw = this._strokeWidth;
460 var w = world.getViewportWidth(), 491 var w = world.getViewportWidth(),
461 h = world.getViewportHeight(); 492 h = world.getViewportHeight();
462 493
494 var c,
495 inset,
496 gradient,
497 colors,
498 len,
499 n,
500 position,
501 cs;
463 // render the fill 502 // render the fill
464 ctx.beginPath(); 503 ctx.beginPath();
465 if (this._fillColor) { 504 if (this._fillColor) {
466 var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; 505 inset = Math.ceil( lw ) + 0.5;
467 ctx.fillStyle = c; 506
507 if(this._fillColor.gradientMode) {
508 if(this._fillColor.gradientMode === "radial") {
509 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset);
510 } else {
511 gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2);
512 }
513 colors = this._fillColor.color;
514
515 len = colors.length;
516
517 for(n=0; n<len; n++) {
518 position = colors[n].position/100;
519 cs = colors[n].value;
520 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
521 }
522
523 ctx.fillStyle = gradient;
524
525 } else {
526 c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")";
527 ctx.fillStyle = c;
528 }
468 529
469 ctx.lineWidth = lw; 530 ctx.lineWidth = lw;
470 var inset = Math.ceil( lw ) + 0.5;
471 this.renderPath( inset, ctx ); 531 this.renderPath( inset, ctx );
472 ctx.fill(); 532 ctx.fill();
473 ctx.closePath(); 533 ctx.closePath();
@@ -476,11 +536,32 @@ var Rectangle = function GLRectangle() {
476 // render the stroke 536 // render the stroke
477 ctx.beginPath(); 537 ctx.beginPath();
478 if (this._strokeColor) { 538 if (this._strokeColor) {
479 var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; 539 inset = Math.ceil( 0.5*lw ) + 0.5;
480 ctx.strokeStyle = c; 540
541 if(this._strokeColor.gradientMode) {
542 if(this._strokeColor.gradientMode === "radial") {
543 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2));
544 } else {
545 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
546 }
547 colors = this._strokeColor.color;
548
549 len = colors.length;
550
551 for(n=0; n<len; n++) {
552 position = colors[n].position/100;
553 cs = colors[n].value;
554 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
555 }
556
557 ctx.strokeStyle = gradient;
558
559 } else {
560 c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")";
561 ctx.strokeStyle = c;
562 }
481 563
482 ctx.lineWidth = lw; 564 ctx.lineWidth = lw;
483 var inset = Math.ceil( 0.5*lw ) + 0.5;
484 this.renderPath( inset, ctx ); 565 this.renderPath( inset, ctx );
485 ctx.stroke(); 566 ctx.stroke();
486 ctx.closePath(); 567 ctx.closePath();