From 4290e20e2b2f4536f4365d02e1cd7a1418bc8ea9 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 24 Apr 2012 15:40:12 -0700 Subject: allow the realtime drawing of brush strokes drawn off the standard XY plane by passing in the transformation matrix --- js/lib/geom/brush-stroke.js | 34 ++++++++++++++++++++++++---------- 1 file changed, 24 insertions(+), 10 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index efd21c4a..89ef79fb 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -117,7 +117,7 @@ var BrushStroke = function GLBrushStroke() { }; this.getPoint = function (index) { - return this._Points[index]; + return this._Points[index].slice(0); }; this.addPoint = function (pt) { @@ -399,7 +399,7 @@ var BrushStroke = function GLBrushStroke() { // ***** unproject all the centered points and convert them to 2D (plane space)***** // (undo the projection step performed by the browser) - localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas + //localPoint = this._unprojectPt(localPoint, 1400); //todo get the perspective distance from the canvas localPoint = MathUtils.transformPoint(localPoint, this._planeMatInv); //add to the list of local points @@ -572,13 +572,13 @@ var BrushStroke = function GLBrushStroke() { ctx.restore(); } //this.render() - this.drawToContext = function(ctx, origX, origY, drawStageWorldPts){ + this.drawToContext = function(ctx, deltaX, deltaY, drawStageWorldPts, stageWorldToScreenMat){ var points = this._LocalPoints; - if (drawStageWorldPts){ + if (drawStageWorldPts){ //this is usually true when we're drawing the brush stroke on the stage (no canvas yet) points = this._Points; } var numPoints = points.length; - + var tempP, p; if (this._strokeUseCalligraphic) { //build the stamp for the brush stroke var t=0; @@ -623,9 +623,9 @@ var BrushStroke = function GLBrushStroke() { //ctx.strokeStyle="rgba("+parseInt(255*currStrokeColor[0])+","+parseInt(255*currStrokeColor[1])+","+parseInt(255*currStrokeColor[2])+","+alphaVal+")"; ctx.translate(disp[0],disp[1]); ctx.beginPath(); - ctx.moveTo(points[0][0]-origX, points[0][1]-origY); + ctx.moveTo(points[0][0]-deltaX, points[0][1]-deltaY); for (var i=0;i --- js/lib/geom/circle.js | 4 ++-- js/lib/geom/rectangle.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 1073c2db..218dcfa6 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -457,9 +457,9 @@ var Circle = function GLCircle() { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, Math.max(yScale, xScale)); + xCtr, yCtr, Math.max(this._width, this._height)/2); } else { - gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); + gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); } colors = this._fillColor.color; diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 91b1d426..8278f1a3 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -452,13 +452,13 @@ var Rectangle = function GLRectangle() { // render the fill ctx.beginPath(); if (this._fillColor) { - inset = Math.ceil( lw ) + 0.5; + inset = Math.ceil( lw ); if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); } else { - gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); + gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); } colors = this._fillColor.color; @@ -486,11 +486,11 @@ var Rectangle = function GLRectangle() { // render the stroke ctx.beginPath(); if (this._strokeColor) { - inset = Math.ceil( 0.5*lw ) + 0.5; + inset = Math.ceil( 0.5*lw ); if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); + gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); } else { gradient = ctx.createLinearGradient(0, h/2, w, h/2); } -- cgit v1.2.3 From 5e029d148e267b7ec8662f31ccdae2a0916de329 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 25 Apr 2012 13:37:02 -0700 Subject: IKNinja-406 - Strange behavior when changing the corner radius to the maximum value. IKNinja-1236 - Corner radius is not applied if stroke size is >= 2 times the corner radius. Signed-off-by: Nivesh Rajbhandari --- js/lib/geom/rectangle.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 8278f1a3..fcd1c1bd 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -356,7 +356,9 @@ var Rectangle = function GLRectangle() { // various declarations var pt, rad, ctr, startPt, bPts; var width = Math.round(this.getWidth()), - height = Math.round(this.getHeight()); + height = Math.round(this.getHeight()), + hw = 0.5*width, + hh = 0.5*height; pt = [inset, inset]; // top left corner @@ -364,6 +366,12 @@ var Rectangle = function GLRectangle() { var trRad = this._trRadius; var blRad = this._blRadius; var brRad = this._brRadius; + // limit the radii to half the rectangle dimension + var minDimen = hw < hh ? hw : hh; + if (tlRad > minDimen) tlRad = minDimen; + if (blRad > minDimen) blRad = minDimen; + if (brRad > minDimen) brRad = minDimen; + if (trRad > minDimen) trRad = minDimen; if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) { ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); @@ -452,7 +460,7 @@ var Rectangle = function GLRectangle() { // render the fill ctx.beginPath(); if (this._fillColor) { - inset = Math.ceil( lw ); + inset = Math.ceil( lw ) - 0.5; if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { @@ -486,7 +494,7 @@ var Rectangle = function GLRectangle() { // render the stroke ctx.beginPath(); if (this._strokeColor) { - inset = Math.ceil( 0.5*lw ); + inset = Math.ceil( 0.5*lw ) - 0.5; if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { -- cgit v1.2.3