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 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 | } |