This module provides an abstraction over drawing complex paths. Currently it
contains a function to convert this representation into a string suitable for the
d attribute of the path SVG element. However, the ADT that powers this is
publicly exposed and alternative renderers can be built in e.g. Canvas or WebGL.
The functions here are modeled after the Canvas API.
Deprecated: In a future major release this module will be removed in favor of [folkertdev/one-true-path-experiment][otp] or
it's successors, as they provide a safe, high quality wrapper over path based drawing that should be interoperable with
other packages. To make migration easier, the toOneTruePath function is provided, so that downstream code can
start working with [folkertdev/one-true-path-experiment][otp],
rather than the datatypes provided in this module, yet still inter-operate.
Transforms a path to a string that can be passed into the d attribute of the
path SVG element.
begin
|> moveTo 100 100
|> arcTo 200 100 200 200 50
|> arc 150 150 50 0 pi False
|> toAttrString
--> "M100,100 L150,100 A50,50 0 0 1 200,150 A50,50 0 1 1 100,150"Transforms the path to a path from the folkertdev/one-true-path-experiment library. This allows you to do fancy math on the path data - with the hope that this will enable animation library authors to build general purpose transitions between these.
The DSL can be used interchangebly with directly writing the datatype above.
begin
|> moveTo 30 50
|> lineTo 20 70
|> lineTo 40 23
|> closeIs equivalent to:
--> [Move (30, 50), Line (20, 70), Line (40, 23), Close]Start a new path. Equivalent to [].
Move to the specified point ⟨x, y⟩ and start a new subpath.
Note: In SVG having multiple moveTo commands following each other draws
an implicit path between them. Do not rely on this behavior, in the future this
may be removed.
Draws a straight line from the current point to the specified point ⟨x, y⟩.
Ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath.
Draws a quadratic Bézier segment from the current point to the specified point ⟨x, y⟩, with the specified control point ⟨cpx, cpy⟩.
quadraticCurveTo cpx cpy x yDraws a cubic Bézier segment from the current point to the specified point ⟨x, y⟩, with the specified control points ⟨cpx1, cpy1⟩ and ⟨cpx2, cpy2⟩.
bezierCurveTo cpx1 cpy1 cpx2 cpy2 x yDraws a circular arc segment with the specified radius that starts tangent to the line between the current point and the specified point ⟨x1, y1⟩ and ends tangent to the line between the specified points ⟨x1, y1⟩ and ⟨x2, y2⟩. If the first tangent point is not equal to the current point, a straight line is drawn between the current point and the first tangent point.
arcTo x1 y1 x2 y2 radiusDraws a circular arc segment with the specified center ⟨x, y⟩, radius, startAngle and endAngle. If anticlockwise is true, the arc is drawn in the anticlockwise direction; otherwise, it is drawn in the clockwise direction. If the current point is not equal to the starting point of the arc, a straight line is drawn from the current point to the start of the arc.
arc x y radius startAngle endAngle anticlockwiseCreates a new subpath containing just the four points ⟨x, y⟩, ⟨x + w, y⟩, ⟨x + w, y + h⟩, ⟨x, y + h⟩, with those four points connected by straight lines, and then marks the subpath as closed.
rect x y w h
A list of
PathSegments represents a path. These are essentially drawing commands that are based on the Canvas API. For more information, see the DSL section in this module.