aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/geom/brush-stroke.js50
-rwxr-xr-xjs/lib/geom/circle.js4
-rwxr-xr-xjs/lib/geom/rectangle.js20
3 files changed, 55 insertions, 19 deletions
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index efd21c4a..1fae0c1d 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -117,7 +117,7 @@ var BrushStroke = function GLBrushStroke() {
117 }; 117 };
118 118
119 this.getPoint = function (index) { 119 this.getPoint = function (index) {
120 return this._Points[index]; 120 return this._Points[index].slice(0);
121 }; 121 };
122 122
123 this.addPoint = function (pt) { 123 this.addPoint = function (pt) {
@@ -399,7 +399,7 @@ var BrushStroke = function GLBrushStroke() {
399 399
400 // ***** unproject all the centered points and convert them to 2D (plane space)***** 400 // ***** unproject all the centered points and convert them to 2D (plane space)*****
401 // (undo the projection step performed by the browser) 401 // (undo the projection step performed by the browser)
402 localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas 402 //localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas
403 localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv); 403 localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv);
404 404
405 //add to the list of local points 405 //add to the list of local points
@@ -568,17 +568,17 @@ var BrushStroke = function GLBrushStroke() {
568 } 568 }
569 ctx.save(); 569 ctx.save();
570 ctx.clearRect(0, 0, bboxWidth, bboxHeight); 570 ctx.clearRect(0, 0, bboxWidth, bboxHeight);
571 this.drawToContext(ctx, 0, 0, false); 571 this.drawToContext(ctx, false);
572 ctx.restore(); 572 ctx.restore();
573 } //this.render() 573 } //this.render()
574 574
575 this.drawToContext = function(ctx, origX, origY, drawStageWorldPts){ 575 this.drawToContext = function(ctx, drawStageWorldPts, stageWorldDeltaX, stageWorldDeltaY, stageWorldToScreenMat){
576 var points = this._LocalPoints; 576 var points = this._LocalPoints;
577 if (drawStageWorldPts){ 577 if (drawStageWorldPts){ //this is usually true when we're drawing the brush stroke on the stage (no canvas yet)
578 points = this._Points; 578 points = this._Points;
579 } 579 }
580 var numPoints = points.length; 580 var numPoints = points.length;
581 581 var tempP, p;
582 if (this._strokeUseCalligraphic) { 582 if (this._strokeUseCalligraphic) {
583 //build the stamp for the brush stroke 583 //build the stamp for the brush stroke
584 var t=0; 584 var t=0;
@@ -623,9 +623,23 @@ var BrushStroke = function GLBrushStroke() {
623 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")"; 623 //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")";
624 ctx.translate(disp[0],disp[1]); 624 ctx.translate(disp[0],disp[1]);
625 ctx.beginPath(); 625 ctx.beginPath();
626 ctx.moveTo(points[0][0]-origX, points[0][1]-origY); 626 if (drawStageWorldPts) {
627 tempP = points[0].slice(0);
628 tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
629 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
630 } else {
631 p = points[0];
632 }
633 ctx.moveTo(p[0],p[1]);
627 for (var i=0;i<numPoints;i++){ 634 for (var i=0;i<numPoints;i++){
628 ctx.lineTo(points[i][0]-origX, points[i][1]-origY); 635 if (drawStageWorldPts) {
636 tempP = points[i].slice(0);
637 tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
638 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
639 } else {
640 p = points[i];
641 }
642 ctx.lineTo(p[0],p[1]);
629 } 643 }
630 ctx.stroke(); 644 ctx.stroke();
631 ctx.restore(); 645 ctx.restore();
@@ -641,13 +655,27 @@ var BrushStroke = function GLBrushStroke() {
641 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; 655 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
642 for (var l=0;l<numlayers;l++){ 656 for (var l=0;l<numlayers;l++){
643 ctx.beginPath(); 657 ctx.beginPath();
644 ctx.moveTo(points[0][0]-origX, points[0][1]-origY); 658 if (drawStageWorldPts) {
659 tempP = points[0].slice(0);
660 tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
661 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
662 } else {
663 p = points[0];
664 }
665 ctx.moveTo(p[0],p[1]);
645 if (numPoints===1){ 666 if (numPoints===1){
646 //display a tiny segment as a single point 667 //display a tiny segment as a single point
647 ctx.lineTo(points[0][0]-origX, points[0][1]-origY+0.01); 668 ctx.lineTo(p[0],p[1]+0.01);
648 } 669 }
649 for (var i=1;i<numPoints;i++){ 670 for (var i=1;i<numPoints;i++){
650 ctx.lineTo(points[i][0]-origX, points[i][1]-origY); 671 if (drawStageWorldPts) {
672 tempP = points[i].slice(0);
673 tempP[0]+=stageWorldDeltaX; tempP[1]+=stageWorldDeltaY;
674 p = MathUtils.transformAndDivideHomogeneousPoint(tempP, stageWorldToScreenMat);
675 } else {
676 p = points[i];
677 }
678 ctx.lineTo(p[0],p[1]);
651 } 679 }
652 ctx.lineWidth=2*l+minStrokeWidth; 680 ctx.lineWidth=2*l+minStrokeWidth;
653 ctx.stroke(); 681 ctx.stroke();
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index b7027eec..0f1f49a9 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -464,9 +464,9 @@ var Circle = function GLCircle() {
464 if(this._fillColor.gradientMode) { 464 if(this._fillColor.gradientMode) {
465 if(this._fillColor.gradientMode === "radial") { 465 if(this._fillColor.gradientMode === "radial") {
466 gradient = ctx.createRadialGradient(xCtr, yCtr, 0, 466 gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
467 xCtr, yCtr, Math.max(yScale, xScale)); 467 xCtr, yCtr, Math.max(this._width, this._height)/2);
468 } else { 468 } else {
469 gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); 469 gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2);
470 } 470 }
471 colors = this._fillColor.color; 471 colors = this._fillColor.color;
472 472
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 41c51e2f..490a9a6f 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -361,7 +361,9 @@ var Rectangle = function GLRectangle() {
361 // various declarations 361 // various declarations
362 var pt, rad, ctr, startPt, bPts; 362 var pt, rad, ctr, startPt, bPts;
363 var width = Math.round(this.getWidth()), 363 var width = Math.round(this.getWidth()),
364 height = Math.round(this.getHeight()); 364 height = Math.round(this.getHeight()),
365 hw = 0.5*width,
366 hh = 0.5*height;
365 367
366 pt = [inset, inset]; // top left corner 368 pt = [inset, inset]; // top left corner
367 369
@@ -369,6 +371,12 @@ var Rectangle = function GLRectangle() {
369 var trRad = this._trRadius; 371 var trRad = this._trRadius;
370 var blRad = this._blRadius; 372 var blRad = this._blRadius;
371 var brRad = this._brRadius; 373 var brRad = this._brRadius;
374 // limit the radii to half the rectangle dimension
375 var minDimen = hw < hh ? hw : hh;
376 if (tlRad > minDimen) tlRad = minDimen;
377 if (blRad > minDimen) blRad = minDimen;
378 if (brRad > minDimen) brRad = minDimen;
379 if (trRad > minDimen) trRad = minDimen;
372 380
373 var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils; 381 var viewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
374 var world = this.getWorld(); 382 var world = this.getWorld();
@@ -467,13 +475,13 @@ var Rectangle = function GLRectangle() {
467 // render the fill 475 // render the fill
468 ctx.beginPath(); 476 ctx.beginPath();
469 if (this._fillColor) { 477 if (this._fillColor) {
470 inset = Math.ceil( lw ) + 0.5; 478 inset = Math.ceil( lw ) - 0.5;
471 479
472 if(this._fillColor.gradientMode) { 480 if(this._fillColor.gradientMode) {
473 if(this._fillColor.gradientMode === "radial") { 481 if(this._fillColor.gradientMode === "radial") {
474 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); 482 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2);
475 } else { 483 } else {
476 gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); 484 gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
477 } 485 }
478 colors = this._fillColor.color; 486 colors = this._fillColor.color;
479 487
@@ -501,11 +509,11 @@ var Rectangle = function GLRectangle() {
501 // render the stroke 509 // render the stroke
502 ctx.beginPath(); 510 ctx.beginPath();
503 if (this._strokeColor) { 511 if (this._strokeColor) {
504 inset = Math.ceil( 0.5*lw ) + 0.5; 512 inset = Math.ceil( 0.5*lw ) - 0.5;
505 513
506 if(this._strokeColor.gradientMode) { 514 if(this._strokeColor.gradientMode) {
507 if(this._strokeColor.gradientMode === "radial") { 515 if(this._strokeColor.gradientMode === "radial") {
508 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); 516 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
509 } else { 517 } else {
510 gradient = ctx.createLinearGradient(0, h/2, w, h/2); 518 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
511 } 519 }