From 91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 15:53:35 -0700 Subject: Radial gradients to match CSS --- js/lib/geom/circle.js | 3 +++ js/lib/geom/rectangle.js | 13 ++----------- js/lib/geom/shape-primitive.js | 27 +++++++++++++++++++++++++++ 3 files changed, 32 insertions(+), 11 deletions(-) (limited to 'js/lib/geom') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 0f1f49a9..afeed449 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -279,6 +279,7 @@ var Circle = function GLCircle() { if (fillPrim) { fillMaterial = this.makeFillMaterial(); + fillMaterial.fitToPrimitive( fillPrim ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); @@ -286,6 +287,7 @@ var Circle = function GLCircle() { if (strokePrim0) { strokeMaterial0 = this.makeStrokeMaterial(); + strokeMaterial0.fitToPrimitive( strokePrim0 ); this._primArray.push( strokePrim0 ); this._materialNodeArray.push( strokeMaterial0.getMaterialNode() ); @@ -293,6 +295,7 @@ var Circle = function GLCircle() { if (strokePrim1) { strokeMaterial2 = this.makeStrokeMaterial(); + strokeMaterial2.fitToPrimitive( strokePrim1 ); this._primArray.push( strokePrim1 ); this._materialNodeArray.push( strokeMaterial2.getMaterialNode() ); diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 490a9a6f..296ed024 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -57,13 +57,10 @@ var Rectangle = function GLRectangle() { this._strokeStyle = strokeStyle; this._matrix = Matrix.I(4); - //this._matrix[12] = xoffset; - //this._matrix[13] = yoffset; } // the overall radius includes the fill and the stroke. separate the two based onthe stroke width // this._fillRad = this._radius - this._strokeWidth; - // var err = 0.05; var err = 0; this._fillWidth = this._width - this._strokeWidth + err; this._fillHeight = this._height - this._strokeWidth + err; @@ -116,18 +113,10 @@ var Rectangle = function GLRectangle() { return this._strokeColor; }; - //this.setStrokeColor = function(c) { - // this._strokeColor = c; - // }; - this.getFillColor = function() { return this._fillColor; }; - //this.setFillColor = function(c) { - // this._fillColor = c.slice(0); - // }; - this.getTLRadius = function() { return this._tlRadius; }; @@ -324,6 +313,7 @@ var Rectangle = function GLRectangle() { // stroke var strokeMaterial = this.makeStrokeMaterial(); var strokePrim = this.createStroke([x,y], 2*xFill, 2*yFill, strokeSize, tlRadius, blRadius, brRadius, trRadius, strokeMaterial); + strokeMaterial.fitToPrimitive( strokePrim ); this._primArray.push( strokePrim ); this._materialNodeArray.push( strokeMaterial.getMaterialNode() ); @@ -337,6 +327,7 @@ var Rectangle = function GLRectangle() { var fillMaterial = this.makeFillMaterial(); //console.log( "fillMaterial: " + fillMaterial.getName() ); var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); + fillMaterial.fitToPrimitive( fillPrim ); this._primArray.push( fillPrim ); this._materialNodeArray.push( fillMaterial.getMaterialNode() ); diff --git a/js/lib/geom/shape-primitive.js b/js/lib/geom/shape-primitive.js index 97873d32..9864a8e9 100644 --- a/js/lib/geom/shape-primitive.js +++ b/js/lib/geom/shape-primitive.js @@ -49,6 +49,33 @@ ShapePrimitive.create = function(coords, normals, uvs, indices, primType, ver return prim; }; +ShapePrimitive.getBounds = function( prim ) +{ + var verts = prim.bufferStreams[0]; + var nVerts = verts.length; + var xMin = verts[0], xMax = verts[0], + yMin = verts[1], yMax = verts[1], + zMin = verts[2], zMax = verts[2]; + + for (var index=3; index xMax) xMax = verts[index]; + + index++; + if (verts[index] < yMin) yMin = verts[index]; + else if (verts[index] > yMax) yMax = verts[index]; + + index++; + if (verts[index] < zMin) zMin = verts[index]; + else if (verts[index] > zMax) zMax = verts[index]; + + index++; + } + + return [xMin, yMin, zMin, xMax, yMax, zMax]; +}; + if (typeof exports === "object") { exports.ShapePrimitive = ShapePrimitive; } \ No newline at end of file -- cgit v1.2.3 From 02e5fbb819f02d26a8a7179cf04021a0f6c6ddf6 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 14 May 2012 16:41:04 -0700 Subject: base canvas 2d rendering of radial gradient on size of the filled region only --- js/lib/geom/rectangle.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'js/lib/geom') diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index cf0e7fc8..4415af43 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -537,7 +537,8 @@ exports.Rectangle = Object.create(GeomObj, { 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); + 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); } else { gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); } -- cgit v1.2.3 From cb37bee07085690d72e69a82e76cae9166e5f0f1 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 15 May 2012 16:02:27 -0700 Subject: Gradient matching between WebGL and Canvas2D --- js/lib/geom/circle.js | 119 +++++++++++------------------- js/lib/geom/rectangle.js | 183 ++++++++++++++++++++++++----------------------- 2 files changed, 134 insertions(+), 168 deletions(-) (limited to 'js/lib/geom') diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index b60ad58f..2ca4c1f5 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js @@ -505,9 +505,9 @@ exports.Circle = Object.create(GeomObj, { 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; @@ -804,79 +804,44 @@ exports.Circle = Object.create(GeomObj, { } }, - /* - this.getNearPoint = function( pt, dir ) { - var world = this.getWorld(); - if (!world) throw( "null world in getNearPoint" ); - - // get a point on the plane of the circle - // the point is in NDC, as is the input parameters - var mat = this.getMatrix(); - var plane = [0,0,1,0]; - plane = MathUtils.transformPlane( plane, mat ); - var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane ); - - // transform the projected point back to the XY plane - //var invMat = mat.inverse(); - var invMat = glmat4.inverse( mat, [] ); - var planePt = MathUtils.transformPoint( projPt, invMat ); - - // get the normalized device coordinates (NDC) for - // the position and radii. - var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); - var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph, - xRadNDC = this._width/vpw, yRadNDC = this._height/vph; - var projMat = world.makePerspectiveMatrix(); - var z = -world.getViewDistance(); - var planePtNDC = planePt.slice(0); - planePtNDC[2] = z; - planePtNDC = MathUtils.transformHomogeneousPoint( planePtNDC, projMat ); - planePtNDC = MathUtils.applyHomogeneousCoordinate( planePtNDC ); - - // get the gl coordinates - var aspect = world.getAspect(); - var zn = world.getZNear(), zf = world.getZFar(); - var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0), - b = -t, - r = aspect*t, - l = -r; - - var angle = Math.atan2( planePtNDC[1] - yNDC, planePtNDC[0] - xNDC ); - var degrees = angle*180.0/Math.PI; - var objPt = [Math.cos(angle)*xRadNDC + xNDC, Math.sin(angle)*yRadNDC + yNDC, 0]; - - // convert to GL coordinates - objPt[0] = -z*(r-l)/(2.0*zn)*objPt[0]; - objPt[1] = -z*(t-b)/(2.0*zn)*objPt[1]; - - // re-apply the transform - objPt = MathUtils.transformPoint( objPt, mat ); - - return objPt; - }; - */ - recalcTexMapCoords: { - value: function(vrts, uvs) { - var n = vrts.length/3; - var ivrt = 0, iuv = 0; - var uMin = 1.e8, uMax = -1.e8, - vMin = 1.e8, vMax = -1.e8; - - for (var i=0; i uMax) uMax = uvs[iuv]; - - iuv++; ivrt++; - uvs[iuv] = 0.5*(vrts[ivrt]/this._ovalHeight + 1); - if (uvs[iuv] < vMin) vMin = uvs[iuv]; - if (uvs[iuv] > vMax) vMax = uvs[iuv]; - iuv++; ivrt += 2; - } - - //console.log( "remap: " + uvs ); - //console.log( "uRange: " + uMin + " => " + uMax ); - //console.log( "vRange: " + vMin + " => " + vMax ); - } - } + recalcTexMapCoords: { + value: function(vrts, uvs) { + var n = vrts.length/3; + if (n === 0) return; + var ivrt = 0, iuv = 0; + var uMin = 1.e8, uMax = -1.e8, + vMin = 1.e8, vMax = -1.e8; + + var i, index = 3; + var xMin = vrts[0], xMax = vrts[0], + yMin = vrts[1], yMax = vrts[1]; + for (i=1; i xMax) xMax = vrts[index]; + + if (vrts[index+1] < yMin) yMin = vrts[index+1]; + else if (vrts[index+1] > yMax) yMax = vrts[index+1]; + + index += 3; + } + var ovalWidth = xMax - xMin, + ovalHeight = yMax - yMin; + for (i=0; i uMax) uMax = uvs[iuv]; + + iuv++; ivrt++; + uvs[iuv] = (vrts[ivrt]-yMin)/ovalHeight; + if (uvs[iuv] < vMin) vMin = uvs[iuv]; + if (uvs[iuv] > vMax) vMax = uvs[iuv]; + iuv++; ivrt += 2; + } + + //console.log( "remap" ); + //console.log( "uRange: " + uMin + " => " + uMax ); + //console.log( "vRange: " + vMin + " => " + vMax ); + } + } }); \ No newline at end of file diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 4415af43..8fc80c60 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js @@ -508,98 +508,99 @@ exports.Rectangle = Object.create(GeomObj, { }, render: { - value: function() { - // get the world - var world = this.getWorld(); - if (!world) throw( "null world in rectangle render" ); - - // get the context - var ctx = world.get2DContext(); - if (!ctx) return; - - // get some dimensions - var lw = this._strokeWidth; - var w = world.getViewportWidth(), - h = world.getViewportHeight(); - - var c, - inset, - gradient, - colors, - len, - n, - position, - cs; - // render the fill - ctx.beginPath(); - if (this._fillColor) { - inset = Math.ceil( lw ) - 0.5; - - if(this._fillColor.gradientMode) { - if(this._fillColor.gradientMode === "radial") { + value: function() { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in rectangle render" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // get some dimensions + var lw = this._strokeWidth; + var w = world.getViewportWidth(), + h = world.getViewportHeight(); + + var c, + inset, + gradient, + colors, + len, + n, + position, + cs; + // render the fill + ctx.beginPath(); + if (this._fillColor) { + inset = Math.ceil( lw ) - 0.5; + + 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); - } else { - gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); - } - colors = this._fillColor.color; - - len = colors.length; - - for(n=0; n