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