为什么 SKShapeNode 会撕裂？

Question

As a user traces along a line, a SKShapeNode path is built from line segments (which come from underlying 'tiles'). The actual path is built by locking in lines the user has previously dragged over, and finding the closest point on the closest line to the latest touch point, then building a path like so:

var activatedPointPath: UIBezierPath {
    let activatedPointPath = UIBezierPath()

    // self.state.activatedPoints contains the end point
    // of each full line segment the user has traced through
    if let firstActivatedPoint = self.state.activatedPoints.first {
        activatedPointPath.move(to: firstActivatedPoint)
        for activatedPoint in self.state.activatedPoints {
            activatedPointPath.addLine(to: activatedPoint)
        }
        // self.state.endOfLine contains the last point the user
        // has touched, which may or may not be at the end of a line
        // segment
        if let lastPoint = self.state.endOfLine {
            activatedPointPath.addLine(to: lastPoint)
        }
    }

    return activatedPointPath
}

this is then assigned to the SKShapeNode as:

self.lineNode.path = self.activatedPointPath.cgPath

however when the user is tracing the line, previous segments flicker with triangles missing while being drawn to the screen, like so:

The images above are from a simple 3x3 tile grid allowing the user to trace a simple straight line:

Here is a more complex example, where the line starts on the bottom left and ends at the top right:

What could be causing these artifacts?

edit while I have found a solution to this issue, I would still welcome any explanation for why the original code didn't work and the new code does.

Answer 1

My fix for this issue was to change the activatedPointPath calculated variable to build the line out of segments combined together, rather than drawing the line in one pass.

The new code looked like this:

var previousPoint = firstActivatedPoint
for activatedPoint in self.state.activatedPoints {
    let newSegment = UIBezierPath()
    newSegment.move(to: previousPoint)
    newSegment.addLine(to: activatedPoint)

    activatedPointPath.append(newSegment)

    previousPoint = activatedPoint
}
if let lastPoint = self.state.endOfLine {
    let newSegment = UIBezierPath()
    newSegment.move(to: previousPoint)
    newSegment.addLine(to: lastPoint)
    activatedPointPath.append(newSegment)
} else {
    print("No last point")
}

which now produces smooth lines.