The (chickadee graphics path) module can be used to draw lines,
curves, circles, rectangles, and more in a scalable, resolution
independent manner. It is not an SVG compliant renderer, nor
does it intend to be. However, those familiar with SVG and/or the
HTML5 Canvas API should find lots of similarities.
This API is considered to be experimental and may change substantially in future releases of Chickadee. There are many missing features such as gradient fills and dashed strokes.
The first step to rendering vector graphics is to create a path: A series of commands that can be thought of as moving a pen around a piece of paper. A path can be either open or closed. A closed path draws a straight line from the last point in the path to the first.
Return a new path that follows commands.
(path (move-to (vec2 50.0 50.0))
(line-to (vec2 500.0 50.0))
(line-to (vec2 400.0 200.0))
(bezier-to (vec2 500.0 250.0) (vec2 380.0 300.0) (vec2 400.0 400.0))
(line-to (vec2 300.0 400.0))
(close-path))
Available drawing commands:
Pick up the pen and move it to point.
Draw a line from the current pen position to point.
Draw a cubic bezier curve from the current pen position to point. The shape of the curve is determined by the two control points: control1 and control2.
Draw a straight line back to the first point drawn in the path.
Draw an elliptical arc spanning the angle range [angle-start, angle-end], centered at center with radii rx and ry (set both to the same value for a circular arc.)
Included are some helpful procedures for generating common types of paths:
Return a path that draws a straight line from start to end.
Return a path that draws a series of lines connecting points.
Return a path that draws a rectangle whose bottom-left corner is at bottom-left and whose size is defined by width and height.
Return a path draws a square whose bottom-left corner is at bottom-left and whose size is defined by size.
Return a path that draws a rectangle with rounded corners whose bottom-left corner is at bottom-left and whose size is defined by width and height. The argument radius is used to define the corner radius for all corners. To use a different radius value for a corner, use radius-bottom-left, radius-bottom-right, radius-top-left, and/or radius-top-right.
Return a path that draws a regular polygon with num-sides sides centered on the point center with each vertex radius units away from the center.
Return a path that draws an ellipsed centered on the point center with radii rx and ry.
Return a path that draws a circle centered on the point center with radius r.
With one or more paths created, a painter is needed to give the path its style and placement in the final picture. Painters can be combined together to form arbitrarily complex pictures.
Apply a stroked drawing style to paths.
Apply a filled drawing style to paths.
Apply a filled and stroked drawing style to paths.
Apply matrix, a 3x3 transformation matrix, to painter.
Translate painter by the 2D vector v.
Rotate painter by angle radians.
Scale painter by the scalar x.
Add pad-x and pad-y amount of empty space around painter.
Stack painters on top of each other.
Place painters next to each other in a row.
Place painters next to each other in a column.
Apply all the given style settings to painter.
Possible style attributes are:
(with-style ((stroke-color green)
(stroke-width 4.0))
(stroke (circle (vec2 100.0 100.0) 50.0)))
As in real life, a painter cannot paint anything without a canvas. Once a painter has been associated with a canvas, it can finally be rendered to the screen.
Return a new canvas that will painter will draw on. Optionally, a 3x3 matrix may be specified to apply an arbitrary transformation to the resulting image.
Return a new canvas that no painter is using. Optionally, a 3x3 matrix may be specified to apply an arbitrary transformation to the image, should a painter later be associated with this canvas.
Return #t is obj is a canvas.
Associate painter with canvas.
Set the 3x3 transformation matrix of canvas to matrix.
Render canvas to the screen.