diff options
-rw-r--r-- | js/helper-classes/RDGE/GLRectangle.js | 135 |
1 files changed, 61 insertions, 74 deletions
diff --git a/js/helper-classes/RDGE/GLRectangle.js b/js/helper-classes/RDGE/GLRectangle.js index e34532d2..d24ade2b 100644 --- a/js/helper-classes/RDGE/GLRectangle.js +++ b/js/helper-classes/RDGE/GLRectangle.js | |||
@@ -317,72 +317,71 @@ function GLRectangle() | |||
317 | var width = Math.round(this.getWidth()), | 317 | var width = Math.round(this.getWidth()), |
318 | height = Math.round(this.getHeight()); | 318 | height = Math.round(this.getHeight()); |
319 | 319 | ||
320 | // get the top left point | ||
321 | pt = [inset, inset]; // top left corner | 320 | pt = [inset, inset]; // top left corner |
322 | rad = this.getTLRadius() - inset; | ||
323 | if (rad < 0) rad = 0; | ||
324 | pt[1] += rad; | ||
325 | if (MathUtils.fpSign(rad) == 0) pt[1] = 0; | ||
326 | ctx.moveTo( pt[0], pt[1] ); | ||
327 | |||
328 | // get the bottom left point | ||
329 | pt = [inset, height - inset]; | ||
330 | rad = this.getBLRadius() - inset; | ||
331 | if (rad < 0) rad = 0; | ||
332 | pt[1] -= rad; | ||
333 | ctx.lineTo( pt[0], pt[1] ); | ||
334 | |||
335 | // get the bottom left arc | ||
336 | if (MathUtils.fpSign(rad) > 0) | ||
337 | { | ||
338 | ctr = [ this.getBLRadius(), height - this.getBLRadius() ]; | ||
339 | //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); | ||
340 | ctx.arc( ctr[0], ctr[1], rad, Math.PI, 0.5*Math.PI, true ); | ||
341 | } | ||
342 | |||
343 | // do the bottom of the rectangle | ||
344 | pt = [width - inset, height - inset]; | ||
345 | rad = this.getBRRadius() - inset; | ||
346 | if (rad < 0) rad = 0; | ||
347 | pt[0] -= rad; | ||
348 | ctx.lineTo( pt[0], pt[1] ); | ||
349 | |||
350 | // get the bottom right arc | ||
351 | if (MathUtils.fpSign(rad) > 0) | ||
352 | { | ||
353 | ctr = [width - this.getBRRadius(), height - this.getBRRadius()]; | ||
354 | //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); | ||
355 | ctx.arc( ctr[0], ctr[1], rad, 0.5*Math.PI, 0.0, true ); | ||
356 | } | ||
357 | 321 | ||
358 | // get the right of the rectangle | 322 | var tlRad = this._tlRadius; //top-left radius |
359 | pt = [width - inset, inset]; | 323 | var trRad = this._trRadius; |
360 | rad = this.getTRRadius() - inset; | 324 | var blRad = this._blRadius; |
361 | if (rad < 0) rad = 0; | 325 | var brRad = this._brRadius; |
362 | pt[1] += rad; | ||
363 | ctx.lineTo( pt[0], pt[1] ); | ||
364 | 326 | ||
365 | // do the top right corner | 327 | if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) |
366 | if (MathUtils.fpSign(rad) > 0) | ||
367 | { | 328 | { |
368 | ctr = [width - this.getTRRadius(), this.getTRRadius()]; | 329 | ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); |
369 | //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); | ||
370 | ctx.arc( ctr[0], ctr[1], rad, 0.0, -0.5*Math.PI, true ); | ||
371 | } | 330 | } |
372 | 331 | else | |
373 | // do the top of the rectangle | ||
374 | pt = [inset, inset] | ||
375 | rad = this.getTLRadius() - 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 | { | 332 | { |
383 | ctr = [this.getTLRadius(), this.getTLRadius()]; | 333 | // get the top left point |
384 | //this.renderQuadraticBezier( MathUtils.circularArcToBezier( ctr, pt, -0.5*Math.PI ), ctx ); | 334 | rad = tlRad - inset; |
385 | 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 ); | ||
386 | } | 385 | } |
387 | } | 386 | } |
388 | 387 | ||
@@ -401,32 +400,20 @@ function GLRectangle() | |||
401 | var w = world.getViewportWidth(), | 400 | var w = world.getViewportWidth(), |
402 | h = world.getViewportHeight(); | 401 | h = world.getViewportHeight(); |
403 | 402 | ||
404 | // draw the fill | 403 | // set the fill |
405 | ctx.beginPath(); | 404 | ctx.beginPath(); |
406 | ctx.fillStyle = "#990000"; | 405 | ctx.fillStyle = "#990000"; |
407 | //ctx.strokeStyle = "#0000ff"; | ||
408 | if (this._fillColor) | 406 | if (this._fillColor) |
409 | ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); | 407 | ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); |
410 | 408 | ||
411 | //ctx.lineWidth = 0; | 409 | // set the stroke |
412 | //ctx.rect( lw, lw, w - 2*lw, h- 2*lw ); | ||
413 | //this.renderPath( lw, ctx ) | ||
414 | //ctx.fill(); | ||
415 | //ctx.closePath(); | ||
416 | |||
417 | // draw the stroke | ||
418 | //ctx.beginPath(); | ||
419 | //ctx.fillStyle = "#990000"; | ||
420 | ctx.strokeStyle = "#0000ff"; | 410 | ctx.strokeStyle = "#0000ff"; |
421 | if (this._strokeColor) | 411 | if (this._strokeColor) |
422 | ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); | 412 | ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor ); |
423 | 413 | ||
424 | ctx.lineWidth = lw; | 414 | ctx.lineWidth = lw; |
425 | //ctx.rect( 0.5*lw, 0.5*lw, w-lw, h-lw ); | ||
426 | var inset = Math.ceil( 0.5*lw ) + 0.5; | 415 | var inset = Math.ceil( 0.5*lw ) + 0.5; |
427 | // console.log( "linewidth: " + lw + ", inset: " + inset+ ", width: " + Math.round(this.getWidth()) + ", height: " + Math.round(this.getHeight()) ); | ||
428 | this.renderPath( inset, ctx ); | 416 | this.renderPath( inset, ctx ); |
429 | //this.renderPath( lw, ctx ); | ||
430 | ctx.fill(); | 417 | ctx.fill(); |
431 | ctx.stroke(); | 418 | ctx.stroke(); |
432 | ctx.closePath(); | 419 | ctx.closePath(); |