diff options
Diffstat (limited to 'assets')
-rw-r--r-- | assets/canvas-runtime.js | 32 | ||||
-rwxr-xr-x | assets/shaders/linearGradient.vert.glsl | 5 | ||||
-rw-r--r-- | assets/shaders/radialGradient.vert.glsl | 4 |
3 files changed, 26 insertions, 15 deletions
diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index eeafaab6..67d53963 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js | |||
@@ -878,11 +878,12 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
878 | inset = Math.ceil( lw ) - 0.5; | 878 | inset = Math.ceil( lw ) - 0.5; |
879 | 879 | ||
880 | if(this._fillColor.gradientMode) { | 880 | if(this._fillColor.gradientMode) { |
881 | if(this._fillColor.gradientMode === "radial") { | 881 | if(this._fillColor.gradientMode === "radial") { |
882 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2); | 882 | var ww = w - 2*lw, hh = h - 2*lw; |
883 | } else { | 883 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); |
884 | gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); | 884 | } else { |
885 | } | 885 | gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); |
886 | } | ||
886 | colors = this._fillColor.color; | 887 | colors = this._fillColor.color; |
887 | 888 | ||
888 | len = colors.length; | 889 | len = colors.length; |
@@ -912,11 +913,10 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
912 | inset = Math.ceil( 0.5*lw ) - 0.5; | 913 | inset = Math.ceil( 0.5*lw ) - 0.5; |
913 | 914 | ||
914 | if(this._strokeColor.gradientMode) { | 915 | if(this._strokeColor.gradientMode) { |
915 | if(this._strokeColor.gradientMode === "radial") { | 916 | if(this._strokeColor.gradientMode === "radial") |
916 | gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); | 917 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(h, w)/2); |
917 | } else { | 918 | else |
918 | gradient = ctx.createLinearGradient(0, h/2, w, h/2); | 919 | gradient = ctx.createLinearGradient(0, h/2, w, h/2); |
919 | } | ||
920 | colors = this._strokeColor.color; | 920 | colors = this._strokeColor.color; |
921 | 921 | ||
922 | len = colors.length; | 922 | len = colors.length; |
@@ -1116,9 +1116,9 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
1116 | if(this._fillColor.gradientMode) { | 1116 | if(this._fillColor.gradientMode) { |
1117 | if(this._fillColor.gradientMode === "radial") { | 1117 | if(this._fillColor.gradientMode === "radial") { |
1118 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, | 1118 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, |
1119 | xCtr, yCtr, Math.max(this._width, this._height)/2); | 1119 | xCtr, yCtr, Math.max(this._width, this._height)/2 - lineWidth); |
1120 | } else { | 1120 | } else { |
1121 | gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); | 1121 | gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2); |
1122 | } | 1122 | } |
1123 | colors = this._fillColor.color; | 1123 | colors = this._fillColor.color; |
1124 | 1124 | ||
@@ -1194,7 +1194,7 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { | |||
1194 | if (this._strokeColor) { | 1194 | if (this._strokeColor) { |
1195 | if(this._strokeColor.gradientMode) { | 1195 | if(this._strokeColor.gradientMode) { |
1196 | if(this._strokeColor.gradientMode === "radial") { | 1196 | if(this._strokeColor.gradientMode === "radial") { |
1197 | gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), | 1197 | gradient = ctx.createRadialGradient(xCtr, yCtr, 0, |
1198 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); | 1198 | xCtr, yCtr, 0.5*Math.max(this._height, this._width)); |
1199 | } else { | 1199 | } else { |
1200 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); | 1200 | gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); |
@@ -1456,6 +1456,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater | |||
1456 | _colorStop3: { value: 0.6, writable: true }, | 1456 | _colorStop3: { value: 0.6, writable: true }, |
1457 | _colorStop4: { value: 1.0, writable: true }, | 1457 | _colorStop4: { value: 1.0, writable: true }, |
1458 | 1458 | ||
1459 | _textureTransform: { value: [1,0,0, 0,1,0, 0,0,1], writable: true }, | ||
1460 | |||
1459 | init: { | 1461 | init: { |
1460 | value: function(world) { | 1462 | value: function(world) { |
1461 | var material = this._materialNode; | 1463 | var material = this._materialNode; |
@@ -1477,6 +1479,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater | |||
1477 | this._shader["default"].u_colorStop3.set( [this._colorStop3] ); | 1479 | this._shader["default"].u_colorStop3.set( [this._colorStop3] ); |
1478 | this._shader["default"].u_colorStop4.set( [this._colorStop4] ); | 1480 | this._shader["default"].u_colorStop4.set( [this._colorStop4] ); |
1479 | 1481 | ||
1482 | this._shader["default"].u_texTransform.set( this._textureTransform ); | ||
1483 | |||
1480 | if (this._angle !== undefined) | 1484 | if (this._angle !== undefined) |
1481 | this._shader["default"].u_cos_sin_angle.set([Math.cos(this._angle), Math.sin(this._angle)]); | 1485 | this._shader["default"].u_cos_sin_angle.set([Math.cos(this._angle), Math.sin(this._angle)]); |
1482 | } | 1486 | } |
@@ -1496,6 +1500,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater | |||
1496 | this._colorStop3 = jObj.colorStop3; | 1500 | this._colorStop3 = jObj.colorStop3; |
1497 | this._colorStop4 = jObj.colorStop4; | 1501 | this._colorStop4 = jObj.colorStop4; |
1498 | 1502 | ||
1503 | this._textureTransform = jObj.textureTransform; | ||
1504 | |||
1499 | if (this._angle !== undefined) | 1505 | if (this._angle !== undefined) |
1500 | this._angle = jObj.angle; | 1506 | this._angle = jObj.angle; |
1501 | } | 1507 | } |
diff --git a/assets/shaders/linearGradient.vert.glsl b/assets/shaders/linearGradient.vert.glsl index aac9cbee..f0800812 100755 --- a/assets/shaders/linearGradient.vert.glsl +++ b/assets/shaders/linearGradient.vert.glsl | |||
@@ -37,6 +37,7 @@ uniform float u_colorStop3; | |||
37 | uniform float u_colorStop4; | 37 | uniform float u_colorStop4; |
38 | uniform vec2 u_cos_sin_angle; | 38 | uniform vec2 u_cos_sin_angle; |
39 | //uniform int u_colorCount; // currently using 4 | 39 | //uniform int u_colorCount; // currently using 4 |
40 | uniform mat3 u_texTransform; | ||
40 | 41 | ||
41 | varying vec2 v_uv; | 42 | varying vec2 v_uv; |
42 | 43 | ||
@@ -44,5 +45,7 @@ varying vec2 v_uv; | |||
44 | void main(void) | 45 | void main(void) |
45 | { | 46 | { |
46 | gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; | 47 | gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; |
47 | v_uv = texcoord; | 48 | //v_uv = texcoord; |
49 | vec3 tmp = u_texTransform * vec3( texcoord, 1.0); | ||
50 | v_uv = tmp.xy; | ||
48 | } | 51 | } |
diff --git a/assets/shaders/radialGradient.vert.glsl b/assets/shaders/radialGradient.vert.glsl index c3e1b50a..7994ac12 100644 --- a/assets/shaders/radialGradient.vert.glsl +++ b/assets/shaders/radialGradient.vert.glsl | |||
@@ -18,11 +18,13 @@ attribute vec2 texcoord; | |||
18 | // matrix uniforms | 18 | // matrix uniforms |
19 | uniform mat4 u_mvMatrix; | 19 | uniform mat4 u_mvMatrix; |
20 | uniform mat4 u_projMatrix; | 20 | uniform mat4 u_projMatrix; |
21 | uniform mat3 u_texTransform; | ||
21 | 22 | ||
22 | varying vec2 v_uv; | 23 | varying vec2 v_uv; |
23 | 24 | ||
24 | void main(void) | 25 | void main(void) |
25 | { | 26 | { |
26 | gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; | 27 | gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; |
27 | v_uv = texcoord; | 28 | vec3 tmp = u_texTransform * vec3( texcoord, 1.0); |
29 | v_uv = tmp.xy; | ||
28 | } \ No newline at end of file | 30 | } \ No newline at end of file |