Currently incomplete!

Shape
moveTo
lineTo
quadraticCurveTo
cubicCurveTo
arc
ellipticalArc
rect
roundRect
circle
ellipse
close
copy
writeToContext
getSVGPath
transformed
containsPoint
intersection
windingIntersection
intersectsBounds
getStrokedShape
toString

Tutorials

Add one!

Get the code

Kite depends on a few other libraries, and needs to have them checked out as siblings. It is recommended to place all of these inside a containing directory. Make sure you have git installed, then run:

git clone https://github.com/phetsims/sherpa.git
git clone https://github.com/phetsims/chipper.git
git clone https://github.com/phetsims/assert.git
git clone https://github.com/phetsims/phet-core.git
git clone https://github.com/phetsims/dot.git
git clone https://github.com/phetsims/axon.git
git clone https://github.com/phetsims/kite.git

For some examples and tests, and to build a custom version, you'll need to install node.js, and grunt-cli. Then,

cd kite
npm install
grunt

You will now have the built files under build/

Dependencies

External dependencies (please provide these in your page before loading Kite): Internal dependencies:

Kite API

Shape

Represents a shape that is composed of one or more subpaths. new kite.Shape() will create an empty shape, which can then have drawing commands (like moveTo or lineTo) applied to it. The semantics are effectively the same as the Canvas 2D interface CanvasPathMethods, where context.closePath is renamed to shape.close, context.bezierCurveTo is renamed to shape.cubicCurveTo (since the quadratic curve is also a Bézier curve), and the context.arcTo varieties are not implemented, in favor of shape.arc and ellipticalArc.

moveTo( x, y )

Moves the current position to the (x,y) location, without drawing a line. See context.moveTo for detailed semantics.

Also currently supports moveTo( point ) where point is a dot.Vector2.

lineTo( x, y )

Draws a line from the current position to the (x,y) location. See context.lineTo for detailed semantics.

Also currently supports lineToPoint( point ) where point is a dot.Vector2.

quadraticCurveTo( cpx, cpy, x, y )

Draws a quadratic Bézier curve with a control net of the current position, the control point (cpx,cpy), and the end point (x,y). See context.quadraticCurveTo for detailed semantics.

Also currently supports quadraticCurveToPoint( controlPoint, endPoint ) where the parameters are dot.Vector2 instances.

cubicCurveTo( cp1x, cp1y, cp2x, cp2y, x, y )

Draws a cubic Bézier curve with a control net of the current position, the control point (cp1x,cp1y), the control point (cp2x,cp2y), and the end point (x,y). See context.bezierCurveTo for detailed semantics.

Also currently supports cubicCurveToPoint( controlPoint1, controlPoint2, endPoint ) where the parameters are dot.Vector2 instances.

arc( centerX, centerY, radius, startAngle, endAngle, anticlockwise )

Draws a circular arc centered at (centerX,centerY) with the specified radius, between the two angles. anticlockwise is in the graphics coordinate frame (-y), not the mathematical (+y) one. See context.arc for detailed semantics.

Also currently supports arcPoint( center, radius, startAngle, endAngle, anticlockwise ) where the center is an dot.Vector2 instance.

ellipticalArc( centerX, centerY, radiusX, radiusy, rotation, startAngle, endAngle, anticlockwise )

Draws an elliptical arc centered at (centerX,centerY) with the specified semi-major (radiusX) and semi-minor (radiusY) axes, between the two angles. The entire ellipse is rotated by rotation anticlockwise is in the graphics coordinate frame (-y), not the mathematical (+y) one. See context.ellipse for detailed semantics.

Also currently supports ellipticalArcPoint( center, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise ) where the center is an dot.Vector2 instance.