From e1a65d0c2a13e12ee53be98c731616e35aa07a41 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 28 Feb 2012 13:58:34 -0800 Subject: new anchor control guide rendering (smaller handles) and clamp min. width and height to 1 while resizing subpaths --- js/helper-classes/RDGE/GLSubpath.js | 6 ++- js/tools/PenTool.js | 83 +++++++++++++++++++++++++++---------- 2 files changed, 65 insertions(+), 24 deletions(-) (limited to 'js') diff --git a/js/helper-classes/RDGE/GLSubpath.js b/js/helper-classes/RDGE/GLSubpath.js index 7beb11b9..f3d8ad36 100755 --- a/js/helper-classes/RDGE/GLSubpath.js +++ b/js/helper-classes/RDGE/GLSubpath.js @@ -181,8 +181,8 @@ function GLSubpath() { this.setWidth = function (newW) { - //todo this doesn't work in cases where the newW is zero or if the previous width was 0/1 (i.e. the path had become degenerate in width) - //todo same as above for the setHeight function below + if (newW<1) + newW=1; //clamp minimum width to 1 //scale the contents of this subpath to lie within this width //determine the scale factor by comparing with the old width var oldWidth = this._BBoxMax[0]-this._BBoxMin[0]; @@ -210,6 +210,8 @@ function GLSubpath() { this.makeDirty(); } this.setHeight = function (newH) { + if (newH<1) + newH=1; //clamp minimum width to 1 //scale the contents of this subpath to lie within this height //determine the scale factor by comparing with the old height var oldHeight = this._BBoxMax[1]-this._BBoxMin[1]; diff --git a/js/tools/PenTool.js b/js/tools/PenTool.js index bb9c71e7..ddc8bc04 100755 --- a/js/tools/PenTool.js +++ b/js/tools/PenTool.js @@ -66,14 +66,14 @@ exports.PenTool = Montage.create(ShapeTool, { _penPlaneMat: { value: null, writable: true }, //index of the anchor point that the user has hovered over - _hoveredAnchorIndex: {value: null, writable: true}, + _hoveredAnchorIndex: {value: -1, writable: true}, //constants used for picking points --- NOTE: these should be user-settable parameters _PICK_POINT_RADIUS: { value: 10, writable: false }, _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, _DISPLAY_SELECTED_ANCHOR_RADIUS: { value: 10, writable: false }, - _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 5, writable: false }, - _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 5, writable: false }, + _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 2, writable: false }, + _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 2, writable: false }, //constants used for editing modes (can be OR-ed) EDIT_NONE: { value: 0, writable: false }, @@ -760,9 +760,7 @@ exports.PenTool = Montage.create(ShapeTool, { var verticalOffset = this.application.ninja.stage.userContentTop; //display the subpath as a sequence of cubic beziers ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) - if (ctx.lineWidth == subpath.getStrokeWidth()) - ctx.lineWidth = 3; - ctx.strokeStyle = "black"; + ctx.strokeStyle = "green"; //if (subpath.getStrokeColor()) // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); ctx.beginPath(); @@ -812,34 +810,53 @@ exports.PenTool = Montage.create(ShapeTool, { var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; //display circles and squares near all control points - ctx.fillStyle = "#FF4444"; - ctx.lineWidth = 2; - ctx.strokeStyle = "black"; + ctx.fillStyle = "#FFFFFF"; + ctx.lineWidth = 1; + 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(); ctx.beginPath(); - ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); + //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); + ctx.moveTo(px-anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset); + ctx.lineTo(px+anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset); + ctx.lineTo(px+anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset); + ctx.lineTo(px-anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset); + ctx.closePath(); ctx.fill(); ctx.stroke(); } //display the hovered over anchor point ctx.lineWidth = 2; - ctx.strokeStyle = "black"; - if (this._hoveredAnchorIndex && this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex=0 && this._hoveredAnchorIndex