带有渐变的 CoreGraphice 描边文本

问题描述

CGContextSetTextDrawingMode 的帮助下,我们能够绘制带边框的文本。我们如何用画笔(渐变/图片)而不是纯色填充边框?

在 Apple Docs 上找不到。

解决方法

  • 通过使用 context.addPath(path) ,然后使用 context.clip(to: pathFrame)

然后你可以使用context.drawLinearGradient

  • 为了不产生副作用,

记得使用context.saveGState()context.restoreGState()


这是iOS版本的示例,

您应该将其编辑为 MacOS 版本

class CustomV: UIView{
     override func draw(_ rect: CGRect) {
       
        // Create a gradient from white to red
        let colors: [CGFloat] = [
            1.0,1.0,0.0,1.0]
        let baseSpace = CGColorSpaceCreateDeviceRGB()
        guard let context = UIGraphicsGetCurrentContext(),let gradient =
                CGGradient(colorSpace: baseSpace,colorComponents: colors,locations: nil,count: 2) else{ return }
        
        context.saveGState()
        let offset: CGFloat = 10
        let startPoint = CGPoint(x: rect.maxX - offset,y: rect.minY)
        let endPoint = CGPoint(x: rect.maxX - offset,y: rect.maxY)
        let p = CGMutablePath()
        p.move(to: startPoint)
        p.addLine(to: endPoint)
        context.addPath(p)
        context.clip(to: CGRect(origin: startPoint,size: CGSize(width: 3,height: 800)))
        context.setLineWidth(offset)
        
        context.drawLinearGradient(gradient,start: startPoint,end: endPoint,options: [])
        context.restoreGState()

    }
}