Fork of Pixie for nimskull and with extra features
Go to file
treeform 154f227957
Merge pull request #144 from guzba/master
blur and spread speedup + fix
2021-02-26 22:54:51 -08:00
.github/workflows Initial commit 2020-11-19 18:41:32 -08:00
docs 1.0.2 2021-02-26 19:24:40 -06:00
examples spread optimization + spread and blur bugfix 2021-02-27 00:36:35 -06:00
experiments migrate public api to rgbx 2021-02-25 18:11:58 -06:00
src spread optimization + spread and blur bugfix 2021-02-27 00:36:35 -06:00
tests spread optimization + spread and blur bugfix 2021-02-27 00:36:35 -06:00
tools Add gradient and tiled example. 2021-02-25 08:57:49 -08:00
.gitignore ignore dll 2020-12-09 23:49:00 -06:00
LICENSE First commit 2020-11-19 18:45:26 -08:00
pixie.nimble 1.0.2 2021-02-26 19:24:40 -06:00
README.md version 1.0.0 2021-02-25 19:09:30 -06:00

Pixie - A full-featured 2D graphics library for Nim

Pixie is a 2D graphics library similar to Cairo and Skia written (almost) entirely in Nim.

This library is being actively developed and we'd be happy for you to use it.

nimble install pixie

Features:

  • Drawing paths, shapes and curves with even-odd and non-zero windings.
  • Pixel-perfect AA quality.
  • Supported file formats are PNG, BMP, JPG, SVG + more in development.
  • Strokes with joins and caps.
  • Shadows, glows and blurs.
  • Complex masking: Subtract, Intersect, Exclude.
  • Complex blends: Darken, Multiply, Color Dodge, Hue, Luminosity... etc.

Documentation

API reference: https://treeform.github.io/pixie/pixie.html

File formats

Format Read Write
PNG
JPEG
BMP
SVG

Joins and caps

Supported Caps:

  • Butt
  • Round
  • Square

Supported Joins:

  • Miter (with miter angle limit)
  • Bevel
  • Round

Blending & masking

Supported Blend Modes:

  • Normal
  • Darken
  • Multiply
  • ColorBurn
  • Lighten
  • Screen
  • Color Dodge
  • Overlay
  • Soft Light
  • Hard Light
  • Difference
  • Exclusion
  • Hue
  • Saturation
  • Color
  • Luminosity

Supported Mask Modes:

  • Mask
  • Overwrite
  • Subtract Mask
  • Intersect Mask
  • Exclude Mask

SVG style paths:

Format Supported Description
M,m move to
L,l line to
h,h horizontal line to
V,v vertical line to
C,c,S,s cublic to
Q,q,T,t quadratic to
A,a arc to
z close path

Testing

nimble test

Examples

Square

examples/square.nim

let
  pos = vec2(50, 50)
  wh = vec2(100, 100)

image.fillRect(rect(pos, wh), rgba(255, 0, 0, 255))

example output

Line

examples/line.nim

let
  start = vec2(25, 25)
  stop = vec2(175, 175)
  color = parseHtmlColor("#FF5C00").rgba

image.strokeSegment(segment(start, stop), color, strokeWidth = 10)

example output

Rounded rectangle

examples/rounded_rectangle.nim

let
  pos = vec2(50, 50)
  wh = vec2(100, 100)
  r = 25.0

image.fillRoundedRect(rect(pos, wh), r, rgba(0, 255, 0, 255))

example output

Heart

examples/heart.nim

image.fillPath(
  """
    M 20 60
    A 40 40 90 0 1 100 60
    A 40 40 90 0 1 180 60
    Q 180 120 100 180
    Q 20 120 20 60
    z
  """,
  parseHtmlColor("#FC427B").rgba
)

example output

Masking

examples/masking.nim

lines.strokeSegment(
  segment(vec2(25, 25), vec2(175, 175)), color, strokeWidth = 30)
lines.strokeSegment(
  segment(vec2(25, 175), vec2(175, 25)), color, strokeWidth = 30)

mask.fillPath(
  """
    M 20 60
    A 40 40 90 0 1 100 60
    A 40 40 90 0 1 180 60
    Q 180 120 100 180
    Q 20 120 20 60
    z
  """
)
lines.draw(mask)
image.draw(lines)

example output

Gradient

examples/gradient.nim

let paint = Paint(
  kind: pkGradientRadial,
  gradientHandlePositions: @[
    vec2(100, 100),
    vec2(200, 100),
    vec2(100, 200)
  ],
  gradientStops: @[
    ColorStop(color: rgba(255, 0, 0, 255), position: 0),
    ColorStop(color: rgba(255, 0, 0, 40), position: 1.0),
  ]
)

image.fillPath(
  """
    M 20 60
    A 40 40 90 0 1 100 60
    A 40 40 90 0 1 180 60
    Q 180 120 100 180
    Q 20 120 20 60
    z
  """,
  paint
)

example output

Image tiled

examples/image_tiled.nim

var path: Path
path.polygon(
  vec2(100, 100),
  70,
  sides = 8
)
image.fillPath(
  path,
  Paint(
    kind: pkImageTiled,
    image: readImage("tests/images/png/baboon.png"),
    imageMat: scale(vec2(0.08, 0.08))
  )
)

example output

Shadow

examples/shadow.nim

let polygonImage = newImage(200, 200)
polygonImage.fillPolygon(
  vec2(100, 100),
  70,
  sides = 8,
  rgba(255, 255, 255, 255)
)

let shadow = polygonImage.shadow(
  offset = vec2(2, 2),
  spread = 2,
  blur = 10,
  color = rgba(0, 0, 0, 200)
)

image.draw(shadow)
image.draw(polygonImage)

example output

Blur

examples/blur.nim

let mask = newMask(200, 200)
mask.fillPolygon(vec2(100, 100), 70, sides = 6)

blur.blur(20)
blur.draw(mask, blendMode = bmMask)

image.draw(trees)
image.draw(blur)

example output

Tiger

examples/tiger.nim

let tiger = readImage("examples/data/tiger.svg")

image.draw(
  tiger,
  translate(vec2(100, 100)) *
  scale(vec2(0.2, 0.2)) *
  translate(vec2(-450, -450))
)

example output