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 Float

| Rect Float Float

| RoundRect Float Float Float

| Oval Float Float

| BezierPath

( Float, Float )

(List ( ( Float, Float ), ( Float, Float ) ))

| Polygon (List ( Float, Float ))

| Path (List ( Float, 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 Float Float (Html userMsg)

| Move ( Float, Float ) (Shape userMsg)

| Rotate Float (Shape userMsg)

| Scale Float Float (Shape userMsg)

| Skew Float 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 (( Float, Float ) -> userMsg) (Shape userMsg)

| EnterShape userMsg (Shape userMsg)

| EnterAt (( Float, Float ) -> userMsg) (Shape userMsg)

| Exit userMsg (Shape userMsg)

| ExitAt (( Float, Float ) -> userMsg) (Shape userMsg)

| MouseDown userMsg (Shape userMsg)

| MouseDownAt (( Float, Float ) -> userMsg) (Shape userMsg)

| MouseUp userMsg (Shape userMsg)

| MouseUpAt (( Float, Float ) -> userMsg) (Shape userMsg)

| MoveOverAt (( Float, Float ) -> userMsg) (Shape userMsg)

| TouchStart userMsg (Shape userMsg)

| TouchEnd userMsg (Shape userMsg)

| TouchStartAt (( Float, Float ) -> userMsg) (Shape userMsg)

| TouchEndAt (( Float, Float ) -> userMsg) (Shape userMsg)

| TouchMoveAt (( Float, Float ) -> userMsg) (Shape userMsg)

| PtrStart (PtrType -> userMsg) (Shape userMsg)

| PtrEnd (PtrType -> userMsg) (Shape userMsg)

| PtrCancel (PtrType -> userMsg) (Shape userMsg)

| PtrStartAt (PtrType -> ( Float, Float ) -> userMsg) (Shape userMsg)

| PtrEndAt (PtrType -> ( Float, Float ) -> userMsg) (Shape userMsg)

| PtrMoveAt (PtrType -> ( Float, Float ) -> userMsg) (Shape userMsg)

| GraphPaper Float Float Color

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

Pointer Types

It seems that PtrType(..) does not have any docs. The module's documentation names it in an @docs line, but the package does not expose it.

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 Float (List Stop)

A type representing radial and linear gradients.

type Stop

= Stop Float 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 =

( ( Float, Float, Float ), ( Float, Float, Float ) )

A matrix representing an SVG transformation matrix of the form:

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

 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 Float

| Broken (List ( Float, Float )) 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 Float Bool Bool Bool Bool 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 ( Float, Float ) ( Float, 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.

MacCASOutreach/graphicsvg/9.0.0