reanimate-1.1.5.0: Animation library based on SVGs.
Safe HaskellNone
LanguageHaskell2010

Reanimate.Svg.Constructors

Description

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

Synopsis

Primitive shapes

mkCircle :: Double -> Tree Source #

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

mkEllipse :: Double -> Double -> Tree Source #

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 :: Double -> Double -> Tree Source #

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

mkPathString :: String -> Tree Source #

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

mkPathText :: Text -> Tree Source #

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.

mkClipPath Source #

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

mkText :: Text -> Tree Source #

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

mkUse :: String -> Tree Source #

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

withId :: String -> Tree -> Tree Source #

Assigns ID attribute to given image.

withFillColor :: String -> Tree -> Tree Source #

See https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill.

withFillColor color takes the same approach to color as mkColor. For RGB color values, use withFillColorPixel.

withClipPathRef Source #

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

center :: Tree -> Tree Source #

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

centerX :: Tree -> Tree Source #

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

centerY :: Tree -> Tree Source #

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

centerUsing :: Tree -> Tree -> Tree Source #

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

translate :: Double -> Double -> Tree -> Tree Source #

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

rotate :: Double -> Tree -> Tree Source #

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

rotateAroundCenter :: Double -> Tree -> Tree Source #

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

rotateAround :: Double -> RPoint -> Tree -> Tree Source #

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

scale :: Double -> Tree -> Tree Source #

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 :: Double -> Double -> Tree -> Tree Source #

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

scaleToWidth :: Double -> Tree -> Tree Source #

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

scaleToHeight :: Double -> Tree -> Tree Source #

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

scaleXY :: Double -> Double -> Tree -> Tree Source #

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

flipXAxis :: Tree -> Tree Source #

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

flipYAxis :: Tree -> Tree Source #

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.

withTransformations :: [Transformation] -> Tree -> Tree Source #

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

mkColor :: String -> Texture Source #

Create Texture based on a SVG color name or "none". If the provided String is not a valid value, a white-ish color is used. See https://en.wikipedia.org/wiki/Web_colors#X11_color_names for the list of available color names.

mkBackground :: String -> Tree Source #

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

Example:

animate $ const $ mkBackground "yellow"

mkBackgroundPixel :: PixelRGBA8 -> Tree Source #

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.