ios - 绘制像素化线

Question

我正在尝试绘制看起来像这种风格的“像素化”或“矢量化”线条:



理想情况下，我试图通过 CAShapeLayer 之类的东西绘制路径，并将路径像素化为这种风格。它不需要像实际 Assets 那样看起来 super 棒，但它需要遵循一般风格。我已经尝试了几种方法，并且非常接近，结果在这里是正确的:


我现在唯一的问题是消除应用于我尝试这样做的方式的模糊。我需要将我的结果像素化但仍然非常清晰，这是我最近用来获得上述效果的方法:

let path = UIBezierPath(roundedRect: bounds, cornerRadius: 20)
let lay = CAShapeLayer()
lay.path = path.cgPath
lay.strokeColor = UIColor.green_bright.cgColor
lay.lineWidth = 5
lay.fillColor = nil
lay.shouldRasterize = true
lay.rasterizationScale = 0.1
layer.addSublayer(lay)

我也尝试使用 CIPixellate 之类的 CIFilter，但无法弄清楚如何以任何方式将这样的过滤器应用于 CAShapeLayer 或路径。

有没有办法清理这种方法或任何其他方式来实现这种效果？感谢所有反馈或想法。

更新:我试图通过将我的图层变成图像并应用 CIFilter 来使用过滤器，这是我尝试失败的方式:

extension CAShapeLayer {
    func apply(_ filter: String) -> UIImage? {
        let context = CIContext(options: nil)
        let renderer = UIGraphicsImageRenderer(size: frame.size)
        if let currentFilter = CIFilter(name: filter) {
            let image = renderer.image { context in
                render(in: context.cgContext)
            }
            let beginImage = CIImage(image: image)
            currentFilter.setValue(beginImage, forKey: kCIInputImageKey)

            if let output = currentFilter.outputImage {
                if let cgimg = context.createCGImage(output, from: output.extent) {
                    return UIImage(cgImage: cgimg)
                }
            }
        }
        return nil
    }
}

Answer 1

如果这就是你的意思...



...那么我认为您使用 CIPixellate CIFilter 的想法是正确的，因为这就是我获得该图像的方式。步骤是:

使用形状图层构建您的形状，基本上就像您已经在做的那样。

制作图形图像上下文并将形状图层渲染到其中。现在你已经从形状层制作了一个 UIImage。

将 UIImage 制作成 CIImage 并将其通过 CIPixellate 过滤器。

再次制作图形图像上下文；在过滤器的 CIImage 输出周围包裹一个 UIImage 并将其绘制到图像上下文中。现在您已将过滤器输出渲染为新的像素化 UIImage。

显示生成的 UIImage。