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.js150
1 files changed, 69 insertions, 81 deletions
diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js
index 8535a683..2899e476 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,8 +178,8 @@ 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 = Number( this.getPropertyFromString( "strokeColor: ", 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 ) + "]" );
@@ -312,72 +313,71 @@ function GLRectangle()
312 var width = Math.round(this.getWidth()), 313 var width = Math.round(this.getWidth()),
313 height = Math.round(this.getHeight()); 314 height = Math.round(this.getHeight());
314 315
315 // get the top left point
316 pt = [inset, inset]; // top left corner 316 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 317
345 // get the bottom right arc 318 var tlRad = this._tlRadius; //top-left radius
346 if (MathUtils.fpSign(rad) > 0) 319 var trRad = this._trRadius;
347 { 320 var blRad = this._blRadius;
348 ctr = [width - this.getBRRadius(), height - this.getBRRadius()]; 321 var brRad = this._brRadius;
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
353 // get the right of the rectangle
354 pt = [width - inset, inset];
355 rad = this.getTRRadius() - inset;
356 if (rad < 0) rad = 0;
357 pt[1] += rad;
358 ctx.lineTo( pt[0], pt[1] );
359 322
360 // do the top right corner 323 if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0))
361 if (MathUtils.fpSign(rad) > 0)
362 { 324 {
363 ctr = [width - this.getTRRadius(), this.getTRRadius()]; 325 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 } 326 }
367 327 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 { 328 {
378 ctr = [this.getTLRadius(), this.getTLRadius()]; 329 // get the top left point
379 //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); 330 rad = tlRad - inset;
380 ctx.arc( ctr[0], ctr[1], rad, -0.5*Math.PI, Math.PI, true ); 331 if (rad < 0) rad = 0;
332 pt[1] += rad;
333 if (MathUtils.fpSign(rad) == 0) pt[1] = inset;
334 ctx.moveTo( pt[0], pt[1] );
335
336 // get the bottom left point
337 pt = [inset, height - inset];
338 rad = blRad - inset;
339 if (rad < 0) rad = 0;
340 pt[1] -= rad;
341 ctx.lineTo( pt[0], pt[1] );
342
343 // get the bottom left curve
344 if (MathUtils.fpSign(rad) > 0)
345 ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset );
346
347 // do the bottom of the rectangle
348 pt = [width - inset, height - inset];
349 rad = brRad - inset;
350 if (rad < 0) rad = 0;
351 pt[0] -= rad;
352 ctx.lineTo( pt[0], pt[1] );
353
354 // get the bottom right arc
355 if (MathUtils.fpSign(rad) > 0)
356 ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad );
357
358 // get the right of the rectangle
359 pt = [width - inset, inset];
360 rad = trRad - inset;
361 if (rad < 0) rad = 0;
362 pt[1] += rad;
363 ctx.lineTo( pt[0], pt[1] );
364
365 // do the top right corner
366 if (MathUtils.fpSign(rad) > 0)
367 ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset );
368
369 // do the top of the rectangle
370 pt = [inset, inset]
371 rad = tlRad - inset;
372 if (rad < 0) rad = 0;
373 pt[0] += rad;
374 ctx.lineTo( pt[0], pt[1] );
375
376 // do the top left corner
377 if (MathUtils.fpSign(rad) > 0)
378 ctx.quadraticCurveTo( inset, inset, inset, inset+rad );
379 else
380 ctx.lineTo( inset, 2*inset );
381 } 381 }
382 } 382 }
383 383
@@ -396,32 +396,20 @@ function GLRectangle()
396 var w = world.getViewportWidth(), 396 var w = world.getViewportWidth(),
397 h = world.getViewportHeight(); 397 h = world.getViewportHeight();
398 398
399 // draw the fill 399 // set the fill
400 ctx.beginPath(); 400 ctx.beginPath();
401 ctx.fillStyle = "#990000"; 401 ctx.fillStyle = "#990000";
402 //ctx.strokeStyle = "#0000ff";
403 if (this._fillColor) 402 if (this._fillColor)
404 ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); 403 ctx.fillStyle = MathUtils.colorToHex( this._fillColor );
405 404
406 //ctx.lineWidth = 0; 405 // set the stroke
407 //ctx.rect( lw, lw, w - 2*lw, h- 2*lw );
408 //this.renderPath( lw, ctx )
409 //ctx.fill();
410 //ctx.closePath();
411
412 // draw the stroke
413 //ctx.beginPath();
414 //ctx.fillStyle = "#990000";
415 ctx.strokeStyle = "#0000ff"; 406 ctx.strokeStyle = "#0000ff";
416 if (this._strokeColor) 407 if (this._strokeColor)
417 ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); 408 ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
418 409
419 ctx.lineWidth = lw; 410 ctx.lineWidth = lw;
420 //ctx.rect( 0.5*lw, 0.5*lw, w-lw, h-lw );
421 var inset = Math.ceil( 0.5*lw ) + 0.5; 411 var inset = Math.ceil( 0.5*lw ) + 0.5;
422// console.log( "linewidth: " + lw + ", inset: " + inset+ ", width: " + Math.round(this.getWidth()) + ", height: " + Math.round(this.getHeight()) );
423 this.renderPath( inset, ctx ); 412 this.renderPath( inset, ctx );
424 //this.renderPath( lw, ctx );
425 ctx.fill(); 413 ctx.fill();
426 ctx.stroke(); 414 ctx.stroke();
427 ctx.closePath(); 415 ctx.closePath();
@@ -1193,4 +1181,4 @@ ShapePrimitive.create = function(coords, normals, uvs, indices, primType, ver
1193 renderer.createPrimitive(prim, vertexCount); 1181 renderer.createPrimitive(prim, vertexCount);
1194 1182
1195 return prim; 1183 return prim;