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.
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.)
Draw a circular arc with radius radius that is tangential to the line segment formed by the current pen position and c1, as well as the line segment formed by c1 and c2. The result is a smooth corner.
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 series of bezier points starting at p1, moving to p2 using control points c1 and c2, and proceeding to draw additional bezier curves as defined by points. Each additional curve requires 3 additional arguments: two control points and and an ending point.
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 all the given style settings to painter.
Possible style attributes are:
blend-mode
fill-color
stroke-color
stroke-width
stroke-feather
stroke-cap
(with-style ((stroke-color green)
(stroke-width 4.0))
(stroke (circle (vec2 100.0 100.0) 50.0)))
Fill colors may be either solid colors (see Colors) or gradients. For gradient fills, there are two styles: linear or radial.
Return a new linear gradient that transitions from start-color on the left to end-color on the right over length pixels. offset may be used to push the gradient start point to the right, creating a solid block of start-color on the right hand side of the painter. The line’s direction may be changed by specifying a rotation value. The starting point for the gradient is determined by origin and defaults to the lower left corner of the painter’s bounding box.
Return a new radial gradient that transitions from start-color at the point origin to end-color at radius pixels away. offset specifies the distance from the origin where start-color begins to transition. The default is to immediately start transitioning. The default shape of this type of gradient is a circle, but it can also be made elliptical by specifying different radius-x and radius-y values. When the gradient shape is elliptical, rotation can be used to rotate it.
Return #t when obj is a gradient object.
Painters can also be transformed and combined to form new painters.
Apply matrix, a 3x3 transformation matrix (see Matrices), to painter.
Translate painter by the 2D vector v.
Rotate painter by angle radians.
Scale painter by the scalar x.
Flip painter horizontally.
Flip painter vertically.
Add pad-x and pad-y amount of empty space around painter.
Stack painters on top of each other.
The next batch of procedures is taken straight out of the picture language described in Structure and Interpretation of Computer Programs section 2.2.4.
Place painters next to each other in a row.
Place painters next to each other in a column.
Subdivide painter into 3 sections, recursively, like so:
*----------------*----------------* | | | | | right-split | | | n - 1 | | | | | painter *----------------* | | | | | right-split | | | n - 1 | | | | *----------------*----------------*
Subdivide painter into 3 sections, recursively, like so:
*----------------*----------------* | | | | up-split | up-split | | n - 1 | n - 1 | | | | *----------------*----------------* | | | painter | | | | | *----------------*----------------*
Subdivide painter into 4 sections, recursively, like so:
*----------------*----------------* | | | | up-split | corner-split | | n - 1 | n - 1 | | | | *----------------*----------------* | | | | painter | right-split | | | n - 1 | | | | *----------------*----------------*
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.