diff options
Diffstat (limited to 'js/helper-classes/RDGE/GLRectangle.js')
-rw-r--r-- | js/helper-classes/RDGE/GLRectangle.js | 312 |
1 files changed, 223 insertions, 89 deletions
diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index 8535a683..4216fe53 100644 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js | |||
@@ -72,13 +72,14 @@ function GLRectangle() | |||
72 | this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; | 72 | this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; |
73 | 73 | ||
74 | if(strokeMaterial) | 74 | if(strokeMaterial) |
75 | { | ||
76 | this._strokeMaterial = strokeMaterial; | 75 | this._strokeMaterial = strokeMaterial; |
77 | } | 76 | else |
77 | this._strokeMaterial = new FlatMaterial(); | ||
78 | |||
78 | if(fillMaterial) | 79 | if(fillMaterial) |
79 | { | ||
80 | this._fillMaterial = fillMaterial; | 80 | this._fillMaterial = fillMaterial; |
81 | } | 81 | else |
82 | this._fillMaterial = new FlatMaterial(); | ||
82 | } | 83 | } |
83 | 84 | ||
84 | /////////////////////////////////////////////////////////////////////// | 85 | /////////////////////////////////////////////////////////////////////// |
@@ -177,9 +178,9 @@ function GLRectangle() | |||
177 | this._strokeWidth = Number( this.getPropertyFromString( "strokeWidth: ", importStr ) ); | 178 | this._strokeWidth = Number( this.getPropertyFromString( "strokeWidth: ", importStr ) ); |
178 | this._innerRadius = Number( this.getPropertyFromString( "innerRadius: ", importStr ) ); | 179 | this._innerRadius = Number( this.getPropertyFromString( "innerRadius: ", importStr ) ); |
179 | this._strokeStyle = Number( this.getPropertyFromString( "strokeStyle: ", importStr ) ); | 180 | this._strokeStyle = Number( this.getPropertyFromString( "strokeStyle: ", importStr ) ); |
180 | var strokeMaterialName = Number( this.getPropertyFromString( "strokeMat: ", importStr ) ); | 181 | var strokeMaterialName = this.getPropertyFromString( "strokeMat: ", importStr ); |
181 | var fillMaterialName = Number( this.getPropertyFromString( "fillMat: ", importStr ) ); | 182 | var fillMaterialName = this.getPropertyFromString( "fillMat: ", importStr ); |
182 | this._strokeStyle = Number( this.getPropertyFromString( "strokeColor: ", importStr ) ); | 183 | this._strokeStyle = this.getPropertyFromString( "strokeStyle: ", importStr ); |
183 | this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); | 184 | this._fillColor = eval( "[" + this.getPropertyFromString( "fillColor: ", importStr ) + "]" ); |
184 | this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); | 185 | this._strokeColor = eval( "[" + this.getPropertyFromString( "strokeColor: ", importStr ) + "]" ); |
185 | this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) ); | 186 | this._tlRadius = Number( this.getPropertyFromString( "tlRadius: ", importStr ) ); |
@@ -209,8 +210,11 @@ function GLRectangle() | |||
209 | // get the world | 210 | // get the world |
210 | var world = this.getWorld(); | 211 | var world = this.getWorld(); |
211 | if (!world) throw( "null world in buildBuffers" ); | 212 | if (!world) throw( "null world in buildBuffers" ); |
212 | 213 | //console.log( "GLRectangle.buildBuffers " + world._worldCount ); | |
213 | if (!world._useWebGL) return; | 214 | if (!world._useWebGL) return; |
215 | |||
216 | // make sure RDGE has the correct context | ||
217 | g_Engine.setContext( world.getCanvas().uuid ); | ||
214 | 218 | ||
215 | // create the gl buffer | 219 | // create the gl buffer |
216 | var gl = world.getGLContext(); | 220 | var gl = world.getGLContext(); |
@@ -283,6 +287,7 @@ function GLRectangle() | |||
283 | xFill -= strokeSize; | 287 | xFill -= strokeSize; |
284 | yFill -= strokeSize; | 288 | yFill -= strokeSize; |
285 | var fillMaterial = this.makeFillMaterial(); | 289 | var fillMaterial = this.makeFillMaterial(); |
290 | //console.log( "fillMaterial: " + fillMaterial.getName() ); | ||
286 | var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); | 291 | var fillPrim = this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); |
287 | this._primArray.push( fillPrim ); | 292 | this._primArray.push( fillPrim ); |
288 | this._materialNodeArray.push( fillMaterial.getMaterialNode() ); | 293 | this._materialNodeArray.push( fillMaterial.getMaterialNode() ); |
@@ -312,72 +317,71 @@ function GLRectangle() | |||
312 | var width = Math.round(this.getWidth()), | 317 | var width = Math.round(this.getWidth()), |
313 | height = Math.round(this.getHeight()); | 318 | height = Math.round(this.getHeight()); |
314 | 319 | ||
315 | // get the top left point | ||
316 | pt = [inset, inset]; // top left corner | 320 | pt = [inset, inset]; // top left corner |
317 | rad = this.getTLRadius() - inset; | ||
318 | if (rad < 0) rad = 0; | ||
319 | pt[1] += rad; | ||
320 | if (MathUtils.fpSign(rad) == 0) pt[1] = 0; | ||
321 | ctx.moveTo( pt[0], pt[1] ); | ||
322 | |||
323 | // get the bottom left point | ||
324 | pt = [inset, height - inset]; | ||
325 | rad = this.getBLRadius() - inset; | ||
326 | if (rad < 0) rad = 0; | ||
327 | pt[1] -= rad; | ||
328 | ctx.lineTo( pt[0], pt[1] ); | ||
329 | |||
330 | // get the bottom left arc | ||
331 | if (MathUtils.fpSign(rad) > 0) | ||
332 | { | ||
333 | ctr = [ this.getBLRadius(), height - this.getBLRadius() ]; | ||
334 | //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); | ||
335 | ctx.arc( ctr[0], ctr[1], rad, Math.PI, 0.5*Math.PI, true ); | ||
336 | } | ||
337 | |||
338 | // do the bottom of the rectangle | ||
339 | pt = [width - inset, height - inset]; | ||
340 | rad = this.getBRRadius() - inset; | ||
341 | if (rad < 0) rad = 0; | ||
342 | pt[0] -= rad; | ||
343 | ctx.lineTo( pt[0], pt[1] ); | ||
344 | |||
345 | // get the bottom right arc | ||
346 | if (MathUtils.fpSign(rad) > 0) | ||
347 | { | ||
348 | ctr = [width - this.getBRRadius(), height - this.getBRRadius()]; | ||
349 | //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); | ||
350 | ctx.arc( ctr[0], ctr[1], rad, 0.5*Math.PI, 0.0, true ); | ||
351 | } | ||
352 | 321 | ||
353 | // get the right of the rectangle | 322 | var tlRad = this._tlRadius; //top-left radius |
354 | pt = [width - inset, inset]; | 323 | var trRad = this._trRadius; |
355 | rad = this.getTRRadius() - inset; | 324 | var blRad = this._blRadius; |
356 | if (rad < 0) rad = 0; | 325 | var brRad = this._brRadius; |
357 | pt[1] += rad; | ||
358 | ctx.lineTo( pt[0], pt[1] ); | ||
359 | 326 | ||
360 | // do the top right corner | 327 | if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) |
361 | if (MathUtils.fpSign(rad) > 0) | ||
362 | { | 328 | { |
363 | ctr = [width - this.getTRRadius(), this.getTRRadius()]; | 329 | ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); |
364 | //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); | ||
365 | ctx.arc( ctr[0], ctr[1], rad, 0.0, -0.5*Math.PI, true ); | ||
366 | } | 330 | } |
367 | 331 | else | |
368 | // do the top of the rectangle | ||
369 | pt = [inset, inset] | ||
370 | rad = this.getTLRadius() - inset; | ||
371 | if (rad < 0) rad = 0; | ||
372 | pt[0] += rad; | ||
373 | ctx.lineTo( pt[0], pt[1] ); | ||
374 | |||
375 | // do the top left corner | ||
376 | if (MathUtils.fpSign(rad) > 0) | ||
377 | { | 332 | { |
378 | ctr = [this.getTLRadius(), this.getTLRadius()]; | 333 | // get the top left point |
379 | //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); | 334 | rad = tlRad - inset; |
380 | ctx.arc( ctr[0], ctr[1], rad, -0.5*Math.PI, Math.PI, true ); | 335 | if (rad < 0) rad = 0; |
336 | pt[1] += rad; | ||
337 | if (MathUtils.fpSign(rad) == 0) pt[1] = inset; | ||
338 | ctx.moveTo( pt[0], pt[1] ); | ||
339 | |||
340 | // get the bottom left point | ||
341 | pt = [inset, height - inset]; | ||
342 | rad = blRad - inset; | ||
343 | if (rad < 0) rad = 0; | ||
344 | pt[1] -= rad; | ||
345 | ctx.lineTo( pt[0], pt[1] ); | ||
346 | |||
347 | // get the bottom left curve | ||
348 | if (MathUtils.fpSign(rad) > 0) | ||
349 | ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset ); | ||
350 | |||
351 | // do the bottom of the rectangle | ||
352 | pt = [width - inset, height - inset]; | ||
353 | rad = brRad - inset; | ||
354 | if (rad < 0) rad = 0; | ||
355 | pt[0] -= rad; | ||
356 | ctx.lineTo( pt[0], pt[1] ); | ||
357 | |||
358 | // get the bottom right arc | ||
359 | if (MathUtils.fpSign(rad) > 0) | ||
360 | ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad ); | ||
361 | |||
362 | // get the right of the rectangle | ||
363 | pt = [width - inset, inset]; | ||
364 | rad = trRad - inset; | ||
365 | if (rad < 0) rad = 0; | ||
366 | pt[1] += rad; | ||
367 | ctx.lineTo( pt[0], pt[1] ); | ||
368 | |||
369 | // do the top right corner | ||
370 | if (MathUtils.fpSign(rad) > 0) | ||
371 | ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); | ||
372 | |||
373 | // do the top of the rectangle | ||
374 | pt = [inset, inset] | ||
375 | rad = tlRad - inset; | ||
376 | if (rad < 0) rad = 0; | ||
377 | pt[0] += rad; | ||
378 | ctx.lineTo( pt[0], pt[1] ); | ||
379 | |||
380 | // do the top left corner | ||
381 | if (MathUtils.fpSign(rad) > 0) | ||
382 | ctx.quadraticCurveTo( inset, inset, inset, inset+rad ); | ||
383 | else | ||
384 | ctx.lineTo( inset, 2*inset ); | ||
381 | } | 385 | } |
382 | } | 386 | } |
383 | 387 | ||
@@ -396,32 +400,20 @@ function GLRectangle() | |||
396 | var w = world.getViewportWidth(), | 400 | var w = world.getViewportWidth(), |
397 | h = world.getViewportHeight(); | 401 | h = world.getViewportHeight(); |
398 | 402 | ||
399 | // draw the fill | 403 | // set the fill |
400 | ctx.beginPath(); | 404 | ctx.beginPath(); |
401 | ctx.fillStyle = "#990000"; | 405 | ctx.fillStyle = "#990000"; |
402 | //ctx.strokeStyle = "#0000ff"; | ||
403 | if (this._fillColor) | 406 | if (this._fillColor) |
404 | ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); | 407 | ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); |
405 | 408 | ||