Constructors for MoveTo instructions

Move to a position on the canvas without drawing. The M instruction.

Constructors for DrawTo instructions

You may miss some constructs in comparison to SVG. Only absolute coordinates are supported, and the smooth curve variants are removed. These choices were made to keep the number of constructors small.

Relative coordinates can always be transformed to abslute ones.

horizontal and vertical movements can be written as LineTo commands, smooth (also known as short-hand) curve extensions can be achieved with Curve.smoothQuadraticBezier and Curve.smoothCubicBezier.

The SubPath.parser will do these transformations automatically.

Draw a series of line segments to absolute positions. The L instruction.

Draw a straight line from the cursor position to the starting position of the path. The Z instruction.

A quadratic bezier. The Q instruction.

A cubic bezier. The C instruction.

An elliptical arc. The A instruction.

The arguments for an Arc

argument : EllipticalArcArgument
argument =
    { start = ( 0, 42 )
    , end = ( 42, 0 )
    , radii = ( 1, 1 )
    , xAxisRotate = 90
    , arcFlag = largestArc
    , direction = clockwise
    }

The xAxisRotate parameter is in degrees (note that in the Segment module, it is in radians).

Corresponds to a sweep flag of 0

Note: this is clockwise in the "normal" coordinate system with positive y pointing up and positive x pointing right

Corresponds to a sweep flag of 1

Note: this is counter-clockwise in the "normal" coordinate system with positive y pointing up and positive x pointing right

Corresponds to an arc flag of 1

Corresponds to an arc flag of 0

Determine which arc to draw

Determine which arc to draw

• start start of the subpath (most recent MoveTo)
• cursor the current cursor position
• previousControlPoint if the previous drawto instruction was a curveTo (cubic or quadratic), then this value stores Just its last control point position, else Nothing

Simulate the effect of a drawto command on the cursor position

state : CursorState
state =
    { start = (0,0)
    , cursor = (10, 10)
    , previousControlPoint = Nothing
    }


updateCursorState (lineTo [(20, 10)]) state
    --> { start = (0,0), cursor = (20,10), previousControlPoint = Nothing }


updateCursorState (quadraticCurveTo [(( 15, 20), (20, 10))]) state
    --> { start = (0,0), cursor = (20,10), previousControlPoint = Just (15, 20) }

Merge adjacent commands if possible

merge (lineTo [ ( 0, 0 ) ]) (lineTo [ ( 10, 10 ) ]) --> Ok (lineTo [ (0,0) , (10, 10) ])


merge (lineTo [ ( 0, 0 ) ]) closePath --> Err (lineTo [ (0,0) ], closePath)

Convert a one-true-path drawto to a svg-path-lowlevel drawto. Used in conversion to string

Convert a one-true-path moveto to a svg-path-lowlevel moveto. Used in conversion to string

Transform the coordinates in a drawto

scale a moveto

scale a drawto