From 878743cbbb75f2fc84855ca27779597b67ab1a95 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Mon, 2 Apr 2012 15:25:00 -0700 Subject: render the pen path with local coordinates, but use stage world coordinates to position the canvas on which the path is rendered AND add data-montage- to the ids in the pen and brush reels AND fix a bug with pen stroke transparency not working --- js/tools/PenTool.js | 44 ++++++++++++++++++++++++++++---------------- 1 file changed, 28 insertions(+), 16 deletions(-) (limited to 'js/tools/PenTool.js') diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index 31dadb80..98423113 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -416,18 +416,30 @@ exports.PenTool = Montage.create(ShapeTool, { ShowSelectedSubpath:{ value: function() { if (this._selectedSubpath){ + this._selectedSubpath.setPlaneMatrix(this._penPlaneMat); + var planeMatInv = glmat4.inverse( this._penPlaneMat, [] ); + this._selectedSubpath.setPlaneMatrixInverse(planeMatInv); + this._selectedSubpath.createSamples(); //dirty bit is checked here - var bboxMin = this._selectedSubpath.getBBoxMin(); - var bboxMax = this._selectedSubpath.getBBoxMax(); + this._selectedSubpath.buildLocalCoord(); //local dirty bit is checked here + + //build the width and height of this canvas by looking at local coordinates (X and Y needed only) + var bboxMin = this._selectedSubpath.getLocalBBoxMin(); + var bboxMax = this._selectedSubpath.getLocalBBoxMax(); var bboxWidth = bboxMax[0] - bboxMin[0]; var bboxHeight = bboxMax[1] - bboxMin[1]; + + //build the 3D position of the plane center of this canvas by looking at midpoint of the bounding box in stage world coords + bboxMin = this._selectedSubpath.getBBoxMin(); + bboxMax = this._selectedSubpath.getBBoxMax(); var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; + this._selectedSubpath.setPlaneCenter(bboxMid); this._selectedSubpath.setCanvasX(bboxMid[0]); this._selectedSubpath.setCanvasY(bboxMid[1]); //call render shape with the bbox width and height - this.RenderShape(bboxWidth, bboxHeight, this._penPlaneMat, bboxMid, this._penCanvas); + this.RenderShape(bboxWidth, bboxHeight, bboxMid, this._penPlaneMat, this._penCanvas); } } }, @@ -592,7 +604,7 @@ exports.PenTool = Montage.create(ShapeTool, { }, RenderShape: { - value: function (w, h, planeMat, midPt, canvas) { + value: function (w, h, midPt, planeMat, canvas) { if ((Math.floor(w) === 0) || (Math.floor(h) === 0)) { return; } @@ -614,10 +626,6 @@ exports.PenTool = Montage.create(ShapeTool, { var subpath = this._selectedSubpath; //new GLSubpath(); subpath.setWorld(world); subpath.setCanvas(newCanvas); - subpath.setPlaneMatrix(planeMat); - var planeMatInv = glmat4.inverse( planeMat, [] ); - subpath.setPlaneMatrixInverse(planeMatInv); - subpath.setPlaneCenter(midPt); world.addObject(subpath); world.render(); @@ -662,11 +670,19 @@ exports.PenTool = Montage.create(ShapeTool, { 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", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); - ElementMediator.setProperty(canvasArray, "top", [parseInt(top) + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); + w= Math.round(w); + h = Math.round(h); ElementMediator.setProperty(canvasArray, "width", [w+"px"], "Changing", "penTool");//canvas.width = w; ElementMediator.setProperty(canvasArray, "height", [h+"px"], "Changing", "penTool");//canvas.height = h; - //update the viewport and projection to reflect the new canvas width and height + + //var bboxMid = this._selectedSubpath.getLocalBBoxMidInStageWorld(); + //left = Math.round(bboxMid[0] - 0.5 * w); + //top = Math.round(bboxMid[1] - 0.5 * h); + + ElementMediator.setProperty(canvasArray, "left", [left+"px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "left", parseInt(left) + "px"); + ElementMediator.setProperty(canvasArray, "top", [top + "px"],"Changing", "penTool");//DocumentControllerModule.DocumentController.SetElementStyle(canvas, "top", parseInt(top) + "px"); + + //update the viewport and projection to reflect the new canvas width and height (todo might be unnecessary since we don't use RDGE for now) world.setViewportFromCanvas(canvas); if (this._useWebGL){ var cam = world.renderer.cameraManager().getActiveCamera(); @@ -677,10 +693,6 @@ exports.PenTool = Montage.create(ShapeTool, { var subpath = this._selectedSubpath; subpath.setDrawingTool(this); - subpath.setPlaneMatrix(planeMat); - var planeMatInv = glmat4.inverse( planeMat, [] ); - subpath.setPlaneMatrixInverse(planeMatInv); - subpath.setPlaneCenter(midPt); subpath.setWorld(world); world.addIfNewObject(subpath); @@ -829,6 +841,7 @@ exports.PenTool = Montage.create(ShapeTool, { ctx.strokeStyle = "green"; //if (subpath.getStrokeColor()) // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); + ctx.beginPath(); var p0x = subpath.getAnchor(0).getPosX()+ horizontalOffset; var p0y = subpath.getAnchor(0).getPosY()+ verticalOffset; @@ -881,7 +894,6 @@ exports.PenTool = Montage.create(ShapeTool, { ctx.strokeStyle = "green"; var anchorDelta = 2; var selAnchorDelta = 4; - for (var i = 0; i < numAnchors; i++) { var px = subpath.getAnchor(i).getPosX(); var py = subpath.getAnchor(i).getPosY(); -- cgit v1.2.3