swiftで線分を描写して、ドラッグで移動したい

Question

swiftで線分を以下のコードで表示させて、ドラッグした位置へ移動させようとしているのですが、移動前の線分が消えずに残ってしまいます。
円も同時に描写して、ドラッグで移動させようとすると、移動前の円は残らなかったです

どうかご教授ください

//線分
 horizonalLine.strokeColor = UIColor.black.cgColor
 horizonalLine.lineWidth = 3.0
 line.move(to: CGPoint(x:sx,y:sy)) //始点
 line.addLine(to:CGPoint(x:gx,y:gy))   //終点
 line.close()  //線を結ぶ
 horizonalLine.path = line.cgPath
 self.view.layer.addSublayer(horizonalLine)

//円
ovalShapeLayer.strokeColor = UIColor.blue.cgColor  // 輪郭は青
ovalShapeLayer.fillColor = UIColor.blue.cgColor  // 塗りはクリア
ovalShapeLayer.lineWidth = 1.0
ovalShapeLayer.path = UIBezierPath(ovalIn: CGRect(x:sx, y:sy, width:5, height:5)).cgPath
self.view.layer.addSublayer(ovalShapeLayer)

switch pointXY {
        case (sx-20...sx+20,sy-20...sy+20):
            // ドラッグ後の座標
            let newDx = touchEvent.location(in: self.view).x
            let newDy = touchEvent.location(in: self.view).y
            
            // ドラッグしたx座標の移動距離
            let dx = newDx - preDx
            //print("x:(dx)")
            
            // ドラッグしたy座標の移動距離
            let dy = newDy - preDy
            //print("y:(dy)")
            
            sx += dx
            sy += dy
            
            //線
            horizonalLine.strokeColor = UIColor.black.cgColor
            horizonalLine.lineWidth = 3.0
            line.move(to: CGPoint(x:sx,y:sy)) //始点
            line.addLine(to:CGPoint(x:gx,y:gy))   //終点
            line.close()  //線を結ぶ
            horizonalLine.path = line.cgPath
            self.view.layer.addSublayer(horizonalLine)
            
            //円
            ovalShapeLayer.path = UIBezierPath(ovalIn: CGRect(x:sx, y:sy, width:5, height:5)).cgPath
            self.view.layer.addSublayer(ovalShapeLayer)
            
            ovalShapeLayer2.path = UIBezierPath(ovalIn: CGRect(x:gx, y:gy, width:5, height:5)).cgPath
            self.view.layer.addSublayer(ovalShapeLayer2)

Answer 1

一度addSublayer()で追加しておけば、その後はpathだけ変更すればよいです。
（毎回addSublayer()しなくてもプロパティだけ変えれば反映されるはずです）。

Comments

[moaikuntvs]

Pathだけの変更でも移動前の線は描写されてしまいました。
line.line.removeAllPoints()を入力すると、移動前の線は表示されなくなりました。

[takabosoft]

そっちでしたか、解決してよかったです。lineはUIBezierPath型かなにかかと思うのですが、こいつはメンバーに持つ必要はなさそうです。

Answer 2

lineが初期化されていないので蓄積されているのではないでしょうか？

Comments

[moaikuntvs]

ありがとうございます。
おしゃるとおりでした。
line.line.removeAllPoints()を入力すると、移動前の線は表示されなくなりました。

Answer 3

sublayerについて詳しく無いので間違ってしまっているかもしれませんがレイヤーを消さずに追加され続けてしまっているのでは無いかと思います。

このコードでlayerを全て削除できるようです
caseの初めに入れたら直しませんかね?

self.view.layer.sublayers?.forEach { $0.removeFromSuperlayer() }

stackOverFlow

Comments

[moaikuntvs]

ありがとうございます。
caseのはじめに入れたのですが、アプリが落ちました。
EXC_BAD_ACCESS (code=1, address=0xe000000000000010)とエラーが出ていました。

[harumi]

うーんだめですか...
Swiftの図形描画ライブラリについて詳しく無いのですが図形を追加する際addSubviewで追加することはできないんですか？

[moaikuntvs]

別クラスで線分を描写するコードを書いて、self.view.addSubview(DrawView(frame: self.view.bounds))という形で、Subviewに追加することはできましたが、この場合でも、移動前の線分は消えませんでした。

class DrawView: UIView {

override init(frame: CGRect) {
super.init(frame: frame);
self.backgroundColor = UIColor.clear;
}

required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}

override func draw(_ rect: CGRect) {

let path = UIBezierPath()

path.removeAllPoints()

path.move(to: CGPoint(x: sx, y: sy))
path.addLine(to: CGPoint(x: gx, y: gy))
path.close()

UIColor.red.setStroke()
path.stroke()

}

[harumi]

takabosoftさんの回答にもありますが一度追加した後は座標入れるだけで移動できるみたいですね
このサイトとか参考になりそうです
https://uruly.xyz/%E3%80%90swift-3%E3%80%91calayer%E3%82%92%E7%94%A8%E3%81%84%E3%81%A6%E5%9B%B3%E5%BD%A2%E3%82%92%E7%A7%BB%E5%8B%95%E3%83%BB%E6%8B%A1%E5%A4%A7%E7%B8%AE%E5%B0%8F%E3%81%97%E3%81%A6%E3%81%BF%E3%81%9F/

[moaikuntvs]

ありがとうございます。
line.line.removeAllPoints()を入力すると、移動前の線は表示されなくなりました。