From d0661d6c587aced68a68e36a5ec4e81f8a2096e8 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 23 Feb 2012 16:57:55 -0800 Subject: bug fixes for canvas 2d shape drawing. --- js/helper-classes/RDGE/GLCircle.js | 136 +++++++++++++++++----------------- js/helper-classes/RDGE/GLLine.js | 57 +++++++------- js/helper-classes/RDGE/GLRectangle.js | 61 ++++++++------- 3 files changed, 124 insertions(+), 130 deletions(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLCircle.js b/js/helper-classes/RDGE/GLCircle.js index 712544c0..656657f6 100755 --- a/js/helper-classes/RDGE/GLCircle.js +++ b/js/helper-classes/RDGE/GLCircle.js @@ -398,59 +398,58 @@ function GLCircle() // set up the fill style ctx.beginPath(); ctx.lineWidth = 0; - ctx.fillStyle = "#990000"; if (this._fillColor) { var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; ctx.fillStyle = c; - } - // draw the fill - ctx.beginPath(); - var p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - var index = 1; - while (index < n) - { - p0 = MathUtils.transformPoint( bezPts[index], mat ); - p1 = MathUtils.transformPoint( bezPts[index+1], mat ); + // draw the fill + ctx.beginPath(); + var p = MathUtils.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + var index = 1; + while (index < n) + { + p0 = MathUtils.transformPoint( bezPts[index], mat ); + p1 = MathUtils.transformPoint( bezPts[index+1], mat ); - x0 = p0[0]; y0 = p0[1]; - x1 = p1[0]; y1 = p1[1]; - ctx.quadraticCurveTo( x0, y0, x1, y1 ); - index += 2; - } + x0 = p0[0]; y0 = p0[1]; + x1 = p1[0]; y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } - if ( MathUtils.fpSign(innerRad) > 0) - { - xScale = 0.5*innerRad*this._width; - yScale = 0.5*innerRad*this._height; - mat[0] = xScale; - mat[5] = yScale; - - // get the bezier points - var bezPts = MathUtils.circularArcToBezier( Vector.create([0,0,0]), Vector.create([1,0,0]), -2.0*Math.PI ); - if (bezPts) + if ( MathUtils.fpSign(innerRad) > 0) { - var n = bezPts.length; - p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - index = 1; - while (index < n) + xScale = 0.5*innerRad*this._width; + yScale = 0.5*innerRad*this._height; + mat[0] = xScale; + mat[5] = yScale; + + // get the bezier points + var bezPts = MathUtils.circularArcToBezier( Vector.create([0,0,0]), Vector.create([1,0,0]), -2.0*Math.PI ); + if (bezPts) { - p0 = MathUtils.transformPoint( bezPts[index], mat ); - p1 = MathUtils.transformPoint( bezPts[index+1], mat ); - - var x0 = p0[0], y0 = p0[1], - x1 = p1[0], y1 = p1[1]; - ctx.quadraticCurveTo( x0, y0, x1, y1 ); - index += 2; + var n = bezPts.length; + p = MathUtils.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) + { + p0 = MathUtils.transformPoint( bezPts[index], mat ); + p1 = MathUtils.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } } } - } - // fill the path - ctx.fill(); + // fill the path + ctx.fill(); + } // calculate the stroke matrix xScale = 0.5*this._width - 0.5*lineWidth; @@ -461,35 +460,10 @@ function GLCircle() // set up the stroke style ctx.beginPath(); ctx.lineWidth = lineWidth; - ctx.strokeStyle = "#0000ff"; if (this._strokeColor) { var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; ctx.strokeStyle = c; - } - - // draw the stroke - p = MathUtils.transformPoint( bezPts[0], mat ); - ctx.moveTo( p[0], p[1] ); - index = 1; - while (index < n) - { - var p0 = MathUtils.transformPoint( bezPts[index], mat ); - var p1 = MathUtils.transformPoint( bezPts[index+1], mat ); - - var x0 = p0[0], y0 = p0[1], - x1 = p1[0], y1 = p1[1]; - ctx.quadraticCurveTo( x0, y0, x1, y1 ); - index += 2; - } - - if (MathUtils.fpSign(innerRad) > 0) - { - // calculate the stroke matrix - xScale = 0.5*innerRad*this._width - 0.5*lineWidth; - yScale = 0.5*innerRad*this._height - 0.5*lineWidth; - mat[0] = xScale; - mat[5] = yScale; // draw the stroke p = MathUtils.transformPoint( bezPts[0], mat ); @@ -505,10 +479,34 @@ function GLCircle() ctx.quadraticCurveTo( x0, y0, x1, y1 ); index += 2; } - } - // render the stroke - ctx.stroke(); + if (MathUtils.fpSign(innerRad) > 0) + { + // calculate the stroke matrix + xScale = 0.5*innerRad*this._width - 0.5*lineWidth; + yScale = 0.5*innerRad*this._height - 0.5*lineWidth; + mat[0] = xScale; + mat[5] = yScale; + + // draw the stroke + p = MathUtils.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) + { + var p0 = MathUtils.transformPoint( bezPts[index], mat ); + var p1 = MathUtils.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + } + + // render the stroke + ctx.stroke(); + } } } diff --git a/js/helper-classes/RDGE/GLLine.js b/js/helper-classes/RDGE/GLLine.js index f715a43c..5228ac09 100755 --- a/js/helper-classes/RDGE/GLLine.js +++ b/js/helper-classes/RDGE/GLLine.js @@ -364,41 +364,40 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro var lineWidth = this._strokeWidth; ctx.beginPath(); ctx.lineWidth = lineWidth; - ctx.strokeStyle = "#0000ff"; if (this._strokeColor) { var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; ctx.strokeStyle = c; - } - // get the points - var p0, p1; - var w = this._width, h = this._height; - if(this._slope === "vertical") - { - p0 = [0.5*w, 0]; - p1 = [0.5*w, h]; - } - else if(this._slope === "horizontal") - { - p0 = [0, 0.5*h]; - p1 = [w, 0.5*h]; - } - else if(this._slope > 0) - { - p0 = [this._xAdj, this._yAdj]; - p1 = [w - this._xAdj, h - this._yAdj]; - } - else - { - p0 = [this._xAdj, h - this._yAdj]; - p1 = [w - this._xAdj, this._yAdj]; - } + // get the points + var p0, p1; + var w = this._width, h = this._height; + if(this._slope === "vertical") + { + p0 = [0.5*w, 0]; + p1 = [0.5*w, h]; + } + else if(this._slope === "horizontal") + { + p0 = [0, 0.5*h]; + p1 = [w, 0.5*h]; + } + else if(this._slope > 0) + { + p0 = [this._xAdj, this._yAdj]; + p1 = [w - this._xAdj, h - this._yAdj]; + } + else + { + p0 = [this._xAdj, h - this._yAdj]; + p1 = [w - this._xAdj, this._yAdj]; + } - // draw the line - ctx.moveTo( p0[0], p0[1] ); - ctx.lineTo( p1[0], p1[1] ); - ctx.stroke(); + // draw the line + ctx.moveTo( p0[0], p0[1] ); + ctx.lineTo( p1[0], p1[1] ); + ctx.stroke(); + } } diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index 3c1cb7dc..cf9c123e 100755 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js @@ -402,7 +402,6 @@ function GLRectangle() // set the fill ctx.beginPath(); - ctx.fillStyle = "#990000"; if (this._fillColor) { var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; @@ -410,7 +409,6 @@ function GLRectangle() } // set the stroke - ctx.strokeStyle = "#0000ff"; if (this._strokeColor) { var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; @@ -420,8 +418,8 @@ function GLRectangle() ctx.lineWidth = lw; var inset = Math.ceil( 0.5*lw ) + 0.5; this.renderPath( inset, ctx ); - ctx.fill(); - ctx.stroke(); + if (this._fillColor) ctx.fill(); + if (this._strokeColor) ctx.stroke(); ctx.closePath(); } @@ -777,15 +775,15 @@ RectangleFill.create = function( rectCtr, width, height, tlRad, blRad, brRad, } //refine the mesh for vertex deformations - if (material) - { - if (material.hasVertexDeformation()) - { - var paramRange = material.getVertexDeformationRange(); - var tolerance = material.getVertexDeformationTolerance(); - nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); - } - } +// if (material) +// { +// if (material.hasVertexDeformation()) +// { +// var paramRange = material.getVertexDeformationRange(); +// var tolerance = material.getVertexDeformationTolerance(); +// nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); +// } +// } // create the RDGE primitive var prim = ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, g_Engine.getContext().renderer.TRIANGLES, nVertices); @@ -1051,15 +1049,15 @@ RectangleStroke.create = function( rectCtr, width, height, strokeWidth, tlRad, } //refine the mesh for vertex deformations - if (material) - { - if (material.hasVertexDeformation()) - { - var paramRange = material.getVertexDeformationRange(); - var tolerance = material.getVertexDeformationTolerance(); - //nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); - } - } +// if (material) +// { +// if (material.hasVertexDeformation()) +// { +// var paramRange = material.getVertexDeformationRange(); +// var tolerance = material.getVertexDeformationTolerance(); +// nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); +// } +// } // create the RDGE primitive var prim = ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, g_Engine.getContext().renderer.TRIANGLES, nVertices); @@ -1144,19 +1142,18 @@ RectangleGeometry.create = function( ctr, width, height, material ) RectangleGeometry.pushIndices( 0, 3, 2 ); //refine the mesh for vertex deformations - if (material) - { - if (material.hasVertexDeformation()) - { - var paramRange = material.getVertexDeformationRange(); - var tolerance = material.getVertexDeformationTolerance(); - //nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); - } - } +// if (material) +// { +// if (material.hasVertexDeformation()) +// { +// var paramRange = material.getVertexDeformationRange(); +// var tolerance = material.getVertexDeformationTolerance(); +// nVertices = ShapePrimitive.refineMesh( this.vertices, this.normals, this.uvs, this.indices, nVertices, paramRange, tolerance ); +// } +// } // create the RDGE primitive var prim = ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, g_Engine.getContext().renderer.TRIANGLES, nVertices); - //var prim = ShapePrimitive.create(this.vertices, this.normals, this.uvs, this.indices, g_Engine.getContext().renderer.LINES, nVertices); return prim; } -- cgit v1.2.3 From 8578322c60adaaf65f37ba96f2a0f7ed9de8e1dc Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 27 Feb 2012 10:28:03 -0800 Subject: Fixed various rendering bugs. --- js/helper-classes/RDGE/GLCircle.js | 4 ++-- js/helper-classes/RDGE/GLGeomObj.js | 4 ++-- js/helper-classes/RDGE/GLLine.js | 2 +- js/helper-classes/RDGE/GLRectangle.js | 24 +++++++++++++++--------- js/helper-classes/RDGE/GLWorld.js | 2 +- 5 files changed, 21 insertions(+), 15 deletions(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLCircle.js b/js/helper-classes/RDGE/GLCircle.js index 656657f6..15ed6b6d 100755 --- a/js/helper-classes/RDGE/GLCircle.js +++ b/js/helper-classes/RDGE/GLCircle.js @@ -47,8 +47,8 @@ function GLCircle() this._strokeWidth = strokeSize; this._innerRadius = innerRadius; - this._strokeColor = strokeColor; - this._fillColor = fillColor; + if (strokeColor) this._strokeColor = strokeColor; + if (fillColor) this._fillColor = fillColor; this._strokeStyle = strokeStyle; } diff --git a/js/helper-classes/RDGE/GLGeomObj.js b/js/helper-classes/RDGE/GLGeomObj.js index 5d7497ad..c1ee01ba 100755 --- a/js/helper-classes/RDGE/GLGeomObj.js +++ b/js/helper-classes/RDGE/GLGeomObj.js @@ -38,8 +38,8 @@ function GLGeomObj() this.m_world = null; // stroke and fill colors - this._strokeColor; - this._fillColor; + this._strokeColor = [0,0,0,0]; + this._fillColor = [0,0,0,0]; // stroke and fill materials this._fillMaterial; diff --git a/js/helper-classes/RDGE/GLLine.js b/js/helper-classes/RDGE/GLLine.js index 5228ac09..5b966896 100755 --- a/js/helper-classes/RDGE/GLLine.js +++ b/js/helper-classes/RDGE/GLLine.js @@ -43,7 +43,7 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro this._slope = slope; this._strokeWidth = strokeSize; - this._strokeColor = strokeColor; + if (strokeCOlor)this._strokeColor = strokeColor; this._strokeStyle = strokeStyle; this._scaleX = (world.getViewportWidth())/(world.getViewportHeight()); diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index cf9c123e..a801d3c4 100755 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js @@ -400,27 +400,33 @@ function GLRectangle() var w = world.getViewportWidth(), h = world.getViewportHeight(); - // set the fill + // render the fill ctx.beginPath(); if (this._fillColor) { var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; ctx.fillStyle = c; + + ctx.lineWidth = lw; + var inset = Math.ceil( lw ) + 0.5; + this.renderPath( inset, ctx ); + ctx.fill(); + ctx.closePath(); } - // set the stroke + // render the stroke + ctx.beginPath(); if (this._strokeColor) { var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; ctx.strokeStyle = c; - } - ctx.lineWidth = lw; - var inset = Math.ceil( 0.5*lw ) + 0.5; - this.renderPath( inset, ctx ); - if (this._fillColor) ctx.fill(); - if (this._strokeColor) ctx.stroke(); - ctx.closePath(); + ctx.lineWidth = lw; + var inset = Math.ceil( 0.5*lw ) + 0.5; + this.renderPath( inset, ctx ); + ctx.stroke(); + ctx.closePath(); + } } this.createStroke = function(ctr, width, height, strokeWidth, tlRad, blRad, brRad, trRad, material) diff --git a/js/helper-classes/RDGE/GLWorld.js b/js/helper-classes/RDGE/GLWorld.js index 0addcadc..646faa24 100755 --- a/js/helper-classes/RDGE/GLWorld.js +++ b/js/helper-classes/RDGE/GLWorld.js @@ -157,7 +157,7 @@ function GLWorld( canvas, use3D ) // change clear color //this.renderer.setClearFlags(g_Engine.getContext().DEPTH_BUFFER_BIT); - this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]); + this.renderer.setClearColor([0.0, 0.0, 0.0, 0.0]); //this.renderer.NinjaWorld = this; // create an empty scene graph -- cgit v1.2.3 From bfa895634324a78652f2a7eecf725d9c6030023f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 27 Feb 2012 11:58:44 -0800 Subject: Changed the hardcoded publish setting for a PI fix. --- js/helper-classes/RDGE/GLWorld.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLWorld.js b/js/helper-classes/RDGE/GLWorld.js index 646faa24..8017207f 100755 --- a/js/helper-classes/RDGE/GLWorld.js +++ b/js/helper-classes/RDGE/GLWorld.js @@ -824,7 +824,7 @@ GLWorld.prototype.export = function() // we need 2 export modes: One for save/restore, one for publish. // hardcoding for now - var exportForPublish = true; + var exportForPublish = false; exportStr += "publish: " + exportForPublish + "\n"; if (exportForPublish) -- cgit v1.2.3 From a8bd1585ae83d4d304b9f9f41823bb3dcbff9e01 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 27 Feb 2012 12:14:29 -0800 Subject: Color fix for line shapes. --- js/helper-classes/RDGE/GLLine.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'js/helper-classes/RDGE') diff --git a/js/helper-classes/RDGE/GLLine.js b/js/helper-classes/RDGE/GLLine.js index 5b966896..65e6ab1c 100755 --- a/js/helper-classes/RDGE/GLLine.js +++ b/js/helper-classes/RDGE/GLLine.js @@ -11,6 +11,10 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot /////////////////////////////////////////////////////////////////////// function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, strokeColor, strokeMaterial, strokeStyle, xAdj, yAdj) { + // initialize the inherited members + this.inheritedFrom = GLGeomObj; + this.inheritedFrom(); + /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// @@ -43,7 +47,7 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro this._slope = slope; this._strokeWidth = strokeSize; - if (strokeCOlor)this._strokeColor = strokeColor; + if (strokeColor) this._strokeColor = strokeColor.slice(); this._strokeStyle = strokeStyle; this._scaleX = (world.getViewportWidth())/(world.getViewportHeight()); @@ -57,10 +61,6 @@ function GLLine( world, xOffset, yOffset, width, height, slope, strokeSize, stro this._materialDiffuse = [0.4, 0.4, 0.4, 1.0]; this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; - // initialize the inherited members - this.inheritedFrom = GLGeomObj; - this.inheritedFrom(); - if(strokeMaterial) { this._strokeMaterial = strokeMaterial; -- cgit v1.2.3