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