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') 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') 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') 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') 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 From d417b3315f1aa6dd52fea10cbf5f17a213ef8726 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 29 Feb 2012 06:50:51 -0800 Subject: SnapManager fixes for sag tags. Signed-off-by: Nivesh Rajbhandari --- js/helper-classes/3D/snap-manager.js | 6 ++++-- js/helper-classes/3D/view-utils.js | 3 ++- 2 files changed, 6 insertions(+), 3 deletions(-) (limited to 'js/helper-classes') diff --git a/js/helper-classes/3D/snap-manager.js b/js/helper-classes/3D/snap-manager.js index 94202dc5..372be345 100755 --- a/js/helper-classes/3D/snap-manager.js +++ b/js/helper-classes/3D/snap-manager.js @@ -597,7 +597,8 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { } // TODO - Don't traverse components' children - if(elt.elementModel && elt.elementModel.isComponent) +// if(elt.elementModel && elt.elementModel.isComponent) + if(elt.nodeName.toLowerCase() === "svg" || (elt.elementModel && (elt.elementModel.isComponent || (elt.elementModel.selection === "SVG")))) { return; } @@ -1007,7 +1008,8 @@ var SnapManager = exports.SnapManager = Montage.create(Component, { } // TODO - Don't traverse components' children - if(elt.elementModel && elt.elementModel.isComponent) +// if(elt.elementModel && elt.elementModel.isComponent) + if(elt.nodeName.toLowerCase() === "svg" || (elt.elementModel && (elt.elementModel.isComponent || (elt.elementModel.selection === "SVG")))) { return; } diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index bedda8bf..c1f59397 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -580,7 +580,8 @@ exports.ViewUtils = Montage.create(Component, { if (elt.style.height) h = MathUtils.styleToNumber(elt.style.height); } - if (elt instanceof SVGSVGElement) { +// if (elt instanceof SVGSVGElement) { + if(elt.nodeName.toLowerCase() === "svg") { if(w instanceof SVGAnimatedLength) w = w.animVal.value; if(h instanceof SVGAnimatedLength) -- cgit v1.2.3 From 0b7f2f54738d2c1ea480b9bac7d3a750b1ef4df6 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 1 Mar 2012 15:29:17 -0800 Subject: first attempt at rendering the brush stroke as a collection of polylines (number of polylines equals the stroke width) --- js/helper-classes/RDGE/GLBrushStroke.js | 47 +++++++++++++++++++++++++++++++-- 1 file changed, 45 insertions(+), 2 deletions(-) (limited to 'js/helper-classes') diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index 5d773c2d..f5b0bce1 100755 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js @@ -139,7 +139,8 @@ function GLBrushStroke() { var numPoints = this._Points.length; //**** add samples to the path if needed...linear interpolation for now - if (numPoints>1) { + //if (numPoints>1) { + if (0){ var threshold = this._WETNESS_FACTOR*this._strokeWidth; var prevPt = this._Points[0]; var prevIndex = 0; @@ -331,7 +332,7 @@ function GLBrushStroke() { } */ - + /* var R2 = this._strokeWidth; var R = R2*0.5; var hardness = 0; //for a pencil, this is always 1 //TODO get hardness parameter from user interface @@ -359,6 +360,48 @@ function GLBrushStroke() { //ctx.globalCompositeOperation = 'source-in'; //ctx.rect(x-R, y-R, R2, R2); } + */ + + //todo test how to render the path as a bunch of moveTo and lineTos (for calligraphic brush styles) + var numTraces = this._strokeWidth; + var halfNumTraces = numTraces/2; + var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush + var startPos = [-this._strokeWidth/2,0]; + for (var t=0;t1) { + var numInsertedPoints = 0; + var threshold = 5;//0.25*this._strokeWidth; //this determines whether a segment between two sample is too long + var prevPt = this._Points[0]; + for (var i=1;ithreshold){ + //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points) + var prev = (i===1) ? i-1 : i-2; + var next = (i===numPoints-1) ? i : i+1; + var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]]; + //insert points along the prev. to current point + var numNewPoints = Math.floor(distance/threshold); + for (var j=0;j this._MAX_ALLOWED_SAMPLES){ + console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); + break; + } + } + console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); + } // *** compute the bounding box ********* this._BBoxMin = [Infinity, Infinity, Infinity]; this._BBoxMax = [-Infinity, -Infinity, -Infinity]; @@ -362,7 +404,6 @@ function GLBrushStroke() { } */ - //todo test how to render the path as a bunch of moveTo and lineTos (for calligraphic brush styles) var numTraces = this._strokeWidth; var halfNumTraces = numTraces/2; var deltaDisplacement = [1,0];//[this._strokeWidth/numTraces, 0]; //a horizontal line brush @@ -371,17 +412,20 @@ function GLBrushStroke() { var disp = [startPos[0]+t*deltaDisplacement[0], startPos[1]+t*deltaDisplacement[1]]; //ctx.globalCompositeOperation = 'source-over'; var distFromMiddle = Math.abs(halfNumTraces-t); - var alphaVal = 1.0 - (distFromMiddle/halfNumTraces); + var alphaVal = 1.0 - (100-this._strokeHardness)*(distFromMiddle/halfNumTraces)/100; ctx.save(); ctx.lineWidth=this._strokeWidth/10;//4; if (ctx.lineWidth<2) ctx.lineWidth=2; + if (t===numTraces-1){ + ctx.lineWidth = 1; + } ctx.lineJoin="bevel"; ctx.lineCap="butt"; if (t