Radial Gradient

Author: swhitty

Examples/Sources/ViewController.swift

@@ -65,7 +65,7 @@ class ViewController: UIViewController {
 
     override func loadView() {
         let imageView = UIImageView(frame: UIScreen.main.bounds)
-        imageView.image = Image(named: "gradient-radial.svg", in: .samples)?.rasterize()
+        imageView.image = Image(named: "mouth-open.svg", in: .samples)?.rasterize()
         imageView.contentMode = .scaleAspectFit
         imageView.backgroundColor = .white
         self.view = imageView

Samples/avocado.svg

@@ -262,10 +262,10 @@ extension LayerTree.Builder {
 
         return LayerTree.RadialGradient(
             gradient: gradient,
-            center: LayerTree.Point(element.cx ?? 0.5, element.cy ?? 0.5),
-            radius: LayerTree.Float(element.r ?? 0.5),
-            endCenter: LayerTree.Point(element.fx ?? 0.5, element.fy ?? 0.5),
-            endRadius: LayerTree.Float(element.fr ?? 0.5)
+            center: LayerTree.Point(element.fx ?? element.cx ?? 0.5, element.fy ?? element.cy ?? 0.5),
+            radius: LayerTree.Float(element.fr ?? 0),
+            endCenter: LayerTree.Point(element.cx ?? 0.5, element.cy ?? 0.5),
+            endRadius: LayerTree.Float(element.r ?? 0.5)
         )
     }
 

Samples/mouth-open.svg

@@ -216,7 +216,7 @@ extension LayerTree {
                 let end = provider.createPoint(from: pathEnd)
 
                 if !fillGradient.transform.isEmpty {
-                    //commands.append(contentsOf: renderCommands(forTransforms: fillGradient.transform))
+                    commands.append(contentsOf: renderCommands(forTransforms: fillGradient.transform))
                 }
 
                 let apha = provider.createFloat(from: fill.opacity)
@@ -227,21 +227,47 @@ extension LayerTree {
                 commands.append(.pushState)
                 commands.append(.setClip(path: path))
 
-                let converted = apply(colorConverter: colorConverter, to: fillGradient.gradient)
-                let gradient = provider.createGradient(from: converted)
-                let pathBounds = provider.getBounds(from: shape)
-                let center = provider.createPoint(from: pathBounds.center)
-                let x = (pathBounds.center.x - pathBounds.origin.x)
-                let y = (pathBounds.center.y - pathBounds.origin.y)
-                let radius = provider.createFloat(from: sqrt(x*x+y*y))
+                let startCenter: LayerTree.Point
+                let startRadius: LayerTree.Float
+                let endCenter: LayerTree.Point
+                let endRadius: LayerTree.Float
+
+                switch fillGradient.gradient.units  {
+                case .objectBoundingBox:
+                    let pathBounds = provider.getBounds(from: shape)
+                    let h = sqrt((pathBounds.width*pathBounds.width) + (pathBounds.height*pathBounds.height))
+                    startCenter = LayerTree.Point(
+                        pathBounds.x + (fillGradient.center.x * pathBounds.width),
+                        pathBounds.y + (fillGradient.center.y * pathBounds.height)
+                    )
+                    startRadius = h * fillGradient.radius
+                    endCenter = LayerTree.Point(
+                        pathBounds.x + (fillGradient.endCenter.x * pathBounds.width),
+                        pathBounds.y + (fillGradient.endCenter.y * pathBounds.height)
+                    )
+                    endRadius = h * fillGradient.endRadius
+                case .userSpaceOnUse:
+                    startCenter = fillGradient.center
+                    startRadius = fillGradient.radius
+                    endCenter = fillGradient.endCenter
+                    endRadius = fillGradient.endRadius
+                }
 
                 if !fillGradient.gradient.transform.isEmpty {
-                   // commands.append(contentsOf: renderCommands(forTransforms: fillGradient.transform))
+                    commands.append(contentsOf: renderCommands(forTransforms: fillGradient.gradient.transform))
                 }
 
+                let converted = apply(colorConverter: colorConverter, to: fillGradient.gradient)
+                let gradient = provider.createGradient(from: converted)
                 let apha = provider.createFloat(from: fill.opacity)
                 commands.append(.setAlpha(apha))
-                commands.append(.drawRadialGradient(gradient, center: center, radius: radius))
+                commands.append(.drawRadialGradient(
+                    gradient,
+                    startCenter: provider.createPoint(from: startCenter),
+                    startRadius: provider.createFloat(from: startRadius),
+                    endCenter: provider.createPoint(from: endCenter),
+                    endRadius: provider.createFloat(from: endRadius)
+                ))
                 commands.append(.popState)
             }
 

SwiftDraw/LayerTree.Builder.swift

@@ -520,14 +520,14 @@ public final class CGTextRenderer: Renderer {
     """)
   }
 
-  func draw(radial gradient: LayerTree.Gradient, at center: String, radius: LayerTree.Float) {
+  func draw(radial gradient: LayerTree.Gradient, startCenter: String, startRadius: LayerTree.Float, endCenter: String, endRadius: LayerTree.Float) {
     let identifier = createOrGetGradient(gradient)
     lines.append("""
-    ctx.drawLinearGradient(\(identifier),
-                           startCenter: \(center),
-                           startRadius: 0,
-                           endCenter: \(center),
-                           endRadius: radius,
+    ctx.drawRadialGradient(\(identifier),
+                           startCenter: \(startCenter),
+                           startRadius: \(startRadius),
+                           endCenter: \(endCenter),
+                           endRadius: \(endRadius),
                            options: [.drawsAfterEndLocation, .drawsBeforeStartLocation])
     """)
   }