Graphics.NanoVG.Picture

The module was originally inspired by gloss Picture data type.

It allows you to define simple pieces, combine and move/rotate/scale them to produce the final image.

Example of composite picture (filled circle inside stroked one, both moved to the side by 50 pixels):

translateP 50 0 $ pictures
  [ fill (NVG.Color 1 1 1 1) $ circle (10, 10) 10
  , stroke (NVG.Color 1 1 1 1) $ circle (10, 10) 15
  ]

Shapes

newtype Shape

Shape of a future picture fragment, to be filled or stroked later. Action should define set of paths for the passed Context.

Constructors

Shape

Fields

• unShape :: Context -> IO ()

Helper type aliases

type Radius = Float

Radius of a circle or an arc.

type Point = (Float, Float)

Point on 2D plane.

type Center = Point

Point representing center of circle, arc, rotation or scale.

type Angle = Float

Angle of rotation, arc, etc.

Predefined Constructors

circle :: Center -> Radius -> Shape

Make circular shape.

line :: Point -> Point -> Shape

Make line shape.

rectangle :: Point -> Point -> Shape

Make rectangular shape given two (opposite) corners positions.

arc :: Center -> Radius -> Angle -> Angle -> Shape

Make arc shape with given center and going counter-clockwise from first angle to the second.

shapes :: [Shape] -> Shape

Combine multiple shapes together.

translateS :: Float -> Float -> Shape -> Shape

Translate shape by given x and y offsets.

rotateS :: Center -> Angle -> Shape -> Shape

Rotate shape around given point by given angle.

scaleS :: Center -> Angle -> Float -> Shape -> Shape

Scale shape from given point in given direction. This is affine transformation

scaleS' :: Center -> Float -> Shape -> Shape

Scale shape from given point by given factor in every direction.

scaleSx :: Center -> Float -> Shape -> Shape

Scale shape from given point in positive X direction by given factor.

scaleSy :: Center -> Float -> Shape -> Shape

Scale shape from given point in positive Y direction by given factor.

hole :: Shape -> Shape

Turns shape into a hole which can then be combined with other (solid) shape. E.g.

fill (Color 1 0 0 1) $ shapes [circle (0, 0) 40, hole $ circle (0, 0) 30]

can be used to create a ring of width 10.

Pictures

data Picture

Picture represent collection of filled/stroked shapes ready to be rendered

mapShape :: (Shape -> Shape) -> Picture -> Picture

Modify shape(s) the picture was based off.

Contstructors

Pictures are generally constructed by filling or stroking shape or by transforming exising picture.

stroke :: Color -> Shape -> Picture

Stroke the shape to create a picture.

fill :: Color -> Shape -> Picture

Fill the shape to create a picture.

pictures :: [Picture] -> Picture

Combine multiple pictures together.

translateP :: Float -> Float -> Picture -> Picture

Translate the picture by given x and y offsets.

rotateP :: Center -> Angle -> Picture -> Picture

Rotate the picture around given point for given angle.

scaleP :: Center -> Angle -> Float -> Picture -> Picture

Scale picture from given point in given direction. This is affine transformation

scaleP' :: Center -> Float -> Picture -> Picture

Scale picture from given point by given factor in every direction.

scalePx :: Center -> Float -> Picture -> Picture

Scale picture from given point in positive X direction by given factor.

scalePy :: Center -> Float -> Picture -> Picture

Scale picture from given point in positive Y direction by given factor.

Rendering

render :: Context -> Picture -> IO ()

Render picture with given NanoVG context.

Rendering as Window

asWindow :: IO Picture -> Window ()

Create Window which constantly queries and renders received picture.