diff options
author | Eric Guzman | 2012-06-11 13:28:42 -0700 |
---|---|---|
committer | Eric Guzman | 2012-06-11 13:28:42 -0700 |
commit | 3a4727ffc350216a434a7c6977b6a23653b77780 (patch) | |
tree | c5dff306f8803c36a16163ba5df1e7f492e762b5 /js/lib/geom/sub-path.js | |
parent | d6b46ba496c9c8974ae39bb476aea35bcd1ddaf1 (diff) | |
parent | 337efc667372326ae2f9984d89a47bb151016774 (diff) | |
download | ninja-3a4727ffc350216a434a7c6977b6a23653b77780.tar.gz |
Merge branch 'binding' of github.com:dhg637/ninja-internal into binding
Diffstat (limited to 'js/lib/geom/sub-path.js')
-rwxr-xr-x | js/lib/geom/sub-path.js | 331 |
1 files changed, 183 insertions, 148 deletions
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 4c5fe1eb..f765b715 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js | |||
@@ -68,175 +68,210 @@ 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) | 73 | GLSubpath.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 | 74 | ||
94 | var numAnchors = this.getNumAnchors(); | 75 | //buildBuffers |
95 | if (numAnchors === 0) { | 76 | GLSubpath.prototype.buildBuffers = function () { |
96 | return; //nothing to do for empty paths | 77 | //no need to do anything for now (no WebGL) |
97 | } | 78 | }; |
98 | this.createSamples(false); //dirty bit checked in this function...will generate a polyline representation | ||
99 | 79 | ||
100 | var numPoints = this._Samples.length; | 80 | //buildColor returns the fillStyle or strokeStyle for the Canvas 2D context |
101 | if (numPoints === 0){ | 81 | GLSubpath.prototype.buildColor = function(ctx, //the 2D rendering context (for creating gradients if necessary) |
102 | return; //nothing to do for empty paths | 82 | ipColor, //color string, also encodes whether there's a gradient and of what type |
103 | } | 83 | w, //width of the region of color |
104 | 84 | h, //height of the region of color | |
105 | //figure the size of the area we will draw into | 85 | lw) //linewidth (i.e. stroke width/size) |
106 | var bboxWidth=0, bboxHeight=0; | 86 | { |
107 | bboxWidth = this._BBoxMax[0] - this._BBoxMin[0]; | 87 | if (ipColor.gradientMode){ |
108 | bboxHeight = this._BBoxMax[1] - this._BBoxMin[1]; | 88 | var position, gradient, cs, inset; //vars used in gradient calculations |
109 | 89 | inset = Math.ceil( lw ) - 0.5; | |
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 | 90 | ||
121 | ctx.fillStyle = "white"; | 91 | if(ipColor.gradientMode === "radial") { |
122 | if (this._fillColor){ | 92 | var ww = w - 2*lw, hh = h - 2*lw; |
123 | //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); | 93 | gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); |
124 | var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; | 94 | } else { |
125 | ctx.fillStyle = fillColorStr; | 95 | gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); |
126 | } | ||
127 | var lineCap = ['butt','round','square']; | ||
128 | ctx.lineCap = lineCap[1]; | ||
129 | var lineJoin = ['round','bevel','miter']; | ||
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 | 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 | } | 96 | } |
142 | if (this._isClosed === true) { | 97 | var colors = ipColor.color; |
143 | var currAnchor = this.getAnchor(0); | 98 | |
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]); | 99 | var len = colors.length; |
145 | prevAnchor = currAnchor; | 100 | for(n=0; n<len; n++) { |
146 | ctx.fill(); | 101 | position = colors[n].position/100; |
102 | cs = colors[n].value; | ||
103 | gradient.addColorStop(position, "rgba(" + cs.r + "," + cs.g + "," + cs.b + "," + cs.a + ")"); | ||
147 | } | 104 | } |
148 | */ | 105 | return gradient; |
106 | } else { | ||
107 | var c = "rgba(" + 255*ipColor[0] + "," + 255*ipColor[1] + "," + 255*ipColor[2] + "," + ipColor[3] + ")"; | ||
108 | return c; | ||
109 | } | ||
110 | }; | ||
111 | //render | ||
112 | // specify how to render the subpath in Canvas2D | ||
113 | GLSubpath.prototype.render = function () { | ||
114 | // get the world | ||
115 | var world = this.getWorld(); | ||
116 | if (!world) throw( "null world in subpath render" ); | ||
117 | if (!this._canvas){ | ||
118 | //set the canvas by querying the world | ||
119 | this._canvas = this.getWorld().getCanvas(); | ||
120 | } | ||
121 | // get the context | ||
122 | var ctx = world.get2DContext(); | ||
123 | if (!ctx) throw ("null context in subpath render"); | ||
149 | 124 | ||
125 | var numAnchors = this.getNumAnchors(); | ||
126 | if (numAnchors === 0) { | ||
127 | return; //nothing to do for empty paths | ||
128 | } | ||
129 | this.createSamples(false); //dirty bit checked in this function...will generate a polyline representation | ||
150 | 130 | ||
151 | ctx.beginPath(); | 131 | var numPoints = this._Samples.length; |
152 | ctx.moveTo(this._Samples[0][0],this._Samples[0][1]); | 132 | if (numPoints === 0){ |
153 | for (var i=0;i<numPoints;i++){ | 133 | return; //nothing to do for empty paths |
154 | ctx.lineTo(this._Samples[i][0],this._Samples[i][1]); | 134 | } |
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 | 135 | ||
173 | //scale the contents of this subpath to lie within this width | 136 | //figure the size of the area we will draw into |
174 | //determine the scale factor by comparing with the old width | 137 | var bboxWidth=0, bboxHeight=0; |
175 | var oldWidth = this._BBoxMax[0]-this._BBoxMin[0]; | 138 | bboxWidth = this._BBoxMax[0] - this._BBoxMin[0]; |
176 | if (oldWidth<1) { | 139 | bboxHeight = this._BBoxMax[1] - this._BBoxMin[1]; |
177 | oldWidth=1; | ||
178 | } | ||
179 | 140 | ||
180 | var scaleX = newW/oldWidth; | 141 | ctx.save(); |
181 | if (scaleX===1) { | 142 | ctx.clearRect(0, 0, bboxWidth, bboxHeight); |
182 | return; //no need to do anything | ||
183 | } | ||
184 | 143 | ||
185 | //scale the anchor point positions such that the width of the bbox is the newW | 144 | ctx.lineWidth = this._strokeWidth; |
186 | var origX = this._BBoxMin[0]; | 145 | ctx.strokeStyle = "black"; |
187 | var numAnchors = this._Anchors.length; | ||
188 | for (var i=0;i<numAnchors;i++){ | ||
189 | //compute the distance from the bboxMin | ||
190 | var oldW = this._Anchors[i].getPosX() - origX; | ||
191 | var prevW = this._Anchors[i].getPrevX() - origX; | ||
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 | 146 | ||
201 | this.setHeight = function (newH) { | 147 | //vars used for the gradient computation in buildColor |
202 | if (newH<1) { | 148 | var w = world.getViewportWidth(), h = world.getViewportHeight(); |
203 | newH=1; //clamp minimum width to 1 | ||
204 | } | ||
205 | //scale the contents of this subpath to lie within this height | ||
206 | //determine the scale factor by comparing with the old height | ||
207 | var oldHeight = this._BBoxMax[1]-this._BBoxMin[1]; | ||
208 | if (oldHeight<1){ | ||
209 | oldHeight=1; | ||
210 | } | ||
211 | 149 | ||
212 | var scaleY = newH/oldHeight; | 150 | if (this._strokeColor) { |
213 | if (scaleY===1){ | 151 | ctx.strokeStyle = this.buildColor(ctx, this._strokeColor, w,h, this._strokeWidth); |
214 | return; //no need to do anything | 152 | } |
215 | } | ||
216 | 153 | ||
217 | //scale the anchor point positions such that the height of the bbox is the newH | 154 | ctx.fillStyle = "white"; |
218 | var origY = this._BBoxMin[1]; | 155 | if (this._fillColor){ |
219 | var numAnchors = this._Anchors.length; | 156 | ctx.fillStyle = this.buildColor(ctx, this._fillColor, w, h, this._strokeWidth); |
220 | for (var i=0;i<numAnchors;i++){ | 157 | } |
221 | //compute the distance from the bboxMin | 158 | var lineCap = ['butt','round','square']; |
222 | var oldW = this._Anchors[i].getPosY() - origY; | 159 | ctx.lineCap = lineCap[1]; |
223 | var prevW = this._Anchors[i].getPrevY() - origY; | 160 | var lineJoin = ['round','bevel','miter']; |
224 | var nextW = this._Anchors[i].getNextY() - origY; | 161 | ctx.lineJoin = lineJoin[0]; |
225 | 162 | ||
226 | this._Anchors[i].setPos(this._Anchors[i].getPosX(), origY + oldW*scaleY,this._Anchors[i].getPosZ()); | 163 | |
227 | this._Anchors[i].setPrevPos(this._Anchors[i].getPrevX(), origY + prevW*scaleY,this._Anchors[i].getPrevZ()); | 164 | //commenting this out for now because of Chrome bug where coincident endpoints of bezier curve cause the curve to not be rendered |
228 | this._Anchors[i].setNextPos(this._Anchors[i].getNextX(), origY + nextW*scaleY,this._Anchors[i].getNextZ()); | 165 | /* |
229 | } | 166 | ctx.beginPath(); |