reanimate-0.5.0.1: Animation library based on SVGs.

Reanimate.Svg.Constructors

Description

Functions for creating basic SVG elements and applying transformations to them.

Synopsis

# Primitive shapes

Create a circle with given radius, centered at (0, 0). See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/circle

Create an ellipse given X-axis radius, and Y-axis radius, with center at (0, 0). See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse

mkRect width height creates a rectangle with given with and height, centered at (0, 0). See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect

mkLine :: (Double, Double) -> (Double, Double) -> Tree Source #

Create a line segment between two points given by their (x, y) coordinates. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/line

Similar to mkPathText, but taking SVG path command as a String.

Create path from textual representation of SVG path command. If the text doesn't represent valid path command, this function fails with error. Use mkPath for type safe way of creating paths.

mkLinePath :: [(Double, Double)] -> Tree Source #

Create a path from a list of (x, y) coordinates of points along the path.

mkLinePathClosed :: [(Double, Double)] -> Tree Source #

Create a path from a list of (x, y) coordinates of points along the path.

Arguments

 :: String ID of the clip path, which can then be referred to by other elements using withClipPathRef. -> [Tree] List of shapes that will determine the final shape of the clipping region -> Tree

A clip path restricts the region to which paint can be applied. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath

Insert a native text object anchored at the middle.

Example:

mkAnimation 2 $\t -> scale 2$ withStrokeWidth 0.05 $mkText (T.take (round$ t*15) "text")


# Grouping shapes and definitions

mkDefinitions :: [Tree] -> Tree Source #

Create definition of graphical objects that can be used at later time. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs

Create an element by referring to existing element defined previously. For example you can create a graphical element, assign ID to it using withId, wrap it in mkDefinitions and then use it via use "myId". See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/use

# Attributes

Assigns ID attribute to given image.

Arguments

 :: ElementRef Reference to clip path defined previously (e.g. by mkClipPath) -> Tree Image that will be clipped by the referenced clip path -> Tree

# Transformations

Translate given image so that the center of its bouding box coincides with coordinates (0, 0).

Translate given image so that the X-coordinate of the center of its bouding box is 0.

Translate given image so that the Y-coordinate of the center of its bouding box is 0.

Center the second argument using the bounding-box of the first.

translate x y image moves the image by x along X-axis and by y along Y-axis.

rotate angle image rotates the image around origin (0,0) counterclockwise by angle given in degrees.

rotate angle image rotates the image around the center of its bounding box counterclockwise by angle given in degrees.

rotate angle point image rotates the image around given point counterclockwise by angle given in degrees.

Scale the image uniformly by given factor along both X and Y axes. For example scale 2 image makes the image twice as large, while scale 0.5 image makes it half the original size. Negative values are also allowed, and lead to flipping the image along both X and Y axes.

scaleToSize width height resizes the image so that its bounding box has corresponding width and height.

scaleToWidth width scales the image so that the width of its bounding box ends up having given width.

scaleToHeight height scales the image so that the height of its bounding box ends up having given height.

Similar to scale, except scale factors for X and Y axes are specified separately.

Flip the image along vertical axis so that what was on the right will end up on left and vice versa.

Flip the image along horizontal so that what was on the top will end up in the bottom and vice versa.

aroundCenter :: (Tree -> Tree) -> Tree -> Tree Source #

aroundCenter f image first moves the image so the center of its bounding box is at the origin (0, 0), applies transformation f to it and then moves the transformed image back to its original position.

aroundCenterX :: (Tree -> Tree) -> Tree -> Tree Source #

Same as aroundCenter but only for the X-axis.

aroundCenterY :: (Tree -> Tree) -> Tree -> Tree Source #

Same as aroundCenter but only for the Y-axis.

Apply list of transformations to given image.

withViewBox :: (Double, Double, Double, Double) -> Tree -> Tree Source #

Switch from the default viewbox to a custom viewbox. Nesting custom viewboxes is unlikely to give good results. If you need nested custom viewboxes, you will have to configure them by hand.

The viewbox argument is (min-x, min-y, width, height).

Example:

withViewBox (0,0,1,1) $mkBackground "yellow"  # Other Create Texture based on SVG color name. See https://en.wikipedia.org/wiki/Web_colors#X11_color_names for the list of available names. If the provided name doesn't correspond to valid SVG color name, white-ish color is used. Rectangle with a uniform color and the same size as the screen. Example: animate$ const \$ mkBackground "yellow"


Rectangle with a uniform color and the same size as the screen.

gridLayout :: [[Tree]] -> Tree Source #

Take list of rows, where each row consists of number of images and display them in regular grid structure. All rows will get equal amount of vertical space. The images within each row will get equal amount of horizontal space, independent of the other rows. Each row can contain different number of cells.