Next: , Previous: , Up: Graphics   [Contents][Index]


2.3.6 Vector Paths

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.

Procedure: path . commands

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:

Procedure: move-to point

Pick up the pen and move it to point.

Procedure: line-to point

Draw a line from the current pen position to point.

Procedure: bezier-to control1 control2 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.

Procedure: close-path

Draw a straight line back to the first point drawn in the path.

Procedure: arc center rx ry angle-start angle-end

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:

Procedure: line start end

Return a path that draws a straight line from start to end.

Procedure: polyline . points

Return a path that draws a series of lines connecting points.

Procedure: rectangle bottom-left width height

Return a path that draws a rectangle whose bottom-left corner is at bottom-left and whose size is defined by width and height.

Procedure: square bottom-left size

Return a path draws a square whose bottom-left corner is at bottom-left and whose size is defined by size.

Procedure: rounded-rectangle bottom-left width height [#:radius 4.0] [#:radius-bottom-left] [#:radius-bottom-right] [#:radius-top-left] [#:radius-top-right]

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.

Procedure: regular-polygon center num-sides radius

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.

Procedure: ellipse center rx ry

Return a path that draws an ellipsed centered on the point center with radii rx and ry.

Procedure: circle center r

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.

Procedure: stroke . paths

Apply a stroked drawing style to paths.

Procedure: fill . paths

Apply a filled drawing style to paths.

Procedure: fill-and-stroke . paths

Apply a filled and stroked drawing style to paths.

Procedure: transform matrix painter

Apply matrix, a 3x3 transformation matrix, to painter.

Procedure: translate v painter

Translate painter by the 2D vector v.

Procedure: rotate angle painter

Rotate painter by angle radians.

Procedure: scale x painter

Scale painter by the scalar x.

Procedure: pad pad-x pad-y painter

Add pad-x and pad-y amount of empty space around painter.

Procedure: superimpose . painters

Stack painters on top of each other.

Procedure: beside . painters

Place painters next to each other in a row.

Procedure: below . painters

Place painters next to each other in a column.

Syntax: with-style ((style-name value) ...) painter

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.

Procedure: make-canvas painter [#:matrix]

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.

Procedure: make-empty-canvas [#:matrix]

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.

Procedure: canvas? obj

Return #t is obj is a canvas.

Procedure: set-canvas-painter! canvas painter

Associate painter with canvas.

Procedure: set-canvas-matrix! canvas matrix

Set the 3x3 transformation matrix of canvas to matrix.

Procedure: draw-canvas canvas

Render canvas to the screen.


Next: , Previous: , Up: Graphics   [Contents][Index]