phetsims / kite

A library for creating, manipulating and displaying 2D shapes in JavaScript.
MIT License
12 stars 6 forks source link

Failure during getStrokedShape() with lineJoin 'round' #73

Closed jonathanolson closed 5 years ago

jonathanolson commented 6 years ago

Noticed by @chrisklus in NavigationBarSoundToggleButton. To reproduce, in kite's playground or:

var NODE_HEIGHT = 22.0;
var NODE_WIDTH = NODE_HEIGHT * 1.13;

// constants for drawing speaker
var SPEAKER_HEIGHT = NODE_HEIGHT * 0.77;
var SPEAKER_WIDTH = SPEAKER_HEIGHT * 0.58;
var SPEAKER_BACK_WIDTH = SPEAKER_WIDTH * 0.46;
var SPEAKER_BACK_HEIGHT = SPEAKER_HEIGHT * 0.35;
var SPEAKER_BACK_Y_SPACE = ( SPEAKER_HEIGHT - SPEAKER_BACK_HEIGHT ) / 2.0;
var CORNER_RADIUS = 1.0;

window.shape = new kite.Shape()
  .moveTo( SPEAKER_WIDTH, 0 )
  .lineTo( SPEAKER_BACK_WIDTH, SPEAKER_BACK_Y_SPACE )
  .lineTo( CORNER_RADIUS, SPEAKER_BACK_Y_SPACE)
  .arc( CORNER_RADIUS, SPEAKER_BACK_Y_SPACE + CORNER_RADIUS, CORNER_RADIUS, Math.PI * 1.5, Math.PI, true )
  .lineToRelative( 0, SPEAKER_BACK_HEIGHT - ( 2 * CORNER_RADIUS ) )
  .arc( CORNER_RADIUS, SPEAKER_BACK_Y_SPACE + SPEAKER_BACK_HEIGHT - CORNER_RADIUS, CORNER_RADIUS, Math.PI, Math.PI * 0.5, true )
  .lineToRelative( SPEAKER_BACK_WIDTH - CORNER_RADIUS, 0 )
  .lineTo( SPEAKER_WIDTH, SPEAKER_HEIGHT )
  .lineTo( SPEAKER_WIDTH, 0 )
  .close();

window.strokedShape = shape.getStrokedShape( new kite.LineStyles( {
  lineWidth: 1.5,
  lineJoin: 'round'
} ) );

Fails out with an assertion.

chrisklus commented 5 years ago

Thanks much @jonathanolson, closing.