绘制像素化线条

Question

我正在尝试绘制看起来像这种风格的 "pixelated" 或 "vectorized" 线条：

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

我现在遇到的唯一问题是删除应用到我尝试执行此操作的方式的模糊。我需要我的结果被像素化但仍然非常清晰，这是我最近用来获得上述效果的方法：

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 过滤器。
再次制作图形图像上下文；将 UIImage 包裹在过滤器输出的 CIImage 周围，并将其绘制到图像上下文中。现在您已将滤镜输出渲染为新的像素化 UIImage。
显示生成的 UIImage。

绘制像素化线条

Drawing pixelated lines

ios

uikit

core-graphics

uibezierpath

cashapelayer