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
( ( 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.