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

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

ただいまの
回答率

87.59%

imageUIBezierPathをタイマーの経過に合わせて動かしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 568

score 12

イメージ説明]
イメージ説明]

実現したいこと

UIBezierPAthをタイマーの時間と連携して描画しようとしています。
お手数ですがご協力お願いします。

直面している課題

①ビルド時にシュミレーターにパスが表示されないこと
②タイマーとの連携が上手くいかないこと

試したこと

①別プロジェクトに該当コードをコピペ -> パスは表示されず
②func arcPercentの引数:secondsをfunc stepの定数:timeと連携させた -> 上手くいかず (連携の方法があっているか良し悪しの判断が出来ない)

該当のソースコード

class SropWatchViewController: UIViewController {

    var startTime: TimeInterval = 0
    var intervalTime: Double = 0.0

    @IBOutlet weak var timerLabel: UILabel!
    @IBOutlet weak var stopButton: UIButton!

    @objc func step(){

        intervalTime = Date().timeIntervalSince1970 - startTime
        let time = Int(intervalTime)

        let h = time / 3600 % 24
        let m = time / 60 % 60
        let s = time % 60

        let displayStr = String(format: "%02d:%02d:%02d",h,m,s)
        timerLabel.text = displayStr
    }

    func arcPercent(_ radius:CGFloat, _ seconds:Double) -> UIBezierPath {
        let endAngle = 2*Double.pi*seconds/1200 - Double.pi/2
        let path = UIBezierPath(
            arcCenter: CGPoint(x: 0, y: 0),
            radius: radius,
            startAngle: CGFloat(-Double.pi/2),
            endAngle: CGFloat(endAngle),
            clockwise: true
        )
        return path
    }

    func drawLine() -> UIImage {

        let size = view.bounds.size
        UIGraphicsBeginImageContextWithOptions(size, false, 1.0)

        intervalTime = Date().timeIntervalSince1970 - startTime
        let time = Int(intervalTime)
        let  seconds = time%60

        UIColor.red.setStroke()
        let arcPath = arcPercent(80, Double(seconds))
        arcPath.lineWidth = 60
        arcPath.lineCapStyle = .butt

        let tf = CGAffineTransform(translationX: view.center.x, y: view.center.y)
        arcPath.apply(tf)
        arcPath.stroke()


        let image = UIGraphicsGetImageFromCurrentImageContext()

        return image!
    }


    override func viewDidLoad() {
        super.viewDidLoad()

        startTime = Date().timeIntervalSince1970

        Timer.scheduledTimer(
            timeInterval: 1.0,
            target: self,
            selector: #selector(self.step),
            userInfo: nil,
            repeats: true
        )

        timerLabel.text = String("00:00:00")

        let drawImage = drawLine()
        let drawView = UIImageView(image: drawImage)
        view.addSubview(drawView)

    }

}

xcodeのバージョン

xcode 9.3

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

回答が付いていないので、解決に向けた道順を提示します。

①ビルド時にシュミレーターにパスが表示されないこと
②タイマーとの連携が上手くいかないこと 

まず、①が出来ていないのに②を同時に片付けようとするのが無理があります。
①を確実に完成させてください。
(あと「ビルド時」ではなく「実行時」ですよね)

描画のコア部分はarcPercentで実装されていると思いますが、
ここに決め打ちで引数を渡し、
arcPercent関数の検証を行ってください。

もし期待通りに動かないパターンがあるようでしたら、その原因をデバッグで取り除いてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/02/21 17:11

    回答ありがとうございます。
    ①と②を同時に解決しようとしていたのが混乱のもとだったのですね。
    override func ~ 内でview.addSubview(drawLine)を追記した所①のパスが表示されない問題は解決できました。また②のタイマーと関数を繋ぐこともできました。

    しかし依然タイマーと同期してパスが動いてくれません。

    この場合
    ①view.addSubview(drawLine)を繰り返し処理
    ②drawLine()を繰り返し処理
    ③それ以外の方法

    どのような方法でタイマーの秒数の経過に合わせてパスが更新されていくように作れるのでしょうか?

    キャンセル

  • 2019/02/21 17:17

    このままの設計で進めるのならUIImageViewのインスタンスをメンバー変数で取っておいて、imageのみ差し替えればよいかと思います。

    ただ、パスを単色で描画するだけでしたら、UIImageViewではなくCAShapeLayerを使ったほうが動作が軽かった記憶があるので時間があれば調べてみてください。

    キャンセル

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

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

関連した質問

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