phetsims / kite

A library for creating, manipulating and displaying 2D shapes in JavaScript.
http://scenerystack.org/
MIT License
15 stars 6 forks source link

add ability to draw combine multiple primitive shapes using one Shape #72

Closed pixelzoom closed 6 years ago

pixelzoom commented 6 years ago

I'd like to describe the "thought bubbles" in Color Vision (screenshot below) as one Shape, rendered as one Path. It would be 4 ellipses, e.g.:

var shape = new Shape().ellipse(...).ellipse(...).ellipse(...).ellipse(...);

There's currently no way to do this without self-computing the starting point of each ellipse.

screenshot_614

jonathanolson commented 6 years ago

Added newSubpath(), see commit above. It behaves like a moveTo (but without moving to a point), so the inlined example with three circles:

var shape = new kite.Shape();
var path = new scenery.Path( shape, { stroke: 'red' } );
shape.circle( 50, 50, 20 ).newSubpath().circle( 100, 100, 20 ).newSubpath().circle( 150, 50, 20 );
scene.addChild( path );

results in:

screen shot 2018-05-11 at 10 22 04 am

Can you try it out?

pixelzoom commented 6 years ago

I used newSubpath to draw the Color Vision "thought bubbles" using a single Shape, see above commit. It worked great. Thanks!