aboutsummaryrefslogtreecommitdiff
path: root/js/lib/geom/sub-path.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib/geom/sub-path.js')
-rwxr-xr-xjs/lib/geom/sub-path.js308
1 files changed, 156 insertions, 152 deletions
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 4c5fe1eb..db115655 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -68,175 +68,179 @@ var GLSubpath = function GLSubpath() {
68 this._selectedAnchorIndex = -1; 68 this._selectedAnchorIndex = -1;
69 69
70 this._SAMPLING_EPSILON = 0.5; //epsilon used for sampling the curve 70 this._SAMPLING_EPSILON = 0.5; //epsilon used for sampling the curve
71}; //function GLSubpath ...class definition
71 72
72 // (current GeomObj complains if buildBuffers/render is added to GLSubpath prototype) 73GLSubpath.prototype = Object.create(GeomObj, {});
73 //buildBuffers
74 // Build the stroke vertices, normals, textures and colors
75 // Add that array data to the GPU using OpenGL data binding
76 this.buildBuffers = function () {
77 // return; //no need to do anything for now
78 };
79
80 //render
81 // specify how to render the subpath in Canvas2D
82 this.render = function () {
83 // get the world
84 var world = this.getWorld();
85 if (!world) throw( "null world in subpath render" );
86 if (!this._canvas){
87 //set the canvas by querying the world
88 this._canvas = this.getWorld().getCanvas();
89 }
90 // get the context
91 var ctx = world.get2DContext();
92 if (!ctx) throw ("null context in subpath render");
93
94 var numAnchors = this.getNumAnchors();
95 if (numAnchors === 0) {
96 return; //nothing to do for empty paths
97 }
98 this.createSamples(false); //dirty bit checked in this function...will generate a polyline representation
99 74
100 var numPoints = this._Samples.length; 75//buildBuffers
101 if (numPoints === 0){ 76GLSubpath.prototype.buildBuffers = function () {
102 return; //nothing to do for empty paths 77 //no need to do anything for now (no WebGL)
103 } 78};
104
105 //figure the size of the area we will draw into
106 var bboxWidth=0, bboxHeight=0;
107 bboxWidth = this._BBoxMax[0] - this._BBoxMin[0];
108 bboxHeight = this._BBoxMax[1] - this._BBoxMin[1];
109
110 ctx.save();
111 ctx.clearRect(0, 0, bboxWidth, bboxHeight);
112
113 ctx.lineWidth = this._strokeWidth;
114 ctx.strokeStyle = "black";
115 if (this._strokeColor) {
116 //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
117 var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")";
118 ctx.strokeStyle = strokeColorStr;
119 }
120 79
121 ctx.fillStyle = "white"; 80//render
122 if (this._fillColor){ 81// specify how to render the subpath in Canvas2D
123 //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); 82GLSubpath.prototype.render = function () {
124 var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; 83 // get the world
125 ctx.fillStyle = fillColorStr; 84 var world = this.getWorld();
126 } 85 if (!world) throw( "null world in subpath render" );
127 var lineCap = ['butt','round','square']; 86 if (!this._canvas){
128 ctx.lineCap = lineCap[1]; 87 //set the canvas by querying the world
129 var lineJoin = ['round','bevel','miter']; 88 this._canvas = this.getWorld().getCanvas();
130 ctx.lineJoin = lineJoin[0]; 89 }
131 90 // get the context
132 /* 91 var ctx = world.get2DContext();
133 commenting this out for now because of Chrome bug where coincident endpoints of bezier curve cause the curve to not be rendered 92 if (!ctx) throw ("null context in subpath render");
134 ctx.beginPath();
135 var prevAnchor = this.getAnchor(0);
136 ctx.moveTo(prevAnchor.getPosX()-bboxMin[0],prevAnchor.getPosY()-bboxMin[1]);
137 for (var i = 1; i < numAnchors; i++) {
138 var currAnchor = this.getAnchor(i);
139 ctx.bezierCurveTo(prevAnchor.getNextX()-bboxMin[0],prevAnchor.getNextY()-bboxMin[1], currAnchor.getPrevX()-bboxMin[0], currAnchor.getPrevY()-bboxMin[1], currAnchor.getPosX()-bboxMin[0], currAnchor.getPosY()-bboxMin[1]);
140 prevAnchor = currAnchor;
141 }
142 if (this._isClosed === true) {
143 var currAnchor = this.getAnchor(0);
144 ctx.bezierCurveTo(prevAnchor.getNextX()-bboxMin[0],prevAnchor.getNextY()-bboxMin[1], currAnchor.getPrevX()-bboxMin[0], currAnchor.getPrevY()-bboxMin[1], currAnchor.getPosX()-bboxMin[0], currAnchor.getPosY()-bboxMin[1]);
145 prevAnchor = currAnchor;
146 ctx.fill();
147 }
148 */
149 93
94 var numAnchors = this.getNumAnchors();
95 if (numAnchors === 0) {
96 return; //nothing to do for empty paths
97 }
98 this.createSamples(false); //dirty bit checked in this function...will generate a polyline representation
150 99
151 ctx.beginPath(); 100 var numPoints = this._Samples.length;
152 ctx.moveTo(this._Samples[0][0],this._Samples[0][1]); 101 if (numPoints === 0){
153 for (var i=0;i<numPoints;i++){ 102 return; //nothing to do for empty paths
154 ctx.lineTo(this._Samples[i][0],this._Samples[i][1]); 103 }
155 }
156 if (this._isClosed === true) {
157 ctx.lineTo(this._Samples[0][0],this._Samples[0][1]);
158 }
159 ctx.fill();
160 ctx.stroke();
161 ctx.restore();
162 }; //render()
163
164 this.geomType = function () {
165 return this.GEOM_TYPE_CUBIC_BEZIER;
166 };
167
168 this.setWidth = function (newW) {
169 if (newW<1) {
170 newW=1; //clamp minimum width to 1
171 }
172 104
173 //scale the contents of this subpath to lie within this width 105 //figure the size of the area we will draw into
174 //determine the scale factor by comparing with the old width 106 var bboxWidth=0, bboxHeight=0;
175 var oldWidth = this._BBoxMax[0]-this._BBoxMin[0]; 107 bboxWidth = this._BBoxMax[0] - this._BBoxMin[0];
176 if (oldWidth<1) { 108 bboxHeight = this._BBoxMax[1] - this._BBoxMin[1];
177 oldWidth=1;
178 }
179 109
180 var scaleX = newW/oldWidth; 110 ctx.save();
181 if (scaleX===1) { 111 ctx.clearRect(0, 0, bboxWidth, bboxHeight);
182 return; //no need to do anything
183 }
184 112
185 //scale the anchor point positions such that the width of the bbox is the newW 113 ctx.lineWidth = this._strokeWidth;
186 var origX = this._BBoxMin[0]; 114 ctx.strokeStyle = "black";
187 var numAnchors = this._Anchors.length; 115 if (this._strokeColor) {
188 for (var i=0;i<numAnchors;i++){ 116 //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
189 //compute the distance from the bboxMin 117 var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")";
190 var oldW = this._Anchors[i].getPosX() - origX; 118 ctx.strokeStyle = strokeColorStr;
191 var prevW = this._Anchors[i].getPrevX() - origX; 119 }
192 var nextW = this._Anchors[i].getNextX() - origX;
193
194 this._Anchors[i].setPos(origX + oldW*scaleX,this._Anchors[i].getPosY(),this._Anchors[i].getPosZ());
195 this._Anchors[i].setPrevPos(origX + prevW*scaleX,this._Anchors[i].getPrevY(),this._Anchors[i].getPrevZ());
196 this._Anchors[i].setNextPos(origX + nextW*scaleX,this._Anchors[i].getNextY(),this._Anchors[i].getNextZ());
197 }
198 this.makeDirty();
199 };
200 120
201 this.setHeight = function (newH) { 121 ctx.fillStyle = "white";
202 if (newH<1) { 122 if (this._fillColor){
203 newH=1; //clamp minimum width to 1 123 //ctx.fillStyle = MathUtils.colorToHex( this._fillColor );
204 } 124 var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")";
205 //scale the contents of this subpath to lie within this height 125 ctx.fillStyle = fillColorStr;
206 //determine the scale factor by comparing with the old height 126 }
207 var oldHeight = this._BBoxMax[1]-this._BBoxMin[1]; 127 var lineCap = ['butt','round','square'];
208 if (oldHeight<1){ 128 ctx.lineCap = lineCap[1];
209 oldHeight=1; 129 var lineJoin = ['round','bevel','miter'];
210 } 130 ctx.lineJoin = lineJoin[0];
131
132
133 //commenting this out for now because of Chrome bug where coincident endpoints of bezier curve cause the curve to not be rendered
134 /*
135 ctx.beginPath();
136 var prevAnchor = this.getAnchor(0);
137 ctx.moveTo(prevAnchor.getPosX(),prevAnchor.getPosY());
138 for (var i = 1; i < numAnchors; i++) {
139 var currAnchor = this.getAnchor(i);
140 ctx.bezierCurveTo(prevAnchor.getNextX(),prevAnchor.getNextY(), currAnchor.getPrevX(), currAnchor.getPrevY(), currAnchor.getPosX(), currAnchor.getPosY());
141 prevAnchor = currAnchor;
142 }
143 if (this._isClosed === true) {
144 var currAnchor = this.getAnchor(0);
145 ctx.bezierCurveTo(prevAnchor.getNextX(),prevAnchor.getNextY(), currAnchor.getPrevX(), currAnchor.getPrevY(), currAnchor.getPosX(), currAnchor.getPosY());
146 prevAnchor = currAnchor;
147 }
148 ctx.fill();
149 ctx.stroke();
150 */
211 151
212 var scaleY = newH/oldHeight;
213 if (scaleY===1){
214 return; //no need to do anything
215 }
216 152
217 //scale the anchor point positions such that the height of the bbox is the newH 153 ctx.beginPath();
218 var origY = this._BBoxMin[1]; 154 ctx.moveTo(this._Samples[0][0],this._Samples[0][1]);
219 var numAnchors = this._Anchors.length; 155 for (var i=0;i<numPoints;i++){
220 for (var i=0;i<numAnchors;i++){ 156 ctx.lineTo(this._Samples[i][0],this._Samples[i][1]);
221 //compute the distance from the bboxMin
222 var oldW = this._Anchors[i].getPosY() - origY;
223 var prevW = this._Anchors[i].getPrevY() - origY;
224 var nextW = this._Anchors[i].getNextY() - origY;
225
226 this._Anchors[i].setPos(this._Anchors[i].getPosX(), origY + oldW*scaleY,this._Anchors[i].getPosZ());
227 this._Anchors[i].setPrevPos(this._Anchors[i].getPrevX(), origY + prevW*scaleY,this._Anchors[i].getPrevZ());
228 this._Anchors[i].setNextPos(this._Anchors[i].getNextX(), origY + nextW*scaleY,this._Anchors[i].getNextZ());
229 }
230 this.makeDirty();
231 } 157 }
158 if (this._isClosed === true) {
159 ctx.lineTo(this._Samples[0][0],this._Samples[0][1]);
160 }
161 ctx.fill();
162 ctx.stroke();
232 163
233}; //function GLSubpath ...class definition 164 ctx.restore();
234 165}; //render()
235GLSubpath.prototype = Object.create(GeomObj, {});