Visualization.Path

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.

Datatype

type PathSegment

= Move Point

| Close

| Line Point

| QuadraticCurve Point Point

| BezierCurve Point Point Point

| Arc Point Point Float

| ArcCustom Point Float Float Float Bool

| Rect Point ( Float, Float )

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.

type alias Path =

List PathSegment

Converting

toAttrString : Path -> String

Transforms a path to a string that can be passed into the d attribute of the path SVG element.

path
    |> moveTo 100 100
    |> arcTo 200 100 200 200 50
    |> arc 150 150 50 0 pi False
    |> toAttrString
    -- "M100,100L150,100A50,50,0,0,1,200,150A50,50,0,1,1,100,150"

DSL

The DSL can be used interchangebly with directly writing the datatype above.

begin
  |> moveTo 30 50
  |> lineTo 20 70
  |> lineTo 40 23
  |> close

Is equivalent to:

[Move (30, 50), Line (20, 70), Line (40, 23), Close]

begin : Path

Start a new path. Equivalent to [].

moveTo : Float -> Float -> Path -> Path

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.

lineTo : Float -> Float -> Path -> Path

Draws a straight line from the current point to the specified point ⟨x, y⟩.

close : Path -> Path

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.

quadraticCurveTo : Float -> Float -> Float -> Float -> Path -> Path

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 y

bezierCurveTo : Float -> Float -> Float -> Float -> Float -> Float -> Path -> Path

Draws 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 y

arcTo : Float -> Float -> Float -> Float -> Float -> Path -> Path

Draws 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 radius

arc : Float -> Float -> Float -> Float -> Float -> Bool -> Path -> Path

Draws 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 anticlockwise

rect : Float -> Float -> Float -> Float -> Path -> Path

Creates 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

gampleman/elm-visualization/1.3.0

Visualization.Path

Datatype

Converting

DSL

Modules