aboutsummaryrefslogtreecommitdiff
path: root/js/helper-classes/RDGE/GLRectangle.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/helper-classes/RDGE/GLRectangle.js')
-rw-r--r--js/helper-classes/RDGE/GLRectangle.js312
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 40