diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 93 |
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 |