Show Menu
Cheatography
  1. Home >
  2. Programming >

Elm 1.1.0 Graphics Cheat Sheet by

Standard Elm Graphics.*

Unstru­ctured Graphics

collage : Int -> Int -> List Form -> Element

Creating Forms

filled : Color -> Shape -> Form
gradient : Gradient -> Shape -> Form
outlined : LineStyle -> Shape -> Form
textured : String -> Shape -> Form
toForm : Element -> Form
traced : LineStyle -> Path -> Form

Grouping Forms

group : List Form -> Form
groupT­ran­sform : Transf­orm2D -> List Form -> Form

Shapes

circle : Float -> Shape
circle­(ra­dius)
ngon : Int -> Float -> Shape
ngon(s­ides, radius)
oval : Float -> Float -> Shape
oval(w­idth, height)
polygon : List (Float, Float) -> Shape
Specify a list of points of the polygon. Shape will automa­tically close.
rect : Float -> Float -> Shape
rect(w­idth, height)
square : Float -> Shape
square­(ed­ge_­length)

Images

image : Int -> Int -> String -> Element
image(­width, height, src)
fitted­Image : Int -> Int -> String -> Element
fitted­Ima­ge(­width, height, src)
croppe­dImage : (Int, Int) -> Int -> Int -> String -> Element
croppe­dIm­age­(or­igin, width, height, src)
tiledImage : Int -> Int -> String -> Element
tiledI­mag­e(w­idth, height, src)

Element Inspection

widthOf : Element -> Int
heightOf : Element -> Int
sizeOf : Element -> (Int, Int)

Layout Aliases

layers : List ELement -> Element
layers == flow outward
above : Element -> Element -> Element
a above b
below : Element -> Element -> Element
a below b
beside : Element -> Element -> Element
a beside b

Layout

flow : Direction -> List Element -> Element
right : Direction
+X
up : Direction
+Y
outward : Direction
+Z
left : Direction
-X
down : Direction
-Y
inward : Direction
-Z
 

Transf­orming Forms

alpha : Float -> Form -> Form
move : (Float, Float) -> Form -> Form
moveX : Float -> Form -> Form
moveY : Float -> Form -> Form
rotate : Float -> Form -> Form
scale : Float -> Form -> Form

Paths

segment : (Float, Float) -> (Float, Float) -> Path
path : List (Float, Float) -> Path

Line Style Types

type alias LineStyle = {
  color:Color,
  width:Float,
  cap:LineCap,
  join:LineJoin,
  dashing:List Int,
  dashOffset:Int
}

type LineCap
  = Flat
  | Round
  | Padded

type LineJoin
  = Smooth
  | Sharp Float
  | Clipped

Line Styles

dashed : Color -> LineStyle
defaul­tLine : LineStyle
dotted : Color -> LineStyle
solid : Color -> LineStyle

Element Styling

width : Int -> Element -> Element
height : Int -> Element -> Element
size : Int -> Int -> Element -> Element
color : Color -> Element -> Element
opacity : Float -> Element -> Element
opacity (0.0:t­ran­sparent - 1.0:op­aque)
link : String -> Element -> Element
create Element that is a hyper-link
tag : String -> Element -> Element
similar to <a> with ID

Positi­oning Elements

empty : Element
flow down [ img1, if showMore then img2 else empty ]
spacer : Int -> Int -> Element
Empty Box
container : Int -> Int -> Position -> Element -> Element
Put an element in a container. By setting the color of the container, you can create borders.

Named Positions

topLeft : Position
midTop : Position
topRight : Position
--------------------
midLeft : Position
middle : Position
midRight : Position
--------------------
bottomLeft : Position
midBottom : Position
bottomRight : Position
                           
 

Metadata

  • Languages:
  • Published: 17th January, 2015
  • Last Updated: 12th May, 2016

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          Regular Expressions Cheat Sheet
          PHP Cheat Sheet
          Python Cheat Sheet

          More Cheat Sheets by CITguy

          jasmine JS testing Cheat Sheet
          Extending Ruby with C - Part 1 Cheat Sheet
          *nix users and groups Cheat Sheet