ios - CGPathCreateMutableCopy/BezierPath 不填充原始内容

Question

我想要完成什么this demo does但对于iOS。本质上，描边一条路径并在描边时填充它，没有闭合线。

我现在的方法是在 touchesMoved 上，将 CGPath 变量移动到前一个点，并划一条线到当前点。然后，调用 setNeedsDisplay ，其中我这样做:

override func drawRect(rect: CGRect) {
    guard let strokePath = self.strokePath else {
        return
    }
    if let firstPoint = self.points.value.first {
        let context = UIGraphicsGetCurrentContext()

        // 1.
        CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor)
        CGContextSetFillColorWithColor(context, self.fillColor.CGColor)
        CGContextSetLineCap(context, .Round)
        CGContextSetLineWidth(context, self.lineWidth)

        // 2.
        let path = UIBezierPath(CGPath: strokePath)

        // 3.
        path.addLineToPoint(firstPoint)

        // 4.
        CGContextAddPath(context, path.CGPath)
        CGContextDrawPath(context, .EOFill)
        CGContextAddPath(context, strokePath)
        CGContextDrawPath(context, .Stroke)

    }
}

1. 我设置了所有路径属性，例如线宽、线帽等
2. 我从原始描边路径创建贝塞尔曲线路径
3. 我添加一条线回到第一个点
4. 我将两条路径添加到上下文中，并绘制它们填充一条路径并抚摸另一条路径。

描边路径按照我想要的方式描边，但复制的路径仅从原始路径中的最后一个点填充到我也添加线条的第一个点。我想要的是它填充整个东西，包括复制路径中的所有点。如果我手动构建新路径(用户绘制的时间越长，效率就会变得非常低)，如下所示:

let path = UIBezierPath()
path.moveToPoint(firstPoint)
for point in self.points.value {
    path.addLineToPoint(point)
}
path.addLineToPoint(firstPoint)

路径填写正确，如下所示:

这正是我想要达到的效果。但是我不明白为什么复制路径然后添加最后一个点只会描画新添加的内容，而不是整个路径。我已经尝试使用 UIBezierPath 和使用 CGPathCreateMutableCopy 但没有运气。

Answer 1

除非我遗漏了什么，否则看起来你已经让事情变得比应有的更复杂了。

此类允许我以与您链接的视频相匹配的方式在 View 上绘图，并允许进行与您的示例相匹配的绘图。

class SDDFilledSketchView: UIView {

    var panRecognizer: UIPanGestureRecognizer? = nil
    var tracePath: UIBezierPath? = nil

    override func awakeFromNib() {
        panRecognizer = UIPanGestureRecognizer.init(target: self, action:"handlePan:")
        if (panRecognizer != nil) {
            self.addGestureRecognizer(panRecognizer!)
        }
    }

    func handlePan(recognizer: UIPanGestureRecognizer) {
        let touchPoint = recognizer.locationInView(self)

        if recognizer.state == .Began {
            tracePath = UIBezierPath.init()
            tracePath?.lineWidth = 5
            tracePath?.lineCapStyle = .Round
            tracePath?.moveToPoint(touchPoint)
        } else {
            tracePath?.addLineToPoint(touchPoint)
        }
        recognizer.setTranslation(CGPointZero, inView: self)

        self.setNeedsDisplay()
    }

    override func drawRect(rect: CGRect) {
        // Drawing code
        let context = UIGraphicsGetCurrentContext()
        CGContextSetFillColorWithColor(context, UIColor.cyanColor().CGColor)
        CGContextSetStrokeColorWithColor(context, UIColor.redColor().CGColor)
        if tracePath != nil {
            tracePath?.fill()
            tracePath?.stroke()
        }
    }

}

这会将用户的路径存储在 UIBezierPath 中，而无需在运行时重新创建它，它只会在用户移动手指时向路径添加一条线，并让 drawRect 进行填充和描边。