MacCASOutreach / graphicsvg / GraphicSVG.Secret

Advanced Secret module! This is for people who want to access the underlying types in the library so you can do advanced things. Most people don't need this much detail! I recommend you look at the source of this module to determine how to use these.

Shapes and Stencils


type Stencil
    = Circle Basics.Float
    | Rect Basics.Float Basics.Float
    | RoundRect Basics.Float Basics.Float Basics.Float
    | Oval Basics.Float Basics.Float
    | BezierPath (( Basics.Float, Basics.Float )) (List ( ( Basics.Float, Basics.Float ), ( Basics.Float, Basics.Float ) ))
    | Polygon (List ( Basics.Float, Basics.Float ))
    | Path (List ( Basics.Float, Basics.Float ))
    | Text Face String

A primitive template representing the shape you wish to draw. This must be turned into a Shape before being drawn to the screen with collage (see below).


type Shape userMsg
    = Inked (Maybe Color) (Maybe ( LineType, Color )) Stencil
    | ForeignObject Basics.Float Basics.Float (Html userMsg)
    | Move (( Basics.Float, Basics.Float )) (Shape userMsg)
    | Rotate Basics.Float (Shape userMsg)
    | Scale Basics.Float Basics.Float (Shape userMsg)
    | Skew Basics.Float Basics.Float (Shape userMsg)
    | Transformed Transform (Shape userMsg)
    | Group (List (Shape userMsg))
    | GroupOutline (Shape userMsg)
    | AlphaMask (Shape userMsg) (Shape userMsg)
    | Clip (Shape userMsg) (Shape userMsg)
    | Everything
    | Notathing
    | Link String (Shape userMsg)
    | Tap userMsg (Shape userMsg)
    | TapAt (( Basics.Float, Basics.Float ) -> userMsg) (Shape userMsg)
    | EnterShape userMsg (Shape userMsg)
    | EnterAt (( Basics.Float, Basics.Float ) -> userMsg) (Shape userMsg)
    | Exit userMsg (Shape userMsg)
    | ExitAt (( Basics.Float, Basics.Float ) -> userMsg) (Shape userMsg)
    | MouseDown userMsg (Shape userMsg)
    | MouseDownAt (( Basics.Float, Basics.Float ) -> userMsg) (Shape userMsg)
    | MouseUp userMsg (Shape userMsg)
    | MouseUpAt (( Basics.Float, Basics.Float ) -> userMsg) (Shape userMsg)
    | MoveOverAt (( Basics.Float, Basics.Float ) -> userMsg) (Shape userMsg)
    | TouchStart userMsg (Shape userMsg)
    | TouchEnd userMsg (Shape userMsg)
    | TouchStartAt (( Basics.Float, Basics.Float ) -> userMsg) (Shape userMsg)
    | TouchEndAt (( Basics.Float, Basics.Float ) -> userMsg) (Shape userMsg)
    | TouchMoveAt (( Basics.Float, Basics.Float ) -> userMsg) (Shape userMsg)
    | GraphPaper Basics.Float Basics.Float Color

A filled, outlined, or filled and outlined object that can be drawn to the screen using collage.

Colours and Gradients


type Color
    = Solid Color
    | Gradient Gradient

The Color type is used for filling or outlining a Stencil.


type Gradient
    = RadialGradient (List Stop)
    | LinearGradient Basics.Float (List Stop)

A type representing radial and linear gradients.


type Stop
    = Stop Basics.Float Basics.Float Color

A type representing stops in a gradient. Consists of one constructor with inputs for the position, transparency and colour.

Raw Transformations


type alias Transform =
( ( Basics.Float
, Basics.Float
, Basics.Float )
, ( Basics.Float
, Basics.Float
, Basics.Float ) 
)

A matrix representing an SVG transformation matrix of the form:

( ( a , c , e ) , ( b , d , f ) )

or

 a c e
 b d f

The a, c, b and d control transformations such as skew, rotate and scale; e and f control translation.

These matrices are best built up by starting with the identity matrix and applying any number of *T functions (see below); for example,

myTransform =
    ident
        |> scaleT 2 2
        |> rotateT (degrees 30)
        |> moveT (0, 50)

LineTypes


type LineType
    = NoLine
    | Unbroken Basics.Float
    | Broken (List ( Basics.Float, Basics.Float )) Basics.Float

The LineType type is used to define the appearance of an outline for a Stencil. LineType also defines the appearence of line and curve.

Text and Fonts


type FontAlign
    = AlignLeft
    | AlignCentred
    | AlignRight

A simple algebraic data type with three constructors: - AlignLeft - AlignCentred - AlignRight


type Face
    = Face Basics.Float Basics.Bool Basics.Bool Basics.Bool Basics.Bool Basics.Bool Font FontAlign

The Face type describes the appearance of a text Stencil.


type Font
    = Serif
    | Sansserif
    | FixedWidth
    | Custom String

The Font type describes the font of a text Stencil.

Curve Pulls


type Pull
    = Pull (( Basics.Float, Basics.Float )) (( Basics.Float, Basics.Float ))

To make it easier to read the code defining a curve, and to make sure we always use the right number of curve points and pull points (which is one more curve point than pull points), we define a special Pull type, whose first point is the point we pull towards, and second point is the end point for this curve segments.