diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/geom/brush-stroke.js | 93 | ||||
-rwxr-xr-x | js/lib/geom/sub-path.js | 308 |
2 files changed, 236 insertions, 165 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 |
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 4c5fe1eb..db115655 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js | |||
@@ -68,175 +68,179 @@ var GLSubpath = function GLSubpath() { | |||
68 | this._selectedAnchorIndex = -1; | 68 | this._selectedAnchorIndex = -1; |
69 | 69 | ||
70 | this._SAMPLING_EPSILON = 0.5; //epsilon used for sampling the curve | 70 | this._SAMPLING_EPSILON = 0.5; //epsilon used for sampling the curve |
71 | }; //function GLSubpath ...class definition | ||
71 | 72 | ||
72 | // (current GeomObj complains if buildBuffers/render is added to GLSubpath prototype) | 73 | GLSubpath.prototype = Object.create(GeomObj, {}); |
73 | //buildBuffers | ||
74 | // Build the stroke vertices, normals, textures and colors | ||
75 | // Add that array data to the GPU using OpenGL data binding | ||
76 | this.buildBuffers = function () { | ||
77 | // return; //no need to do anything for now | ||
78 | }; | ||
79 | |||
80 | //render | ||
81 | // specify how to render the subpath in Canvas2D | ||
82 | this.render = function () { | ||
83 | // get the world | ||
84 | var world = this.getWorld(); | ||
85 | if (!world) throw( "null world in subpath render" ); | ||
86 | if (!this._canvas){ | ||
87 | //set the canvas by querying the world | ||
88 | this._canvas = this.getWorld().getCanvas(); | ||
89 | } | ||
90 | // get the context | ||
91 | var ctx = world.get2DContext(); | ||
92 | if (!ctx) throw ("null context in subpath render"); | ||
93 | |||
94 | var numAnchors = this.getNumAnchors(); | ||
95 | if (numAnchors === 0) { | ||
96 | return; //nothing to do for empty paths | ||
97 | } | ||
98 | this.createSamples(false); //dirty bit checked in this function...will generate a polyline representation | ||
99 | 74 | ||
100 | var numPoints = this._Samples.length; | 75 | //buildBuffers |
101 | if (numPoints === 0){ | 76 | GLSubpath.prototype.buildBuffers = function () { |
102 | return; //nothing to do for empty paths | 77 | //no need to do anything for now (no WebGL) |
103 | } | 78 | }; |
104 | |||
105 | //figure the size of the area we will draw into | ||
106 | var bboxWidth=0, bboxHeight=0; | ||
107 | bboxWidth = this._BBoxMax[0] - this._BBoxMin[0]; | ||
108 | bboxHeight = this._BBoxMax[1] - this._BBoxMin[1]; | ||
109 | |||
110 | ctx.save(); | ||
111 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); | ||
112 | |||
113 | ctx.lineWidth = this._strokeWidth; | ||
114 | ctx.strokeStyle = "black"; | ||
115 | if (this._strokeColor) { | ||
116 | //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); | ||
117 | var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")"; | ||
118 | ctx.strokeStyle = strokeColorStr; | ||
119 | } | ||
120 | 79 | ||
121 | ctx.fillStyle = "white"; | 80 | //render |
122 | if (this._fillColor){ | 81 | // specify how to render the subpath in Canvas2D |
123 | //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); | 82 | GLSubpath.prototype.render = function () { |
124 | var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; | 83 | // get the world |
125 | ctx.fillStyle = fillColorStr; | 84 | var world = this.getWorld(); |
126 | } | 85 | if (!world) throw( "null world in subpath render" ); |
127 | var lineCap = ['butt','round','square']; | 86 | if (!this._canvas){ |
128 | ctx.lineCap = lineCap[1]; | 87 | //set the canvas by querying the world |
129 |