aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/geom/brush-stroke.js93
-rwxr-xr-xjs/lib/geom/sub-path.js331
2 files changed, 263 insertions, 161 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..f765b715 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -68,175 +68,210 @@ 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) 73GLSubpath.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 74
94 var numAnchors = this.getNumAnchors(); 75//buildBuffers
95 if (numAnchors === 0) { 76GLSubpath.prototype.buildBuffers = function () {
96 return; //nothing to do for empty paths 77 //no need to do anything for now (no WebGL)
97 } 78};
98 this.createSamples(false); //dirty bit checked in this function...will generate a polyline representation
99 79
100 var numPoints = this._Samples.length; 80//buildColor returns the fillStyle or strokeStyle for the Canvas 2D context
101 if (numPoints === 0){ 81GLSubpath.prototype.buildColor = function(ctx, //the 2D rendering context (for creating gradients if necessary)
102 return; //nothing to do for empty paths 82 ipColor, //color string, also encodes whether there's a gradient and of what type
103 } 83 w, //width of the region of color
104 84 h, //height of the region of color
105 //figure the size of the area we will draw into 85 lw) //linewidth (i.e. stroke width/size)
106 var bboxWidth=0, bboxHeight=0; 86{
107 bboxWidth = this._BBoxMax[0] - this._BBoxMin[0]; 87 if (ipColor.gradientMode){
108 bboxHeight = this._BBoxMax[1] - this._BBoxMin[1]; 88 var position, gradient, cs, inset; //vars used in gradient calculations
109 89 inset = Math.ceil( lw ) - 0.5;
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 90
121 ctx.fillStyle = "white"; 91 if(ipColor.gradientMode === "radial") {
122 if (this._fillColor){ 92 var ww = w - 2*lw, hh = h - 2*lw;
123 //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); 93 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
124 var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; 94 } else {
125 ctx.fillStyle = fillColorStr; 95 gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);