From 6b03f357f45d76733ae7bf5ff52ffe2fb2a84fda Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 18 May 2012 12:35:58 -0700 Subject: Updates for WebGL/Canvas 2D authortime and runtime gradients. --- assets/canvas-runtime.js | 26 +++++++++++++------------- js/io/system/ninjalibrary.json | 2 +- js/lib/geom/circle.js | 2 +- js/lib/geom/rectangle.js | 10 ++++------ 4 files changed, 19 insertions(+), 21 deletions(-) diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index b6682493..67d53963 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -878,11 +878,12 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { inset = Math.ceil( lw ) - 0.5; if(this._fillColor.gradientMode) { - if(this._fillColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); - } else { - gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); - } + if(this._fillColor.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); + } colors = this._fillColor.color; len = colors.length; @@ -912,11 +913,10 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { inset = Math.ceil( 0.5*lw ) - 0.5; if(this._strokeColor.gradientMode) { - if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); - } else { - gradient = ctx.createLinearGradient(0, h/2, w, h/2); - } + if(this._strokeColor.gradientMode === "radial") + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(h, w)/2); + else + gradient = ctx.createLinearGradient(0, h/2, w, h/2); colors = this._strokeColor.color; len = colors.length; @@ -1116,9 +1116,9 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, Math.max(this._width, this._height)/2); + xCtr, yCtr, Math.max(this._width, this._height)/2 - lineWidth); } else { - gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); + gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2); } colors = this._fillColor.color; @@ -1194,7 +1194,7 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { if (this._strokeColor) { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), + gradient = ctx.createRadialGradient(xCtr, yCtr, 0, xCtr, yCtr, 0.5*Math.max(this._height, this._width)); } else { gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); diff --git a/js/io/system/ninjalibrary.json b/js/io/system/ninjalibrary.json index 5bacb28a..0d211fb5 100644 --- a/js/io/system/ninjalibrary.json +++ b/js/io/system/ninjalibrary.json @@ -1,6 +1,6 @@ { "libraries": [ {"name": "Montage", "path": "/node_modules/descriptor.json", "version": "0.8.0.0"}, - {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.6.1"} + {"name": "RDGE", "path": "/assets/descriptor.json", "version": "0.5.6.2"} ] } \ No newline at end of file diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 2ca4c1f5..4a369844 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -581,7 +581,7 @@ exports.Circle = Object.create(GeomObj, { if (this._strokeColor) { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), + gradient = ctx.createRadialGradient(xCtr, yCtr, 0, xCtr, yCtr, 0.5*Math.max(this._height, this._width)); } else { gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 711245ae..b85433a0 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -507,7 +507,7 @@ exports.Rectangle = Object.create(GeomObj, { } }, - render: { + render: { value: function() { // get the world var world = this.getWorld(); @@ -538,7 +538,6 @@ exports.Rectangle = Object.create(GeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { var ww = w - 2*lw, hh = h - 2*lw; - //gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2-this._strokeWidth, h/2, Math.max(ww, hh)/2); 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); @@ -572,11 +571,10 @@ exports.Rectangle = Object.create(GeomObj, { inset = Math.ceil( 0.5*lw ) - 0.5; if(this._strokeColor.gradientMode) { - if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); - } else { + if(this._strokeColor.gradientMode === "radial") + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(h, w)/2); + else gradient = ctx.createLinearGradient(0, h/2, w, h/2); - } colors = this._strokeColor.color; len = colors.length; -- cgit v1.2.3