diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/canvas-runtime.js | 43 |
1 files changed, 39 insertions, 4 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index b5b08cea..524cdfeb 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -1958,6 +1958,40 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
1958 | } | 1958 | } |
1959 | }, | 1959 | }, |
1960 | 1960 | ||
1961 | //buildColor returns the fillStyle or strokeStyle for the Canvas 2D context | ||
1962 | buildColor: { | ||
1963 | value: function(ctx, //the 2D rendering context (for creating gradients if necessary) | ||
1964 | ipColor, //color string, also encodes whether there's a gradient and of what type | ||
1965 | w, //width of the region of color | ||
1966 | h, //height of the region of color | ||
1967 | lw) //linewidth (i.e. stroke width/size) | ||
1968 | { | ||
1969 | if (ipColor.gradientMode){ | ||
1970 | var position, gradient, cs, inset; //vars used in gradient calculations | ||
1971 | inset = Math.ceil( lw ) - 0.5; | ||
1972 | |||
1973 | if(ipColor.gradientMode === "radial") { | ||
1974 | var ww = w - 2*lw, hh = h - 2*lw; | ||
1975 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); | ||
1976 | } else { | ||
1977 | gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); | ||
1978 | } | ||
1979 | var colors = ipColor.color; | ||
1980 | |||
1981 | var len = colors.length; | ||
1982 | for(n=0; n<len; n++) { | ||
1983 | position = colors[n].position/100; | ||
1984 | cs = colors[n].value; | ||
1985 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
1986 | } | ||
1987 | return gradient; | ||
1988 | } else { | ||
1989 | var c = "rgba(" + 255*ipColor[0] + "," + 255*ipColor[1] + "," + 255*ipColor[2] + "," + ipColor[3] + ")"; | ||
1990 | return c; | ||
1991 | } | ||
1992 | } | ||
1993 | }, | ||
1994 | |||
1961 | render: { | 1995 | render: { |
1962 | value: function() { | 1996 | value: function() { |
1963 | // get the world | 1997 | // get the world |
@@ -1974,18 +2008,19 @@ NinjaCvsRt.RuntimeSubPath = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
1974 | return; | 2008 | return; |
1975 | } | 2009 | } |
1976 | 2010 | ||
2011 | //vars used for the gradient computation in buildColor | ||
2012 | var w = world.getViewportWidth(), h = world.getViewportHeight(); | ||
2013 | |||
1977 | ctx.save(); | 2014 | ctx.save(); |
1978 | ctx.lineWidth = this._strokeWidth; | 2015 | ctx.lineWidth = this._strokeWidth; |
1979 | ctx.strokeStyle = "black"; | 2016 | ctx.strokeStyle = "black"; |
1980 | if (this._strokeColor) { | 2017 | if (this._strokeColor) { |
1981 | var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")"; | 2018 | ctx.strokeStyle = this.buildColor(ctx, this._strokeColor, w,h, this._strokeWidth); |
1982 | ctx.strokeStyle = strokeColorStr; | ||
1983 | } | 2019 | } |
1984 | 2020 | ||
1985 | ctx.fillStyle = "white"; | 2021 | ctx.fillStyle = "white"; |
1986 | if (this._fillColor){ | 2022 | if (this._fillColor){ |
1987 | var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; | 2023 | ctx.fillStyle = this.buildColor(ctx, this._fillColor, w,h, this._strokeWidth); |
1988 | ctx.fillStyle = fillColorStr; | ||
1989 | } | 2024 | } |
1990 | var lineCap = ['butt','round','square']; | 2025 | var lineCap = ['butt','round','square']; |
1991 | ctx.lineCap = lineCap[1]; | 2026 | ctx.lineCap = lineCap[1]; |