diff options
Diffstat (limited to 'js/helper-classes/RDGE/GLRectangle.js')
-rw-r--r-- | js/helper-classes/RDGE/GLRectangle.js | 150 |
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 | ||