Std.Ui.Canvas
Std.Ui.Canvas — a typed 2D scene for `Std.Ui` (v0.27.0).
Types
type alias Point = { x : Float , y : Float }
type PathCommand = MoveTo Float Float | LineTo Float Float | QuadTo Float Float Float Float | CubicTo Float Float Float Float Float Float | ArcTo Float Float Float Bool Bool Float Float | Close
type Shape msg
type Attr msg
type alias Style = { fill : Maybe String , stroke : Maybe String , strokeWidth : Maybe Float , opacity : Maybe Float , fontSize : Maybe Int , anchor : Maybe String , transform : List String }
Values
anchorEnd : Attr msg
`text` ends at its point.
anchorMiddle : Attr msg
`text` is centred on its point.
anchorStart : Attr msg
`text` starts at its point (the default).
circle : { x : Float , y : Float , radius : Float } -> List (Attr msg) -> Shape msg
A circle centred on (`x`, `y`).
ellipse : { x : Float , y : Float , rx : Float , ry : Float } -> List (Attr msg) -> Shape msg
An ellipse centred on (`x`, `y`) with radii `rx` and `ry`.
fill : Color -> Attr msg
Fill the shape's area with a colour.
fontSize : Int -> Attr msg
The font size of `text`, in scene units.
group : List (Attr msg) -> List (Shape msg) -> Shape msg
Shapes that share attributes: a transform, a fill, an opacity or an
line : Point -> Point -> List (Attr msg) -> Shape msg
A straight line from one point to another. A line has no area, so it is
noFill : Attr msg
Do not fill the shape (only its stroke shows).
onClick : msg -> Attr msg
A message when the shape is clicked (or tapped).
onPointerDown : (Point -> msg) -> Attr msg
A message when a pointer (mouse, pen or touch) goes down on the shape,
onPointerMove : (Point -> msg) -> Attr msg
A message when a pointer moves over the shape, with the position in
onPointerUp : (Point -> msg) -> Attr msg
A message when a pointer goes up on the shape, with the position in
opacity : Float -> Attr msg
Opacity from 0 (invisible) to 1 (opaque).
path : List PathCommand -> List (Attr msg) -> Shape msg
A path built from typed commands.
polygon : List Point -> List (Attr msg) -> Shape msg
A closed shape through the points.
polyline : List Point -> List (Attr msg) -> Shape msg
Connected straight lines through the points, not closed. Like `line`, it
rect : { x : Float , y : Float , width : Float , height : Float } -> List (Attr msg) -> Shape msg
A rectangle with its top-left corner at (`x`, `y`).
rotate : Float -> Attr msg
Rotate the shape by an angle in degrees, clockwise, about the scene
scale : Float -> Float -> Attr msg
Scale the shape by (sx, sy) about the scene origin.
scene : { width : Int , height : Int , label : String } -> List (Shape msg) -> Element msg
A scene `width` × `height` scene units, drawn at that many CSS pixels and
sceneWith : List (Attr msg) -> { width : Int , height : Int , label : String } -> List (Shape msg) -> Element msg
`sceneWith attrs cfg shapes` is `scene` with attributes on the scene as a
stroke : Color -> Attr msg
Draw the shape's outline in a colour.
strokeWidth : Float -> Attr msg
The outline width, in scene units.
text : Point -> String -> List (Attr msg) -> Shape msg
Text whose baseline starts at the point (see `anchorMiddle` and
toSvg : { width : Int , height : Int , label : String } -> List (Attr msg) -> List (Shape msg) -> Html msg
The scene as a `Std.Html` `<svg>` node (for a `Std.Html` view), with
translate : Float -> Float -> Attr msg
Move the shape by (dx, dy). Transforms apply in the order given.