aboutsummaryrefslogtreecommitdiff
path: root/assets/canvas-runtime.js
diff options
context:
space:
mode:
Diffstat (limited to 'assets/canvas-runtime.js')
-rw-r--r--assets/canvas-runtime.js46
1 files changed, 41 insertions, 5 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js
index 3ed7ed0f..4fb0a327 100644
--- a/assets/canvas-runtime.js
+++ b/assets/canvas-runtime.js
@@ -1951,6 +1951,40 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, {
1951 } 1951 }
1952 }, 1952 },
1953 1953
1954 //buildColor returns the fillStyle or strokeStyle for the Canvas 2D context
1955 buildColor: {
1956 value: function(ctx, //the 2D rendering context (for creating gradients if necessary)
1957 ipColor, //color string, also encodes whether there's a gradient and of what type
1958 w, //width of the region of color
1959 h, //height of the region of color
1960 lw) //linewidth (i.e. stroke width/size)
1961 {
1962 if (ipColor.gradientMode){
1963 var position, gradient, cs, inset; //vars used in gradient calculations
1964 inset = Math.ceil( lw ) - 0.5;
1965
1966 if(ipColor.gradientMode === "radial") {
1967 var ww = w - 2*lw, hh = h - 2*lw;
1968 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2);
1969 } else {
1970 gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2);
1971 }
1972 var colors = ipColor.color;
1973
1974 var len = colors.length;
1975 for(n=0; n<len; n++) {
1976 position = colors[n].position/100;
1977 cs = colors[n].value;
1978 gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")");
1979 }
1980 return gradient;
1981 } else {
1982 var c = "rgba(" + 255*ipColor[0] + "," + 255*ipColor[1] + "," + 255*ipColor[2] + "," + ipColor[3] + ")";
1983 return c;
1984 }
1985 }
1986 },
1987
1954 render: { 1988 render: {
1955 value: function() { 1989 value: function() {
1956 // get the world 1990 // get the world
@@ -1967,18 +2001,19 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, {
1967 return; 2001 return;
1968 } 2002 }
1969 2003
2004 //vars used for the gradient computation in buildColor
2005 var w = world.getViewportWidth(), h = world.getViewportHeight();
2006
1970 ctx.save(); 2007 ctx.save();
1971 ctx.lineWidth = this._strokeWidth; 2008 ctx.lineWidth = this._strokeWidth;
1972 ctx.strokeStyle = "black"; 2009 ctx.strokeStyle = "black";
1973 if (this._strokeColor) { 2010 if (this._strokeColor) {
1974 var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")"; 2011 ctx.strokeStyle = this.buildColor(ctx, this._strokeColor, w,h, this._strokeWidth);
1975 ctx.strokeStyle = strokeColorStr;
1976 } 2012 }
1977 2013
1978 ctx.fillStyle = "white"; 2014 ctx.fillStyle = "white";
1979 if (this._fillColor){ 2015 if (this._fillColor){
1980 var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; 2016 ctx.fillStyle = this.buildColor(ctx, this._fillColor, w,h, this._strokeWidth);
1981 ctx.fillStyle = fillColorStr;
1982 } 2017 }
1983 var lineCap = ['butt','round','square']; 2018 var lineCap = ['butt','round','square'];
1984 ctx.lineCap = lineCap[1]; 2019 ctx.lineCap = lineCap[1];
@@ -2006,7 +2041,8 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, {
2006 ctx.restore(); 2041 ctx.restore();
2007 } 2042 }
2008 } 2043 }
2009});// ************************************************************************** 2044});
2045// **************************************************************************
2010// END runtime for the pen tool path 2046// END runtime for the pen tool path
2011// ************************************************************************** 2047// **************************************************************************
2012 2048