2017年12月21日木曜日

SpriteKit + Swift3 で touchesMoved を使ってタッチの軌跡を描く方法

概要

タッチした状態で画面上を指で動かしたときにその軌跡を描画する方法を紹介します

環境

  • macOS X 10.13.2
  • Xcode 9.2 (9C40b)

コード

var firstPoint: CGPoint?
var lineNode = SKShapeNode()
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    let touch = touches.first!
    firstPoint = touch.location(in: self)
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    let touch = touches.first!
    let position = touch.location(in: self)
    lineNode.removeFromParent()
    let path = CGMutablePath()
    path.move(to: firstPoint!)
    path.addLine(to: position)
    lineNode.path = path
    lineNode.lineWidth = 10.0
    lineNode.strokeColor = UIColor.blue
    lineNode.fillColor = UIColor.red
    self.addChild(lineNode)
    firstPoint = position
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    lineNode.removeFromParent()
}

touchesBegan で描画開始の位置を取得します
touchesMoved 中に開始位置の座標と移動先の座標を使って線を引いています
実体は SKShapeNode でその path プロパティを与えて上げることで 2 点間の間に線を引くことができます

touchesEnded でタッチが終了したときに描画した軌跡を削除します

動作確認

こんな感じで動作します
spritekit_draw_path1.gif

今回の場合一瞬しか軌跡が描かれません
操作を速くすると線が伸びます

addChild と removeFromParent をする位置を工夫すればペイントツールのように線を描くこともできると思います

0 件のコメント:

コメントを投稿