diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/canvas-runtime.js | 46 |
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 | ||