From abeb9f1e23679200bb2f4a3ccbcebfb37645975c Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Thu, 9 Feb 2012 10:45:50 -0800 Subject: first phase of simple resampling to prevent tiny segments --- js/helper-classes/RDGE/GLBrushStroke.js | 54 +++++++++- js/tools/BrushTool.js | 170 ++++++++++++++++---------------- 2 files changed, 138 insertions(+), 86 deletions(-) diff --git a/js/helper-classes/RDGE/GLBrushStroke.js b/js/helper-classes/RDGE/GLBrushStroke.js index fdf1595c..59017a0c 100644 --- a/js/helper-classes/RDGE/GLBrushStroke.js +++ b/js/helper-classes/RDGE/GLBrushStroke.js @@ -67,7 +67,23 @@ function GLBrushStroke() { this.getNumPoints = function () { return this._Points.length; } this.getPoint = function (index) { return this._Points[index]; } - this.addPoint = function (anchorPt) { this._Points.push(anchorPt); this._dirty=true; } + this.addPoint = function (pt) + { + //add the point if it is some epsilon away from the previous point + var doAddPoint=true; + var numPoints = this._Points.length; + if (numPoints>0) { + var prevPt = this._Points[numPoints-1]; + var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; + var diffPtMag = diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]; + if (diffPtMag<4) + doAddPoint=false; + } + if (doAddPoint) { + this._Points.push(pt); + this._dirty=true; + } + } this.insertPoint = function(pt, index){ this._Points.splice(index, 0, pt); this._dirty=true;} this.isDirty = function(){return this._dirty;} this.makeDirty = function(){this._dirty=true;} @@ -167,7 +183,9 @@ function GLBrushStroke() { var bboxWidth = bboxMax[0] - bboxMin[0]; var bboxHeight = bboxMax[1] - bboxMin[1]; ctx.clearRect(0, 0, bboxWidth, bboxHeight); -/* + + + /* ctx.lineWidth = this._strokeWidth; ctx.strokeStyle = "black"; if (this._strokeColor) @@ -185,7 +203,35 @@ function GLBrushStroke() { ctx.lineTo(pt[0]-bboxMin[0], pt[1]-bboxMin[1]); } ctx.stroke(); - */ + */ + + var firstPt = this._Points[0]; + var prevX = firstPt[0]-bboxMin[0]; + var prevY = firstPt[1]-bboxMin[1]; + for (var i = 1; i < numPoints; i++) { + var pt = this._Points[i]; + ctx.globalCompositeOperation = 'source-over'; + var x = pt[0]-bboxMin[0]; + var y = pt[1]-bboxMin[1]; + var r = ctx.createLinearGradient(prevX, prevY, x, y); + r.addColorStop(1, 'rgba(0,0,0,0.01)'); + r.addColorStop(0.5,'rgba(255,0,0,1.0)'); + r.addColorStop(0, 'rgba(0,0,0,0.01)'); + + ctx.fillStyle = r; + //ctx.fillStyle = "rgba(0,128,0,0.15)"; + var w2 = this._strokeWidth*0.5; + ctx.moveTo(prevX-w2, prevY); + ctx.lineTo(prevX+w2, prevY); + ctx.lineTo(x+w2, y); + ctx.lineTo(x-w2, y); + ctx.fill(); + + prevX = x; + prevY = y; + } + + /* var R2 = this._strokeWidth; var R = R2*0.5; var hardness = 0.25; //for a pencil, this is always 1 //TODO get hardness parameter from user interface @@ -209,6 +255,8 @@ function GLBrushStroke() { //ctx.globalCompositeOperation = 'source-in'; //ctx.rect(x-R, y-R, R2, R2); } + */ + ctx.restore(); } //render() diff --git a/js/tools/BrushTool.js b/js/tools/BrushTool.js index ce8ffbb9..97df84a0 100644 --- a/js/tools/BrushTool.js +++ b/js/tools/BrushTool.js @@ -65,12 +65,30 @@ exports.BrushTool = Montage.create(ShapeTool, { if (this._selectedBrushStroke === null){ this._selectedBrushStroke = new GLBrushStroke(); } - console.log("BrushTool Start"); NJevent("enableStageMove");//stageManagerModule.stageManager.enableMouseMove(); } //value: function (event) { }, //HandleLeftButtonDown + _getUnsnappedPosition: { + value: function(x,y){ + var elemSnap = snapManager.elementSnapEnabled(); + var gridSnap = snapManager.gridSnapEnabled(); + var alignSnap = snapManager.snapAlignEnabled(); + snapManager.enableElementSnap(false); + snapManager.enableGridSnap(false); + snapManager.enableSnapAlign(false); + + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(x,y)); + var unsnappedpos = DrawingToolBase.getHitRecPos(snapManager.snap(point.x, point.y, false)); + + snapManager.enableElementSnap(elemSnap); + snapManager.enableGridSnap(gridSnap); + snapManager.enableSnapAlign(alignSnap); + + return unsnappedpos; + } + }, //need to override this function because the ShapeTool's definition contains a clearDrawingCanvas call - Pushkar // might not need to override once we draw using OpenGL instead of SVG // Also took out all the snapping code for now...need to add that back @@ -84,20 +102,10 @@ exports.BrushTool = Montage.create(ShapeTool, { } if (this._isDrawing) { - snapManager.enableElementSnap(false); - snapManager.enableGridSnap(false); - snapManager.enableSnapAlign(false); - //this.doDraw(event); - //var currMousePos = this.getMouseUpPos(); - //instead of doDraw call own DrawingTool - var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); - var hitRecSnapPoint = DrawingToolBase.getUpdatedSnapPointNoAppLevelEnabling(point.x, point.y, true, this.mouseDownHitRec); - var currMousePos = DrawingToolBase.getHitRecPos(hitRecSnapPoint); - + var currMousePos = this._getUnsnappedPosition(event.pageX, event.pageY); if (this._selectedBrushStroke){ this._selectedBrushStroke.addPoint(currMousePos); } - this.ShowCurrentBrushStrokeOnStage(); } //if (this._isDrawing) { @@ -123,7 +131,6 @@ exports.BrushTool = Montage.create(ShapeTool, { this._isDrawing = false; this._hasDraw = false; - console.log("BrushTool Stop"); //TODO get these values from the options if (this._selectedBrushStroke){ @@ -192,92 +199,89 @@ exports.BrushTool = Montage.create(ShapeTool, { RenderShape: { - value: function (w, h, planeMat, midPt, canvas) { - if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { - return; - } + value: function (w, h, planeMat, midPt, canvas) { + if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { + return; + } - var left = Math.round(midPt[0] - 0.5 * w); - var top = Math.round(midPt[1] - 0.5 * h); + var left = Math.round(midPt[0] - 0.5 * w); + var top = Math.round(midPt[1] - 0.5 * h); - if (!canvas) { - var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", null, true); - var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); - ElementMediator.addElement(newCanvas, elementModel.data, true); + if (!canvas) { + var newCanvas = NJUtils.makeNJElement("canvas", "Brushstroke", "shape", null, true); + var elementModel = TagTool.makeElement(w, h, planeMat, midPt, newCanvas); + ElementMediator.addElement(newCanvas, elementModel.data, true); - // create all the GL stuff - var world = this.getGLWorld(newCanvas, this._useWebGL); - //store a reference to this newly created canvas - this._brushStrokeCanvas = newCanvas; + // create all the GL stuff + var world = this.getGLWorld(newCanvas, this._useWebGL); + //store a reference to this newly created canvas + this._brushStrokeCanvas = newCanvas; - var brushStroke = this._selectedBrushStroke; - if (brushStroke){ - brushStroke.setWorld(world); + var brushStroke = this._selectedBrushStroke; + if (brushStroke){ + brushStroke.setWorld(world); - brushStroke.setPlaneMatrix(planeMat); - var planeMatInv = glmat4.inverse( planeMat, [] ); - brushStroke.setPlaneMatrixInverse(planeMatInv); - brushStroke.setPlaneCenter(midPt); + brushStroke.setPlaneMatrix(planeMat); + var planeMatInv = glmat4.inverse( planeMat, [] ); + brushStroke.setPlaneMatrixInverse(planeMatInv); + brushStroke.setPlaneCenter(midPt); - world.addObject(brushStroke); - world.render(); - //TODO this will not work if there are multiple shapes in the same canvas - newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; - } - } //if (!canvas) { - else { - - var world = null; - if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { - world = canvas.elementModel.shapeModel.GLWorld; - } else { - world = this.getGLWorld(canvas, this._useWebGL);//this.options.use3D);//this.CreateGLWorld(planeMat, midPt, canvas, this._useWebGL);//fillMaterial, strokeMaterial); - } + world.addObject(brushStroke); + world.render(); + //TODO this will not work if there are multiple shapes in the same canvas + newCanvas.elementModel.shapeModel.GLGeomObj = brushStroke; + } + } //if (!canvas) { + else { + var world = null; + if (canvas.elementModel.shapeModel && canvas.elementModel.shapeModel.GLWorld) { + world = canvas.elementModel.shapeModel.GLWorld; + } else { + world = this.getGLWorld(canvas, this._useWebGL); + } - if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ - //update the left and top of the canvas element - var canvasArray=[canvas]; - ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "brushTool"); - ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "brushTool"); - canvas.width = w; - canvas.height = h; - //update the viewport and projection to reflect the new canvas width and height - world.setViewportFromCanvas(canvas); - if (this._useWebGL){ - var cam = world.renderer.cameraManager().getActiveCamera(); - cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); + + if (this._entryEditMode !== this.ENTRY_SELECT_CANVAS){ + //update the left and top of the canvas element + var canvasArray=[canvas]; + ElementMediator.setProperty(canvasArray, "left", [parseInt(left)+"px"],"Changing", "brushTool"); + ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "brushTool"); + canvas.width = w; + canvas.height = h; + //update the viewport and projection to reflect the new canvas width and height + world.setViewportFromCanvas(canvas); + if (this._useWebGL){ + var cam = world.renderer.cameraManager().getActiveCamera(); + cam.setPerspective(world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar()); + } } - } - var brushStroke = this._selectedBrushStroke; + var brushStroke = this._selectedBrushStroke; - if (brushStroke){ - brushStroke.setDrawingTool(this); + if (brushStroke){ + brushStroke.setDrawingTool(this); - brushStroke.setPlaneMatrix(planeMat); - var planeMatInv = glmat4.inverse( planeMat, [] ); - brushStroke.setPlaneMatrixInverse(planeMatInv); - brushStroke.setPlaneCenter(midPt); + brushStroke.setPlaneMatrix(planeMat); + var planeMatInv = glmat4.inverse( planeMat, [] ); + brushStroke.setPlaneMatrixInverse(planeMatInv); + brushStroke.setPlaneCenter(midPt); - brushStroke.setWorld(world); - world.addIfNewObject(brushStroke); - //world.addObject(subpath); - world.render(); - //TODO this will not work if there are multiple shapes in the same canvas - canvas.elementModel.shapeModel.GLGeomObj = brushStroke; - } - } //else of if (!canvas) { - } //value: function (w, h, planeMat, midPt, canvas) { - }, //RenderShape: { + brushStroke.setWorld(world); + world.addIfNewObject(brushStroke); + //world.addObject(subpath); + world.render(); + //TODO this will not work if there are multiple shapes in the same canvas + canvas.elementModel.shapeModel.GLGeomObj = brushStroke; + } + } //else of if (!canvas) { + } //value: function (w, h, planeMat, midPt, canvas) { + }, //RenderShape: { + Configure: { value: function (wasSelected) { if (wasSelected) { - console.log("Picked BrushTool"); - //todo these calls have no effect because the drawing-tool-base (in getInitialSnapPoint) overrides them with what's set at the application level - snapManager.enableElementSnap(false); - snapManager.enableGridSnap(false); - snapManager.enableSnapAlign(false); + console.log("Entered BrushTool"); } else { console.log("Left BrushTool"); -- cgit v1.2.3