aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/brush-stroke.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib/geom/brush-stroke.js')
-rwxr-xr-xjs/lib/geom/brush-stroke.js93
1 files changed, 80 insertions, 13 deletions
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 6facdd5d..09a7023c 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -264,13 +264,67 @@ var BrushStroke = function GLBrushStroke() {
264 this._strokeStyle = s; 264 this._strokeStyle = s;
265 }; 265 };
266 266
267 this.setWidth = function () { 267 this.setWidth = function (newW) {
268 if (newW<1) {
269 newW=1; //clamp minimum width to 1
270 }
271
272 //scale the contents of this subpath to lie within this width
273 //determine the scale factor by comparing with the old width
274 var oldWidth = this._BBoxMax[0]-this._BBoxMin[0];
275 if (oldWidth<1) {
276 oldWidth=1;
277 }
278
279 var scaleX = newW/oldWidth;
280 if (scaleX===1) {
281 return; //no need to do anything
282 }
283
284 //scale the local point positions such that the width of the bbox is the newW
285 var origX = this._BBoxMin[0];
286 var numPoints = this._LocalPoints.length;
287 for (var i=0;i<numPoints;i++){
288 //compute the distance from the bboxMin
289 var oldW = this._LocalPoints[i][0] - origX;
290 this._LocalPoints[i] = [(origX + oldW*scaleX),this._LocalPoints[i][1],this._LocalPoints[i][2]];
291
292 oldW = this._OrigLocalPoints[i][0] - origX;
293 this._OrigLocalPoints[i] = [(origX + oldW*scaleX),this._OrigLocalPoints[i][1],this._OrigLocalPoints[i][2]];
294 }
295 this._isDirty = true;
296 };
297
298 this.setHeight = function (newH) {
299 if (newH<1) {
300 newH=1; //clamp minimum width to 1
301 }
268 302
269 };//NO-OP for now 303 //scale the contents of this subpath to lie within this height
304 //determine the scale factor by comparing with the old height
305 var oldHeight = this._BBoxMax[1]-this._BBoxMin[1];
306 if (oldHeight<1) {
307 oldHeight=1;
308 }
309
310 var scaleY = newH/oldHeight;
311 if (scaleY===1) {
312 return; //no need to do anything
313 }
270 314
271 this.setHeight = function () { 315 //scale the local point positions such that the width of the bbox is the newW
316 var origY = this._BBoxMin[1];
317 var numPoints = this._LocalPoints.length;
318 for (var i=0;i<numPoints;i++){
319 //compute the distance from the bboxMin
320 var oldH = this._LocalPoints[i][1] - origY;
321 this._LocalPoints[i] = [this._LocalPoints[i][0],(origY + oldH*scaleY),this._LocalPoints[i][2]];
272 322
273 };//NO-OP for now 323 oldH = this._OrigLocalPoints[i][1] - origY;
324 this._OrigLocalPoints[i] = [this._OrigLocalPoints[i][0],(origY + oldH*scaleY),this._OrigLocalPoints[i][2]];
325 }
326 this._isDirty = true;
327 };
274 328
275 this.getWidth = function() { 329 this.getWidth = function() {
276 if (this._isDirty){ 330 if (this._isDirty){
@@ -583,7 +637,7 @@ var BrushStroke = function GLBrushStroke() {
583 //build the stamp for the brush stroke 637 //build the stamp for the brush stroke
584 var t=0; 638 var t=0;
585 var numTraces = this._strokeWidth; 639 var numTraces = this._strokeWidth;
586 var halfNumTraces = numTraces/2; 640 var halfNumTraces = numTraces*0.5;
587 var opaqueRegionHalfWidth = 0.5*this._strokeHardness*numTraces*0.01; //the 0.01 is to convert the strokeHardness from [0,100] to [0,1] 641 var opaqueRegionHalfWidth = 0.5*this._strokeHardness*numTraces*0.01; //the 0.01 is to convert the strokeHardness from [0,100] to [0,1]
588 var maxTransparentRegionHalfWidth = halfNumTraces-opaqueRegionHalfWidth; 642 var maxTransparentRegionHalfWidth = halfNumTraces-opaqueRegionHalfWidth;
589 643
@@ -603,20 +657,23 @@ var BrushStroke = function GLBrushStroke() {
603 ctx.lineCap="butt"; 657 ctx.lineCap="butt";
604 ctx.globalCompositeOperation = 'source-over'; 658 ctx.globalCompositeOperation = 'source-over';
605 ctx.globalAlpha = this._strokeColor[3]; 659 ctx.globalAlpha = this._strokeColor[3];
606 //todo figure out the correct formula for the line width 660
607 ctx.lineWidth=2;
608 if (t===numTraces-1){
609 ctx.lineWidth = 1;
610 }
611 for (t=0;t<numTraces;t++){ 661 for (t=0;t<numTraces;t++){
612 var disp = [brushStamp[t][0], brushStamp[t][1]]; 662 var disp = [brushStamp[t][0], brushStamp[t][1]];
613 var alphaVal = 1.0; 663 var alphaVal = 1.0;
614 var distFromOpaqueRegion = Math.abs(t-halfNumTraces) - opaqueRegionHalfWidth; 664 var distFromOpaqueRegion = Math.abs(t-halfNumTraces) - opaqueRegionHalfWidth;
615 if (distFromOpaqueRegion>0) { 665 if (distFromOpaqueRegion>0) {
616 alphaVal = 1.0 - distFromOpaqueRegion/maxTransparentRegionHalfWidth; 666 var transparencyFactor = distFromOpaqueRegion/maxTransparentRegionHalfWidth;
617 alphaVal *= 1.0/ctx.lineWidth; //factor that accounts for lineWidth !== 1 667 alphaVal = 1.0 - transparencyFactor;//(transparencyFactor*transparencyFactor);//the square term produces nonlinearly varying alpha values
668 alphaVal *= 0.5; //factor that accounts for lineWidth == 2
618 } 669 }
619 ctx.save(); 670 ctx.save();
671 if (t === (numTraces-1) || t === 0){
672 ctx.lineWidth = 1;
673 } else {
674 //todo figure out the correct formula for the line width
675 ctx.lineWidth=2;
676 }
620 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; 677 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
621 //linearly interpolate between the two stroke colors 678 //linearly interpolate between the two stroke colors
622 var currStrokeColor = VecUtils.vecInterpolate(4, this._strokeColor, this._secondStrokeColor, t/numTraces); 679 var currStrokeColor = VecUtils.vecInterpolate(4, this._strokeColor, this._secondStrokeColor, t/numTraces);
@@ -650,7 +707,7 @@ var BrushStroke = function GLBrushStroke() {
650 ctx.lineCap = "round"; 707 ctx.lineCap = "round";
651 ctx.lineJoin="round"; 708 ctx.lineJoin="round";
652 var minStrokeWidth = (this._strokeHardness*this._strokeWidth)/100; //the hardness is the percentage of the stroke width that's fully opaque 709 var minStrokeWidth = (this._strokeHardness*this._strokeWidth)/100; //the hardness is the percentage of the stroke width that's fully opaque
653 var numlayers = 1 + (this._strokeWidth-minStrokeWidth)/2; 710 var numlayers = 1 + Math.ceil((this._strokeWidth-minStrokeWidth)*0.5);
654 var alphaVal = 1.0/(numlayers); //this way the alpha at the first path will be 1 711 var alphaVal = 1.0/(numlayers); //this way the alpha at the first path will be 1
655 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")"; 712 ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
656 for (var l=0;l<numlayers;l++){ 713 for (var l=0;l<numlayers;l++){
@@ -678,6 +735,16 @@ var BrushStroke = function GLBrushStroke() {
678 ctx.lineTo(p[0],p[1]); 735 ctx.lineTo(p[0],p[1]);
679 } 736 }
680 ctx.lineWidth=2*l+minStrokeWidth; 737 ctx.lineWidth=2*l+minStrokeWidth;
738
739
740 //experiments with shadows
741 /*
742 ctx.shadowOffsetX = 10;
743 ctx.shadowOffsetY = 10;
744 ctx.shadowBlur = 10;
745 ctx.shadowColor = //"rgb("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+")";
746 "#FF6666"; //or use rgb(red, green, blue)
747 */
681 ctx.stroke(); 748 ctx.stroke();
682 }//for every layer l 749 }//for every layer l
683 } //if there is no calligraphic stroke 750 } //if there is no calligraphic stroke