diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 69 |
1 files changed, 43 insertions, 26 deletions
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 0e0406dd..b69139b6 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js | |||
@@ -31,6 +31,8 @@ var BrushStroke = function GLBrushStroke() { | |||
31 | 31 | ||
32 | //the HTML5 canvas that holds this brush stroke | 32 | //the HTML5 canvas that holds this brush stroke |
33 | this._canvas = null; | 33 | this._canvas = null; |
34 | //flag indicating whether or not to freeze the size and position of canvas | ||
35 | this._freezeCanvas = false; | ||
34 | 36 | ||
35 | //stroke information | 37 | //stroke information |
36 | this._strokeWidth = 1.0; | 38 | this._strokeWidth = 1.0; |
@@ -174,11 +176,15 @@ BrushStroke.prototype.getStrokeWidth = function () { | |||
174 | }; | 176 | }; |
175 | 177 | ||
176 | BrushStroke.prototype.setStrokeWidth = function (w) { | 178 | BrushStroke.prototype.setStrokeWidth = function (w) { |
177 | this._strokeWidth = w; | 179 | if (this._strokeWidth!==w) { |
178 | if (this._strokeWidth<1) { | 180 | this._strokeWidth = w; |
179 | this._strokeWidth = 1; | 181 | |
182 | if (this._strokeWidth<1) { | ||
183 | this._strokeWidth = 1; | ||
184 | } | ||
185 | this._isDirty=true; | ||
186 | this._freezeCanvas=false; | ||
180 | } | 187 | } |
181 | this._isDirty=true; | ||
182 | }; | 188 | }; |
183 | /* | 189 | /* |
184 | BrushStroke.prototype.getStrokeMaterial = function () { | 190 | BrushStroke.prototype.getStrokeMaterial = function () { |
@@ -236,6 +242,7 @@ BrushStroke.prototype.setSmoothingAmount = function(a){ | |||
236 | if (this._strokeAmountSmoothing!==a) { | 242 | if (this._strokeAmountSmoothing!==a) { |
237 | this._strokeAmountSmoothing = a; | 243 | this._strokeAmountSmoothing = a; |
238 | this._isDirty = true; | 244 | this._isDirty = true; |
245 | this._freezeCanvas=false; | ||
239 | } | 246 | } |
240 | }; | 247 | }; |
241 | 248 | ||
@@ -274,27 +281,32 @@ BrushStroke.prototype.setStrokeStyle = function (s) { | |||
274 | }; | 281 | }; |
275 | 282 | ||
276 | BrushStroke.prototype.setWidth = function (newW) { | 283 | BrushStroke.prototype.setWidth = function (newW) { |
277 | if (newW<1) { | 284 | //get the old width from the canvas controller if the canvas is frozen, or from bbox if not frozen. |
278 | newW=1; //clamp minimum width to 1 | 285 | var oldCanvasWidth = parseInt(CanvasController.getProperty(this._canvas, "width")); |
286 | if (!this._freezeCanvas){ | ||
287 | oldCanvasWidth = Math.round(this._BBoxMax[0]-this._BBoxMin[0]); | ||
288 | } | ||
289 | var minWidth = 1+this._strokeWidth; | ||
290 | if (newW<minWidth) { | ||
291 | newW=minWidth; | ||
279 | } | 292 | } |
280 | 293 | ||
281 | //scale the contents of this subpath to lie within this width | 294 | if (oldCanvasWidth<minWidth) { |
282 | //determine the scale factor by comparing with the old width | 295 | oldCanvasWidth=minWidth; |
283 | var oldWidth = this._BBoxMax[0]-this._BBoxMin[0]; | ||
284 | if (oldWidth<1) { | ||
285 | oldWidth=1; | ||
286 | } | 296 | } |
287 | 297 | ||
288 | var scaleX = newW/oldWidth; | 298 | //scale the contents of this subpath to lie within this width |
299 | //determine the scale factor by comparing with the old width | ||
300 | var scaleX = (newW-this._strokeWidth)/(oldCanvasWidth-this._strokeWidth); | ||
289 | if (scaleX===1) { | 301 | if (scaleX===1) { |
302 | console.log("Ignoring setWidth because scale is "+scaleX); | ||
290 | return; //no need to do anything | 303 | return; //no need to do anything |
291 | } | 304 | } |
292 | |||
293 | //scale the local point positions such that the width of the bbox is the newW | 305 | //scale the local point positions such that the width of the bbox is the newW |
294 | var origX = this._BBoxMin[0]; | 306 | var origX = 0.5*this._strokeWidth;//this._BBoxMin[0]; //this represents the left edge |
295 | var numPoints = this._LocalPoints.length; | 307 | var numPoints = this._LocalPoints.length; |
296 | for (var i=0;i<numPoints;i++){ | 308 | for (var i=0;i<numPoints;i++){ |
297 | //compute the distance from the bboxMin | 309 | //compute the distance from the left edge |
298 | var oldW = this._LocalPoints[i][0] - origX; | 310 | var oldW = this._LocalPoints[i][0] - origX; |
299 | this._LocalPoints[i] = [(origX + oldW*scaleX),this._LocalPoints[i][1],this._LocalPoints[i][2]]; | 311 | this._LocalPoints[i] = [(origX + oldW*scaleX),this._LocalPoints[i][1],this._LocalPoints[i][2]]; |
300 | 312 | ||
@@ -305,24 +317,29 @@ BrushStroke.prototype.setWidth = function (newW) { | |||
305 | }; | 317 | }; |
306 | 318 | ||
307 | BrushStroke.prototype.setHeight = function (newH) { | 319 | BrushStroke.prototype.setHeight = function (newH) { |
308 | if (newH<1) { | 320 | var oldCanvasHeight = parseInt(CanvasController.getProperty(this._canvas, "height")); |
309 | newH=1; //clamp minimum width to 1 | 321 | if (!this._freezeCanvas){ |
322 | oldCanvasHeight = this._BBoxMax[1]-this._BBoxMin[1]; | ||
323 | } | ||
324 | var minHeight = 1 + this._strokeWidth; | ||
325 | if (oldCanvasHeight<minHeight) { | ||
326 | oldCanvasHeight=minHeight; | ||
327 | } | ||
328 | if (newH<minHeight) { | ||
329 | newH=minHeight; | ||
310 | } | 330 | } |
311 | 331 | ||
332 | |||
312 | //scale the contents of this subpath to lie within this height | 333 | //scale the contents of this subpath to lie within this height |
313 | //determine the scale factor by comparing with the old height | 334 | //determine the scale factor by comparing with the old height |
314 | var oldHeight = this._BBoxMax[1]-this._BBoxMin[1]; | 335 | var scaleY = (newH-this._strokeWidth)/(oldCanvasHeight-this._strokeWidth); |
315 | if (oldHeight<1) { | ||
316 | oldHeight=1; | ||
317 | } | ||
318 | |||
319 | var scaleY = newH/oldHeight; | ||
320 | if (scaleY===1) { | 336 | if (scaleY===1) { |
337 | console.log("Ignoring setHeight because scale is 1"); | ||
321 | return; //no need to do anything | 338 | return; //no need to do anything |
322 | } | 339 | } |
323 | 340 | ||
324 | //scale the local point positions such that the width of the bbox is the newW | 341 | //scale the local point positions such that the width of the bbox is the newW |
325 | var origY = this._BBoxMin[1]; | 342 | var origY = 0.5*this._strokeWidth;//this._BBoxMin[1]; //this represents the top edge |
326 | var numPoints = this._LocalPoints.length; | 343 | var numPoints = this._LocalPoints.length; |
327 | for (var i=0;i<numPoints;i++){ | 344 | for (var i=0;i<numPoints;i++){ |
328 | //compute the distance from the bboxMin | 345 | //compute the distance from the bboxMin |
@@ -611,7 +628,7 @@ BrushStroke.prototype.render = function () { | |||
611 | //set the canvas by querying the world | 628 | //set the canvas by querying the world |
612 | this._canvas = this.getWorld().getCanvas(); | 629 | this._canvas = this.getWorld().getCanvas(); |
613 | } | 630 | } |
614 | if (this._canvas) { | 631 | if (this._canvas && !this._freezeCanvas) { |
615 | var newLeft = Math.round(this._stageWorldCenter[0] - 0.5 * bboxWidth); | 632 | var newLeft = Math.round(this._stageWorldCenter[0] - 0.5 * bboxWidth); |
616 | var newTop = Math.round(this._stageWorldCenter[1] - 0.5 * bboxHeight); | 633 | var newTop = Math.round(this._stageWorldCenter[1] - 0.5 * bboxHeight); |
617 | //assign the new position, width, and height as the canvas dimensions through the canvas controller | 634 | //assign the new position, width, and height as the canvas dimensions through the canvas controller |
@@ -622,7 +639,7 @@ BrushStroke.prototype.render = function () { | |||
622 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); | 639 | CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); |
623 | //this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); | 640 | //this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); |
624 | } | 641 | } |
625 | 642 | this._freezeCanvas=true; //unless this is set to false, we will not update the canvas width and height anymore in the render function | |
626 | 643 | ||
627 | //get the context | 644 | //get the context |
628 | var ctx = world.get2DContext(); | 645 | var ctx = world.get2DContext(); |