Как нарисовать путь касаниями по определенному пути, используя SKShapeNode в SpriteKit - PullRequest
Новая
       86

Как нарисовать путь касаниями по определенному пути, используя SKShapeNode в SpriteKit

0 голосов
/ 24 ноября 2018
  1. Я создаю путь, используя UIBezierPath, затем из этого пути я создаю SKShapeNode.
  2. Я хочу, чтобы пользователь рисовал этот путь по его прикосновениям на экране в соответствии с моим исходным путем.

это код:

import SpriteKit import 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()
            }
        }
    }
}

этот код должен заставить пользователя рисовать "только "на моем пути, как я показываю на картинке:

enter image description here

но проблема в том, что когда я пишу код, я обнаружил, что могу нарисоватьлиния вне пути, на самом деле это выглядит как квадрат, а не просто путь, как я показываю на картинках:

enter image description here enter image description here enter image description here

Так что, пожалуйста, кто-нибудь может объяснить мне правильный способ заставить пользователя рисовать только мой путь, и если он выберет путь, он ничего не сможет нарисовать.

1 Ответ

0 голосов
/ 24 ноября 2018

Вы можете определить путь, по которому пользователю разрешено рисовать, например, см. Зеленый путь здесь:

clip path

Затем закрепите этот путь: 

self.currentBezierPath.addClip()

Подробнее об этом подходе см. В моем ответе здесь: Как рисовать внутри черных краев в iOS SDK с OpenGL ES?

Убедитесь, что пользователь следует по пути в одном направлении

Вы можете разделить область, например, на маленькие прямоугольники и сохранить их по порядку в массив, см. Рисунок здесь:

divide path into areas

Затем убедитесь, что пользователь начинает с прикосновения к прямоугольникам (показано на рисунке красным цветом) только в порядке возрастания, и что пользователь не покидает внешнюю границу (показано зеленым цветом виллюстрация).

Чтобы проверить, находится ли точка внутри пути, можно использовать следующее: 

    let inside = bezierPath.contains(point)

Это решит ваш вариант использования?

...