Graphics.Collage

The collage API is for freeform graphics. You can move, rotate, scale, etc. all sorts of forms including lines, shapes, images, and elements.

Collages use the same coordinate system you might see in an algebra or physics problem. The origin (0,0) is at the center of the collage, not the top left corner as in some other graphics libraries. Furthermore, the y-axis points up, so moving a form 10 units in the y-axis will move it up on screen.

Unstructured Graphics

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

A collage is a collection of 2D forms. There are no strict positioning relationships between forms, so you are free to do all kinds of 2D graphics.

Creating Forms

toForm : Element -> Form

Turn any Element into a Form. This lets you use text, gifs, and video in your collage. This means you can move, rotate, and scale an Element however you want.

filled : Color -> Shape -> Form

Create a filled in shape.

textured : String -> Shape -> Form

Create a textured shape. The texture is described by some url and is tiled to fill the entire shape.

gradient : Gradient -> Shape -> Form

Fill a shape with a gradient.

outlined : LineStyle -> Shape -> Form

Outline a shape with a given line style.

traced : LineStyle -> Path -> Form

Trace a path with a given line style.

Transforming Forms

move : ( Float, Float ) -> Form -> Form

Move a form by the given amount. This is a relative translation so (move (10,10) form) would move form ten pixels up and ten pixels to the right.

moveX : Float -> Form -> Form

Move a shape in the x direction. This is relative so (moveX 10 form) moves form 10 pixels to the right.

moveY : Float -> Form -> Form

Move a shape in the y direction. This is relative so (moveY 10 form) moves form upwards by 10 pixels.

scale : Float -> Form -> Form

Scale a form by a given factor. Scaling by 2 doubles both dimensions, and quadruples the area.

rotate : Float -> Form -> Form

Rotate a form by a given angle. Rotate takes standard Elm angles (radians) and turns things counterclockwise. So to turn form 30° to the left you would say, (rotate (degrees 30) form).

alpha : Float -> Form -> Form

Set the alpha of a Form. The default is 1, and 0 is totally transparent.

Grouping Forms

Grouping forms makes it easier to write modular graphics code. You can create a form that is a composite of many subforms. From there it is easy to transform it as a single unit.

group : List Form -> Form

Flatten many forms into a single Form. This lets you move and rotate them as a single unit, making it possible to build small, modular components.

groupTransform : Transform2D -> List Form -> Form

Flatten many forms into a single Form and then apply a matrix transformation.

Shapes

rect : Float -> Float -> Shape

A rectangle with a given width and height.

oval : Float -> Float -> Shape

An oval with a given width and height.

square : Float -> Shape

A square with a given edge length.

circle : Float -> Shape

A circle with a given radius.

ngon : Int -> Float -> Shape

A regular polygon with N sides. The first argument specifies the number of sides and the second is the radius. So to create a pentagon with radius 30 you would say:

ngon 5 30

polygon : List ( Float, Float ) -> Shape

Create an arbitrary polygon by specifying its corners in order. polygon will automatically close all shapes, so the given list of points does not need to start and end with the same position.

Paths

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

Create a path along a given line segment.

path : List ( Float, Float ) -> Path

Create a path that follows a sequence of points.

Line Styles

solid : Color -> LineStyle

Create a solid line style with a given color.

dashed : Color -> LineStyle

Create a dashed line style with a given color. Dashing equals [8,4].

dotted : Color -> LineStyle

Create a dotted line style with a given color. Dashing equals [3,3].

type alias LineStyle =

{ color : Color

, width : Float

, cap : LineCap

, join : LineJoin

, dashing : List Int

, dashOffset : Int

}

All of the attributes of a line style. This lets you build up a line style however you want. You can also update existing line styles with record updates.

type LineCap

= Flat

| Round

| Padded

The shape of the ends of a line.

type LineJoin

= Smooth

| Sharp Float

| Clipped

The shape of the “joints” of a line, where each line segment meets. Sharp takes an argument to limit the length of the joint. This defaults to 10.

defaultLine : LineStyle

The default line style, which is solid black with flat caps and sharp joints. You can use record updates to build the line style you want. For example, to make a thicker line, you could say:

{ defaultLine | width <- 10 }

elm-lang/core/1.1.1