質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.55%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,062

moaikuntvs

score 16

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)


イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/27 10:40

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/27 10:39

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

    キャンセル

  • 2018/12/27 10:44

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

    キャンセル

0

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

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

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

stackOverFlow

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/12/26 23:09

    別クラスで線分を描写するコードを書いて、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()

    }

    キャンセル

  • 2018/12/27 10:10 編集

    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/

    キャンセル

  • 2018/12/27 10:39

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る