如何在 SpriteKit 中使用 SKShapeNode 通过触摸特定路径来绘制路径

Question

1. 我使用 UIBezierPath 创建一个路径，然后从该路径创建一个 SKShapeNode。
2. 我希望用户通过触摸屏幕来绘制相同的路径以匹配我的原始路径。

这是代码：

导入 SpriteKit 导入 GameplayKit

类 GameScene：SKScene {

var orginalPath: UIBezierPath!

var orgialShape: SKShapeNode!
var userTouchs = [CGPoint]()
var drawingLine: SKShapeNode!


override func didMove(to view: SKView) {

    orginalPath = UIBezierPath()
    orginalPath.move(to: CGPoint(x: 170, y: 230))
    orginalPath.addLine(to: CGPoint(x: 370, y: 230))
    orginalPath.addQuadCurve(to: CGPoint(x: 480, y: 55), controlPoint: CGPoint(x: 525, y: 150))


    orgialShape = SKShapeNode(path: orginalPath.cgPath)
    orgialShape.strokeColor = UIColor.white
    orgialShape.lineWidth = 30
    orgialShape.lineCap = .round
    orgialShape.lineJoin = .round
    orgialShape.zPosition = 0
    orgialShape.name = "orginal"
    addChild(orgialShape)

}

func createLine() {
    if userTouchs.count > 2 {
        let line = SKShapeNode(points: &userTouchs, count: userTouchs.count)
        line.strokeColor = UIColor.red
        line.lineWidth = 10
        line.lineCap = .round
        line.zPosition = 10
        line.isAntialiased = true
        line.name = "newLine"
        addChild(line)

    }
}


override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        let location = touch.location(in: self)
        let objects = nodes(at: location)
        for object in objects {
            if object.name == "orginal" {
                    userTouchs.append(location)
            }
        }
    }
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        let location = touch.location(in: self)
        let objects = nodes(at: location)
        for object in objects {
            if object.name == "orginal" {
                    print(location)
                    userTouchs.append(location)
                    createLine()
            }
        }
    }
}

这段代码应该让用户“只”在我的路径上绘制，就像我在图片中显示的那样：

但问题是，当我编写代码时，我发现我可以在路径外画一条线，实际上它看起来像一个正方形，而不仅仅是我在图片中显示的路径：

所以请任何人向我解释让用户只在我的路径上绘制的正确方法，如果他触摸了路径，他就无法绘制任何东西。

Answer 1

您可以定义允许用户绘制的路径，例如在此处查看绿色路径：

然后剪辑到这个路径：

self.currentBezierPath.addClip()

在我的回答中查看此方法的更多详细信息：How to draw inside the black edges in iOS SDK with OpenGL ES?

确保用户沿一个方向跟随路径

您可以划分区域，例如成小矩形并将它们按顺序存储到数组中，请参见此处的草图：

然后确保用户从仅按升序触摸矩形（图中以红色显示）开始，并且用户不会离开外边界（在图中以绿色显示）。

要检查一个点是否在路径内，可以使用以下方法：

    let inside = bezierPath.contains(point)

这会解决您的用例吗？