diff options
author | Pushkar Joshi | 2012-02-28 13:58:34 -0800 |
---|---|---|
committer | Pushkar Joshi | 2012-02-28 13:58:34 -0800 |
commit | e1a65d0c2a13e12ee53be98c731616e35aa07a41 (patch) | |
tree | 23d53b935d6e20e1bf822aa7e30686b39d45052a /js/tools | |
parent | 7cbd26d475eaad817042692f9116f9a24ae60997 (diff) | |
download | ninja-e1a65d0c2a13e12ee53be98c731616e35aa07a41.tar.gz |
new anchor control guide rendering (smaller handles)
and
clamp min. width and height to 1 while resizing subpaths
Diffstat (limited to 'js/tools')
-rwxr-xr-x | js/tools/PenTool.js | 83 |
1 files changed, 61 insertions, 22 deletions
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, { | |||
66 | _penPlaneMat: { value: null, writable: true }, | 66 | _penPlaneMat: { value: null, writable: true }, |
67 | 67 | ||
68 | //index of the anchor point that the user has hovered over | 68 | //index of the anchor point that the user has hovered over |
69 | _hoveredAnchorIndex: {value: null, writable: true}, | 69 | _hoveredAnchorIndex: {value: -1, writable: true}, |
70 | 70 | ||
71 | //constants used for picking points --- NOTE: these should be user-settable parameters | 71 | //constants used for picking points --- NOTE: these should be user-settable parameters |
72 | _PICK_POINT_RADIUS: { value: 10, writable: false }, | 72 | _PICK_POINT_RADIUS: { value: 10, writable: false }, |
73 | _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, | 73 | _DISPLAY_ANCHOR_RADIUS: { value: 5, writable: false }, |
74 | _DISPLAY_SELECTED_ANCHOR_RADIUS: { value: 10, writable: false }, | 74 | _DISPLAY_SELECTED_ANCHOR_RADIUS: { value: 10, writable: false }, |
75 | _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 5, writable: false }, | 75 | _DISPLAY_SELECTED_ANCHOR_PREV_RADIUS: { value: 2, writable: false }, |
76 | _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 5, writable: false }, | 76 | _DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS: { value: 2, writable: false }, |
77 | 77 | ||
78 | //constants used for editing modes (can be OR-ed) | 78 | //constants used for editing modes (can be OR-ed) |
79 | EDIT_NONE: { value: 0, writable: false }, | 79 | EDIT_NONE: { value: 0, writable: false }, |
@@ -760,9 +760,7 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
760 | var verticalOffset = this.application.ninja.stage.userContentTop; | 760 | var verticalOffset = this.application.ninja.stage.userContentTop; |
761 | //display the subpath as a sequence of cubic beziers | 761 | //display the subpath as a sequence of cubic beziers |
762 | ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) | 762 | ctx.lineWidth = 1;//TODO replace hardcoded stroke width with some programmatically set value (should not be same as stroke width) |
763 | if (ctx.lineWidth == subpath.getStrokeWidth()) | 763 | ctx.strokeStyle = "green"; |
764 | ctx.lineWidth = 3; | ||
765 | ctx.strokeStyle = "black"; | ||
766 | //if (subpath.getStrokeColor()) | 764 | //if (subpath.getStrokeColor()) |
767 | // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); | 765 | // ctx.strokeStyle = MathUtils.colorToHex( subpath.getStrokeColor() ); |
768 | ctx.beginPath(); | 766 | ctx.beginPath(); |
@@ -812,34 +810,53 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
812 | var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; | 810 | var verticalOffset = this.application.ninja.stage.userContentTop;//stageManagerModule.stageManager.userContentTop; |
813 | 811 | ||
814 | //display circles and squares near all control points | 812 | //display circles and squares near all control points |
815 | ctx.fillStyle = "#FF4444"; | 813 | ctx.fillStyle = "#FFFFFF"; |
816 | ctx.lineWidth = 2; | 814 | ctx.lineWidth = 1; |
817 | ctx.strokeStyle = "black"; | 815 | ctx.strokeStyle = "green"; |
816 | var anchorDelta = 2; | ||
817 | var selAnchorDelta = 4; | ||
818 | |||
818 | for (var i = 0; i < numAnchors; i++) { | 819 | for (var i = 0; i < numAnchors; i++) { |
819 | var px = subpath.getAnchor(i).getPosX(); | 820 | var px = subpath.getAnchor(i).getPosX(); |
820 | var py = subpath.getAnchor(i).getPosY(); | 821 | var py = subpath.getAnchor(i).getPosY(); |
821 | ctx.beginPath(); | 822 | ctx.beginPath(); |
822 | ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); | 823 | //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS, 0, 2 * Math.PI, false); |
824 | ctx.moveTo(px-anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset); | ||
825 | ctx.lineTo(px+anchorDelta+horizontalOffset, py-anchorDelta+verticalOffset); | ||
826 | ctx.lineTo(px+anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset); | ||
827 | ctx.lineTo(px-anchorDelta+horizontalOffset, py+anchorDelta+verticalOffset); | ||
828 | ctx.closePath(); | ||
823 | ctx.fill(); | 829 | ctx.fill(); |
824 | ctx.stroke(); | 830 | ctx.stroke(); |
825 | } | 831 | } |
826 | 832 | ||
827 | //display the hovered over anchor point | 833 | //display the hovered over anchor point |
828 | ctx.lineWidth = 2; | 834 | ctx.lineWidth = 2; |
829 | ctx.strokeStyle = "black"; | 835 | if (this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) { |
830 | if (this._hoveredAnchorIndex && this._hoveredAnchorIndex>=0 && this._hoveredAnchorIndex<numAnchors) { | ||
831 | var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX(); | 836 | var px = subpath.getAnchor(this._hoveredAnchorIndex).getPosX(); |
832 | var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY(); | 837 | var py = subpath.getAnchor(this._hoveredAnchorIndex).getPosY(); |
833 | ctx.beginPath(); | 838 | ctx.beginPath(); |
834 | ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false); | 839 | //ctx.arc(px + horizontalOffset, py + verticalOffset, this._DISPLAY_ANCHOR_RADIUS*1.5, 0, 2 * Math.PI, false); |
840 | ctx.moveTo(px-selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); | ||
841 | ctx.lineTo(px+selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); | ||
842 | ctx.lineTo(px+selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); | ||
843 | ctx.lineTo(px-selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); | ||
844 | ctx.closePath(); | ||
835 | ctx.stroke(); | 845 | ctx.stroke(); |
836 | } | 846 | } |
837 | 847 | ||
848 | |||
838 | //display selected anchor and its prev. and next points | 849 | //display selected anchor and its prev. and next points |
839 | if (this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1) { | 850 | if (this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1) { |
840 | ctx.lineWidth = 2; | 851 | ctx.lineWidth = 1; |
841 | ctx.strokeStyle = "black"; | 852 | var defFill = "#FFFFFF"; |
853 | var defStroke = "green"; | ||
854 | var selHandleFill = "#000000" | ||
855 | |||
856 | ctx.strokeStyle = defStroke; | ||
857 | ctx.fillStyle = defFill; | ||
842 | var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); | 858 | var selAnchor = this._selectedSubpath.getAnchor(this._selectedSubpath.getSelectedAnchorIndex()); |
859 | var whichPoint = this._selectedSubpath.getSelectedMode(); //which of the selected handles to highlight | ||
843 | 860 | ||
844 | //line from prev to anchor | 861 | //line from prev to anchor |
845 | ctx.beginPath(); | 862 | ctx.beginPath(); |
@@ -848,10 +865,16 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
848 | ctx.stroke(); | 865 | ctx.stroke(); |
849 | 866 | ||
850 | //selected anchor prev | 867 | //selected anchor prev |
851 | ctx.fillStyle = "#AAAAAA"; | ||
852 | ctx.beginPath(); | 868 | ctx.beginPath(); |
853 | ctx.arc(selAnchor.getPrevX() + horizontalOffset, selAnchor.getPrevY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_PREV_RADIUS, 0, 2 * Math.PI, false); | 869 | ctx.arc(selAnchor.getPrevX() + horizontalOffset, selAnchor.getPrevY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_PREV_RADIUS, 0, 2 * Math.PI, false); |
854 | ctx.fill(); | 870 | ctx.closePath(); |
871 | if (whichPoint & this._selectedSubpath.SEL_PREV){ | ||
872 | ctx.fillStyle = selHandleFill; | ||
873 | ctx.fill(); | ||
874 | ctx.fillStyle = defFill; | ||
875 | }else { | ||
876 | ctx.fill(); | ||
877 | } | ||
855 | ctx.stroke(); | 878 | ctx.stroke(); |
856 | 879 | ||
857 | //line from next to anchor | 880 | //line from next to anchor |
@@ -861,16 +884,27 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
861 | ctx.stroke(); | 884 | ctx.stroke(); |
862 | 885 | ||
863 | //selected anchor next | 886 | //selected anchor next |
864 | ctx.fillStyle = "#666666"; | ||
865 | ctx.beginPath(); | 887 | ctx.beginPath(); |
866 | ctx.arc(selAnchor.getNextX() + horizontalOffset, selAnchor.getNextY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS, 0, 2 * Math.PI, false); | 888 | ctx.arc(selAnchor.getNextX() + horizontalOffset, selAnchor.getNextY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_NEXT_RADIUS, 0, 2 * Math.PI, false); |
867 | ctx.fill(); | 889 | if (whichPoint & this._selectedSubpath.SEL_NEXT){ |
890 | ctx.fillStyle = selHandleFill; | ||
891 | ctx.fill(); | ||
892 | ctx.fillStyle = defFill; | ||
893 | }else { | ||
894 | ctx.fill(); | ||
895 | } | ||
868 | ctx.stroke(); | 896 | ctx.stroke(); |
869 | 897 | ||
870 | //selected anchor point | 898 | //selected anchor point |
871 | ctx.fillStyle = "#8ED6FF"; | 899 | var px = selAnchor.getPosX(); |
900 | var py = selAnchor.getPosY(); | ||
872 | ctx.beginPath(); | 901 | ctx.beginPath(); |
873 | ctx.arc(selAnchor.getPosX() + horizontalOffset, selAnchor.getPosY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_RADIUS, 0, 2 * Math.PI, false); | 902 | //ctx.arc(selAnchor.getPosX() + horizontalOffset, selAnchor.getPosY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_RADIUS, 0, 2 * Math.PI, false); |
903 | ctx.moveTo(px-selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); | ||
904 | ctx.lineTo(px+selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); | ||
905 | ctx.lineTo(px+selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); | ||
906 | ctx.lineTo(px-selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); | ||
907 | ctx.closePath(); | ||
874 | ctx.fill(); | 908 | ctx.fill(); |
875 | ctx.stroke(); | 909 | ctx.stroke(); |
876 | 910 | ||
@@ -879,7 +913,12 @@ exports.PenTool = Montage.create(ShapeTool, { | |||
879 | ctx.lineWidth = 2; | 913 | ctx.lineWidth = 2; |
880 | ctx.strokeStyle = "red"; | 914 | ctx.strokeStyle = "red"; |
881 | ctx.beginPath(); | 915 | ctx.beginPath(); |
882 | ctx.arc(this._snapTarget.getPosX() + horizontalOffset, this._snapTarget.getPosY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_RADIUS * 2, 0, 2 * Math.PI, false); | 916 | //ctx.arc(this._snapTarget.getPosX() + horizontalOffset, this._snapTarget.getPosY() + verticalOffset, this._DISPLAY_SELECTED_ANCHOR_RADIUS * 2, 0, 2 * Math.PI, false); |
917 | ctx.moveTo(px-selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); | ||
918 | ctx.lineTo(px+selAnchorDelta+horizontalOffset, py-selAnchorDelta+verticalOffset); | ||
919 | ctx.lineTo(px+selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); | ||
920 | ctx.lineTo(px-selAnchorDelta+horizontalOffset, py+selAnchorDelta+verticalOffset); | ||
921 | ctx.closePath(); | ||
883 | ctx.stroke(); | 922 | ctx.stroke(); |
884 | } | 923 | } |
885 | } //if this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1 | 924 | } //if this._selectedSubpath && subpath === this._selectedSubpath && this._selectedSubpath.getSelectedAnchorIndex()!== -1 |