enable gradients for brush stroke (in authoring as well as runtime)

2 files changed, 790 insertions, 678 deletions

diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index 524cdfeb..76332bcb 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -2137,15 +2137,59 @@ NinjaCvsRt.RuntimeBrushStroke = Object.create(NinjaCvsRt.RuntimeGeomObj, {
         }
     },
 
+    //buildColor returns the fillStyle or strokeStyle for the Canvas 2D context
+    buildColor: {
+        value: function(ctx,   //the 2D rendering context (for creating gradients if necessary)
+                 ipColor,      //color string, also encodes whether there's a gradient and of what type
+                 w,            //width of the region of color
+                 h,            //height of the region of color
+                 lw)           //linewidth (i.e. stroke width/size)
+        {
+            if (ipColor.gradientMode){
+                var position, gradient, cs, inset; //vars used in gradient calculations
+                inset = Math.ceil( lw ) - 0.5;
+
+                if(ipColor.gradientMode === "radial") {
+                    var ww = w - 2*lw,  hh = h - 2*lw;
+                    gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
+                } else {
+                    gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
+                }
+                var colors = ipColor.color;
+
+                var len = colors.length;
+                for(n=0; n<len; n++) {
+                    position = colors[n].position/100;
+                    cs = colors[n].value;
+                    gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
+                }
+                return gradient;
+            } else {
+                var c = "rgba(" + 255*ipColor[0] + "," + 255*ipColor[1] + "," + 255*ipColor[2] + "," + ipColor[3] + ")";
+                return c;
+            }
+        }
+    },
+
     render: {
         value: function() {
+            //vars for gradient code
+            var w,h;
+
             // get the world
             var world = this.getWorld();
             if (!world)  {
                 throw( "null world in brush stroke render" );
                 return;
-            }
+            } else {
 
+                if (this._strokeColor.gradientMode){
+                    useBuildColor = true;
+                }
+                //vars used for the gradient computation in buildColor
+                w = world.getViewportWidth();
+                h = world.getViewportHeight();
+            }
             // get the context
             var ctx = world.get2DContext();
             if (!ctx)  {
@@ -2169,7 +2213,7 @@ NinjaCvsRt.RuntimeBrushStroke = Object.create(NinjaCvsRt.RuntimeGeomObj, {
 
                 //build an angled (calligraphic) brush stamp
                 var deltaDisplacement = [Math.cos(this._strokeAngle),Math.sin(this._strokeAngle)];
-                deltaDisplacement = VecUtils.vecNormalize(2, deltaDisplacement, 1);
+                deltaDisplacement = this.vecNormalize(2, deltaDisplacement, 1);
                 var startPos = [-halfNumTraces*deltaDisplacement[0],-halfNumTraces*deltaDisplacement[1]];
 
                 var brushStamp = [];
@@ -2198,7 +2242,11 @@ NinjaCvsRt.RuntimeBrushStroke = Object.create(NinjaCvsRt.RuntimeGeomObj, {
                     } else {
                         ctx.lineWidth=2;
                     }
-                    ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
+                    if (!useBuildColor){
+                        ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
+                    } else {
+                        ctx.strokeStyle = this.buildColor(ctx, this._strokeColor, w, h, this._strokeWidth, alphaVal);
+                    }
                     ctx.translate(disp[0],disp[1]);
                     ctx.beginPath();
                     p = points[0];
@@ -2218,7 +2266,13 @@ NinjaCvsRt.RuntimeBrushStroke = Object.create(NinjaCvsRt.RuntimeGeomObj, {
                 var minStrokeWidth = (this._strokeHardness*this._strokeWidth)/100; //the hardness is the percentage of the stroke width that's fully opaque
                 var numlayers = 1 + Math.ceil((this._strokeWidth-minStrokeWidth)*0.5);
                 var alphaVal = 1.0/(numlayers); //this way the alpha at the first path will be 1
-                ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
+
+                if (!useBuildColor){
+                    ctx.strokeStyle="rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+alphaVal+")";
+                } else {
+                    ctx.strokeStyle = this.buildColor(ctx, this._strokeColor, w,h, this._strokeWidth, alphaVal);
+                }
+                
                 for (var l=0;l<numlayers;l++){
                     ctx.beginPath();
                     p = points[0];
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 09a7023c..b2e56149 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -65,777 +65,835 @@ var BrushStroke = function GLBrushStroke() {
     this._planeMatInv = null;
     this._planeCenter = null;
     this._dragPlane = null;
+}; //BrushStroke class defition
 
-    /////////////////////////////////////////////////////////
-    // Property Accessors/Setters
-    /////////////////////////////////////////////////////////
-    this.setCanvas = function(c) {
-        this._canvas = c;
+BrushStroke.prototype = Object.create(GeomObj, {});
+
+/////////////////////////////////////////////////////////
+// Property Accessors/Setters
+/////////////////////////////////////////////////////////
+BrushStroke.prototype.setCanvas = function(c) {
+    this._canvas = c;
+};
+
+BrushStroke.prototype.setWorld = function (world) {
+    this._world = world;
+};
+
+BrushStroke.prototype.getWorld = function () {
+    return this._world;
+};
+
+BrushStroke.prototype.geomType = function () {
+    return this.GEOM_TYPE_BRUSH_STROKE;
+};
+
+BrushStroke.prototype.setDrawingTool = function (tool) {
+    this._drawingTool = tool;
+};
+
+BrushStroke.prototype.getDrawingTool = function () {
+    return this._drawingTool;
+};
+
+BrushStroke.prototype.setPlaneMatrix = function(planeMat){
+    this._planeMat = planeMat;
+};
+
+BrushStroke.prototype.setPlaneMatrixInverse = function(planeMatInv){
+    this._planeMatInv = planeMatInv;
+};
+
+BrushStroke.prototype.setPlaneCenter = function(pc){
+    this._planeCenter = pc;
+};
+
+BrushStroke.prototype.setDragPlane = function(p){
+    this._dragPlane = p;
+};
+
+BrushStroke.prototype.getNumPoints = function () {
+    if (this._LocalPoints.length)
+        return this._LocalPoints.length;
+    else
+        return this._Points.length;
+};
+
+BrushStroke.prototype.getPoint = function (index) {
+    return this._Points[index].slice(0);
+};
+
+BrushStroke.prototype.addPoint = function (pt) {
+    //add the point only if it is some epsilon away from the previous point
+    var numPoints = this._Points.length;
+    if (numPoints>0) {
+        var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD;
+        var prevPt = this._Points[numPoints-1];
+        var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]];
+        var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]);
+        if (diffPtMag>threshold){
+            this._Points.push(pt);
+            this._isDirty=true;
+            this._isInit = false;
+        }
+    } else {
+        this._Points.push(pt);
+        this._isDirty=true;
+        this._isInit = false;
     }
+};
 
-    this.setWorld = function (world) {
-        this._world = world;
-    };
+BrushStroke.prototype.insertPoint = function(pt, index){
+    this._Points.splice(index, 0, pt);
+    this._isDirty=true;
+    this._isInit = false;
+};
 
-    this.getWorld = function () {
-        return this._world;
-    };
+BrushStroke.prototype.isDirty = function(){
+    return this._isDirty;
+};
 
-    this.geomType = function () {
-        return this.GEOM_TYPE_BRUSH_STROKE;
-    };
+BrushStroke.prototype.makeDirty = function(){
+    this._isDirty=true;
+};
 
-    this.setDrawingTool = function (tool) {
-        this._drawingTool = tool;
-    };
+BrushStroke.prototype.getStageWorldCenter = function() {
+    return this._stageWorldCenter;
+};