svg more basic shapes, more transforms

src/pixie/fileformats/svg.nim

@@ -49,22 +49,42 @@ proc decodeCtx(inherited: Ctx, node: XmlNode): Ctx =
   if transform == "":
     discard # Inherit
   else:
-    if transform.startsWith("matrix("):
-      let arr = transform[7..^2].split(",")
-      if arr.len != 6:
-        failInvalid()
-      var m = mat3()
-      m[0] = parseFloat(arr[0])
-      m[1] = parseFloat(arr[1])
-      m[3] = parseFloat(arr[2])
-      m[4] = parseFloat(arr[3])
-      m[6] = parseFloat(arr[4])
-      m[7] = parseFloat(arr[5])
-      result.transform = result.transform * m
-    else:
+    template failInvalidTransform(transform: string) =
       raise newException(
-        PixieError, "Unsupported SVG transform: " & transform & "."
-      )
+          PixieError, "Unsupported SVG transform: " & transform & "."
+        )
+
+    var remaining = transform
+    while remaining.len > 0:
+      let index = remaining.find(")")
+      if index == -1:
+        failInvalidTransform(transform)
+      let f = remaining[0 .. index].strip()
+      remaining = remaining[index + 1 .. ^1]
+
+      if f.startsWith("matrix("):
+        let arr = f[7 .. ^2].split(",")
+        if arr.len != 6:
+          failInvalidTransform(transform)
+        var m = mat3()
+        m[0] = parseFloat(arr[0])
+        m[1] = parseFloat(arr[1])
+        m[3] = parseFloat(arr[2])
+        m[4] = parseFloat(arr[3])
+        m[6] = parseFloat(arr[4])
+        m[7] = parseFloat(arr[5])
+        result.transform = result.transform * m
+      elif f.startsWith("translate("):
+        let
+          components = f[10 .. ^2].split(" ")
+          tx = parseFloat(components[0])
+          ty = parseFloat(components[1])
+        result.transform = result.transform * translate(vec2(tx, ty))
+      elif f.startsWith("rotate("):
+        let angle = parseFloat(f[7 .. ^2]) * -PI / 180
+        result.transform = result.transform * rotationMat3(angle)
+      else:
+        failInvalidTransform(transform)
 
 proc draw(
   img: Image, node: XmlNode, ctxStack: var seq[Ctx]
@@ -99,6 +119,53 @@ proc draw(
       )
       img.draw(strokeImg, bounds.xy)
 
+  of "line":
+    let
+      ctx = decodeCtx(ctxStack[^1], node)
+      x1 = parseFloat(node.attr("x1"))
+      y1 = parseFloat(node.attr("y1"))
+      x2 = parseFloat(node.attr("x2"))
+      y2 = parseFloat(node.attr("y2"))
+
+    let path = newPath()
+    path.moveTo(x1, y1)
+    path.lineTo(x2, y2)
+    path.closePath()
+
+    if ctx.fill != ColorRGBA():
+      img.fillPath(path, ctx.fill, ctx.transform)
+    if ctx.stroke != ColorRGBA() and ctx.strokeWidth > 0:
+      img.strokePath(path, ctx.stroke, ctx.strokeWidth, ctx.transform)
+
+  of "polyline", "polygon":
+    let
+      ctx = decodeCtx(ctxStack[^1], node)
+      points = node.attr("points")
+
+    var vecs: seq[Vec2]
+    for pair in points.split(" "):
+      let parts = pair.split(",")
+      if parts.len != 2:
+        failInvalid()
+      vecs.add(vec2(parseFloat(parts[0]), parseFloat(parts[1])))
+
+    if vecs.len == 0:
+      failInvalid()
+
+    let path = newPath()
+    path.moveTo(vecs[0])
+    for i in 1 ..< vecs.len:
+      path.lineTo(vecs[i])
+
+    # The difference between polyline and polygon is whether we close the path
+    if node.tag == "polygon":
+      path.closePath()
+
+    if ctx.fill != ColorRGBA():
+      img.fillPath(path, ctx.fill, ctx.transform)
+    if ctx.stroke != ColorRGBA() and ctx.strokeWidth > 0:
+      img.strokePath(path, ctx.stroke, ctx.strokeWidth, ctx.transform)
+
   of "rect":
     let
       ctx = decodeCtx(ctxStack[^1], node)
@@ -106,12 +173,14 @@ proc draw(
       y = parseFloat(node.attr("y"))
       width = parseFloat(node.attr("width"))
       height = parseFloat(node.attr("height"))
-      path = newPath()
+
+    let path = newPath()
     path.moveTo(x, y)
-    path.lineTo(x + width, x)
+    path.lineTo(x + width, y)
     path.lineTo(x + width, y + height)
     path.lineTo(x, y + height)
     path.closePath()
+
     if ctx.fill != ColorRGBA():
       img.fillPath(path, ctx.fill, ctx.transform)
     if ctx.stroke != ColorRGBA() and ctx.strokeWidth > 0:
@@ -126,13 +195,15 @@ proc draw(
       cy = parseFloat(node.attr("cy"))
       r = parseFloat(node.attr("r"))
       magic = (4.0 * (-1.0 + sqrt(2.0)) / 3) * r
-      path = newPath()
+
+    let path = newPath()
     path.moveTo(cx + r, cy)
     path.bezierCurveTo(cx + r, cy + magic, cx + magic, cy + r, cx, cy + r)
     path.bezierCurveTo(cx - magic, cy + r, cx - r, cy + magic, cx - r, cy)
     path.bezierCurveTo(cx - r, cy - magic, cx - magic, cy - r, cx, cy - r)
     path.bezierCurveTo(cx + magic, cy - r, cx + r, cy - magic, cx + r, cy)
     path.closePath()
+
     let d = $path
     if ctx.fill != ColorRGBA():
       let (bounds, fillImg) = fillPathBounds(d, ctx.fill, ctx.transform)

src/pixie/paths.nim

@@ -828,11 +828,17 @@ proc moveTo*(path: Path, x, y: float32) =
   path.commands.add PathCommand(kind: Move, numbers: @[x, y])
   path.at = vec2(x, y)
 
+proc moveTo*(path: Path, pos: Vec2) =
+  path.moveTo(pos.x, pos.y)
+
 proc lineTo*(path: Path, x, y: float32) =
   ## Connects the last point in the subpath to the (x, y) coordinates with a straight line.
   path.commands.add PathCommand(kind: Line, numbers: @[x, y])
   path.at = vec2(x, y)
 
+proc lineTo*(path: Path, pos: Vec2) =
+  path.lineTo(pos.x, pos.y)
+
 proc bezierCurveTo*(path: Path, x1, y1, x2, y2, x3, y3: float32) =
   ## Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using moveTo() before creating the Bézier curve.
   path.commands.add(PathCommand(kind: Cubic, numbers: @[

tests/images/svg/circle01.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <desc>Example circle01 - circle filled with red and stroked with blue</desc>
+
+  <!-- Show outline of viewport using 'rect' element -->
+  <rect x="1" y="1" width="1198" height="398"
+        fill="none" stroke="blue" stroke-width="2"/>
+
+  <circle cx="600" cy="200" r="100"
+        fill="red" stroke="blue" stroke-width="10"  />
+</svg>
+

tests/images/svg/line01.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <desc>Example line01 - lines expressed in user coordinates</desc>
+
+  <!-- Show outline of viewport using 'rect' element -->
+  <rect x="1" y="1" width="1198" height="398"
+        fill="none" stroke="blue" stroke-width="2" />
+
+  <g stroke="green" >
+    <line x1="100" y1="300" x2="300" y2="100"
+            stroke-width="5"  />
+    <line x1="300" y1="300" x2="500" y2="100"
+            stroke-width="10"  />
+    <line x1="500" y1="300" x2="700" y2="100"
+            stroke-width="15"  />
+    <line x1="700" y1="300" x2="900" y2="100"
+            stroke-width="20"  />
+    <line x1="900" y1="300" x2="1100" y2="100"
+            stroke-width="25"  />
+  </g>
+</svg>
+

tests/images/svg/polygon01.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <desc>Example polygon01 - star and hexagon</desc>
+
+  <!-- Show outline of viewport using 'rect' element -->
+  <rect x="1" y="1" width="1198" height="398"
+        fill="none" stroke="blue" stroke-width="2" />
+
+  <polygon fill="red" stroke="blue" stroke-width="10" 
+            points="350,75  379,161 469,161 397,215
+                    423,301 350,250 277,301 303,215
+                    231,161 321,161" />
+  <polygon fill="lime" stroke="blue" stroke-width="10" 
+            points="850,75  958,137.5 958,262.5
+                    850,325 742,262.6 742,137.5" />
+</svg>
+

tests/images/svg/polyline01.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <desc>Example polyline01 - increasingly larger bars</desc>
+
+  <!-- Show outline of viewport using 'rect' element -->
+  <rect x="1" y="1" width="1198" height="398"
+        fill="none" stroke="blue" stroke-width="2" />
+
+  <polyline fill="none" stroke="blue" stroke-width="10" 
+            points="50,375
+                    150,375 150,325 250,325 250,375
+                    350,375 350,250 450,250 450,375
+                    550,375 550,175 650,175 650,375
+                    750,375 750,100 850,100 850,375
+                    950,375 950,25 1050,25 1050,375
+                    1150,375" />
+</svg>
+

tests/images/svg/rect01.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <desc>Example rect01 - rectangle with sharp corners</desc>
+
+  <!-- Show outline of viewport using 'rect' element -->
+  <rect x="1" y="1" width="1198" height="398"
+        fill="none" stroke="blue" stroke-width="2"/>
+
+  <rect x="400" y="100" width="400" height="200"
+        fill="yellow" stroke="navy" stroke-width="10"  />
+</svg>
+

tests/images/svg/rect02.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" standalone="no"?>
+<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
+     xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <desc>Example rect02 - rounded rectangles</desc>
+
+  <!-- Show outline of viewport using 'rect' element -->
+  <rect x="1" y="1" width="1198" height="398"
+        fill="none" stroke="blue" stroke-width="2"/>
+
+  <rect x="100" y="100" width="400" height="200" rx="50"
+        fill="green" />
+
+  <g transform="translate(700 210) rotate(-30)">
+    <rect x="0" y="0" width="400" height="200" rx="50"
+          fill="none" stroke="purple" stroke-width="30" />
+  </g>
+</svg>

tests/test_svg.nim

@@ -1,6 +1,12 @@
 import pixie/fileformats/svg, pixie, strformat
 
 const files = [
+  "line01",
+  "polyline01",
+  "polygon01",
+  "rect01",
+  "rect02",
+  "circle01",
   "triangle01",
   "quad01",
   "Ghostscript_Tiger"