From 03f0340ae9df26b40855dd78216ff47738957851 Mon Sep 17 00:00:00 2001 From: David Thompson Date: Thu, 19 Nov 2020 20:50:56 -0500 Subject: manuals: Update chickadee manual to 0.6.0. --- manuals/chickadee/Vector-Paths.html | 339 ++++++++++++++++++++++++++++++++++++ 1 file changed, 339 insertions(+) create mode 100644 manuals/chickadee/Vector-Paths.html (limited to 'manuals/chickadee/Vector-Paths.html') diff --git a/manuals/chickadee/Vector-Paths.html b/manuals/chickadee/Vector-Paths.html new file mode 100644 index 0000000..e83d849 --- /dev/null +++ b/manuals/chickadee/Vector-Paths.html @@ -0,0 +1,339 @@ + + + + + + +Vector Paths (The Chickadee Game Toolkit) + + + + + + + + + + + + + + + + + + + +
+

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

+
+
+

2.3.5 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: +

+
    +
  • 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)))
+
+ +
+ +

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]

+
+ + + + + -- cgit v1.2.3