完成上一條后如何多次繪制相同的貝塞爾路徑？

Question

我正在使用貝塞爾路徑、形狀圖層和 CABasicAnimation 來動畫繪制視圖。 但它只繪制一次視圖。 完成上一條后如何多次繪制相同的貝塞爾路徑？

這是用於創建此類波形的附加代碼。 請檢查...

class 視圖控制器：UIViewController {

@IBOutlet weak var scrollView: UIScrollView!
@IBOutlet weak var graphView: UIView!

// MARK:- PROPERTIES
var movingPoint: CGFloat = 0.0
var startInterval: CGFloat = 10.0
var noOfIntervals: CGFloat = 0
var intervalWidth: CGFloat = 0
var pWaveWidth: CGFloat = 20.0
var qrsWaveWidth: CGFloat = 15
var tWaveWidth: CGFloat = 30
var gapBetweenTwoIntervals: CGFloat = 50
let shapeLayer = CAShapeLayer()
var bezierPath = UIBezierPath()
let animation = CABasicAnimation(keyPath: "strokeEnd")



override func viewDidLoad() {
    super.viewDidLoad()
    
    graphView.translatesAutoresizingMaskIntoConstraints = true
    graphView.frame.size = CGSize(width: 100000, height: 150)
    DispatchQueue.main.async {
        self.graphView.layoutIfNeeded()
    }
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    createGraph()
}


@objc func createGraph() {
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.red.cgColor
    shapeLayer.lineWidth = 2.0
    _ = createBezierPath()
    graphView.layer.addSublayer(shapeLayer)
}

@discardableResult
@objc func createBezierPath(isPathAlreadyCreated: Bool = false) -> UIBezierPath {
    
    for _ in 0..<205 {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: movingPoint, y: graphView.halfHeight))
        path.addLine(to: CGPoint(x: startInterval, y: graphView.halfHeight))
        
        // P Point Curve
        let pWaveX = startInterval + pWaveWidth
        path.addQuadCurve(to: CGPoint(x: pWaveX, y: graphView.halfHeight), controlPoint: CGPoint(x: pWaveX - 6.0, y: graphView.halfHeight - 30.0))
        
        let gapBetweenPAndQRS: CGFloat = 20.0
        path.addLine(to: CGPoint(x: (pWaveX + gapBetweenPAndQRS), y: graphView.halfHeight))
        
        // QRS
        let qrsStartPoint = pWaveX + gapBetweenPAndQRS
        let qrsComplex = qrsStartPoint + qrsWaveWidth
        let qrsComplexEndPoint = qrsComplex + (qrsWaveWidth / 2)
        path.addLine(to: CGPoint(x: qrsStartPoint + (qrsWaveWidth / 2), y: graphView.halfHeight - 70.0))
        path.addLine(to: CGPoint(x: qrsComplex, y: graphView.halfHeight + 40.0))
        path.addLine(to: CGPoint(x: qrsComplexEndPoint, y: graphView.halfHeight))
        
        let gapBetweenQRSAndTWave: CGFloat = 20.0
        let tWaveStartPoint = qrsComplexEndPoint + gapBetweenQRSAndTWave
        path.addLine(to: CGPoint(x: tWaveStartPoint, y: graphView.halfHeight))
        
        // T Point Curve
        let tWaveEndX = tWaveStartPoint + tWaveWidth
        print(tWaveEndX)
        path.addQuadCurve(to: CGPoint(x: tWaveEndX, y: graphView.halfHeight), controlPoint: CGPoint(x: tWaveEndX - 7.0, y: graphView.halfHeight - 30.0))
        
        movingPoint = tWaveEndX
        startInterval = tWaveEndX + gapBetweenTwoIntervals
        path.addLine(to: CGPoint(x: startInterval, y: graphView.halfHeight))
        bezierPath.append(path)
    }
    
    shapeLayer.path = bezierPath.cgPath
    
    animation.fromValue = 0.0
    animation.duration = 205 * 2
    shapeLayer.add(animation, forKey: "PathAnimation")
    
    return bezierPath
}

}

Answer 1

我設法解決了您的問題，請檢查並讓我知道它是否適合您。

注意 - 我添加了一個按鈕單擊以添加更多圖形模式，而不是服務器響應。 您可以通過從服務器響應成功方法調用按鈕點擊代碼來使用服務器響應來執行相同操作。

import UIKit

class GraphViewController: UIViewController {

@IBOutlet weak var graphView: UIView!

// MARK:- PROPERTIES
var movingPoint: CGFloat = 0.0
var startInterval: CGFloat = 10.0
var noOfIntervals: CGFloat = 0
var intervalWidth: CGFloat = 0
var pWaveWidth: CGFloat = 20.0
var qrsWaveWidth: CGFloat = 15
var tWaveWidth: CGFloat = 30
var gapBetweenTwoIntervals: CGFloat = 50
let animation = CABasicAnimation(keyPath: "strokeEnd")

override func viewDidLoad() {
    super.viewDidLoad()
    
    graphView.translatesAutoresizingMaskIntoConstraints = true
    graphView.backgroundColor = .blue
    graphView.frame.size = CGSize(width: 100000, height: 250)
    DispatchQueue.main.async {
        self.graphView.layoutIfNeeded()
    }
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    createBezierPath(repeatLoop: 1)
}

@objc func createBezierPath(repeatLoop: Int) {
    let pathsArray = UIBezierPath()
    
    let shapeLayer = CAShapeLayer()
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.red.cgColor
    shapeLayer.lineWidth = 2.0
    
    for _ in 0..<repeatLoop {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: movingPoint, y: graphView.halfHeight))
        path.addLine(to: CGPoint(x: startInterval, y: graphView.halfHeight))
        
        // P Point Curve
        let pWaveX = startInterval + pWaveWidth
        path.addQuadCurve(to: CGPoint(x: pWaveX, y: graphView.halfHeight), controlPoint: CGPoint(x: pWaveX - 6.0, y: graphView.halfHeight - 30.0))
        
        let gapBetweenPAndQRS: CGFloat = 20.0
        path.addLine(to: CGPoint(x: (pWaveX + gapBetweenPAndQRS), y: graphView.halfHeight))
        
        // QRS
        let qrsStartPoint = pWaveX + gapBetweenPAndQRS
        let qrsComplex = qrsStartPoint + qrsWaveWidth
        let qrsComplexEndPoint = qrsComplex + (qrsWaveWidth / 2)
        path.addLine(to: CGPoint(x: qrsStartPoint + (qrsWaveWidth / 2), y: graphView.halfHeight - 70.0))
        path.addLine(to: CGPoint(x: qrsComplex, y: graphView.halfHeight + 40.0))
        path.addLine(to: CGPoint(x: qrsComplexEndPoint, y: graphView.halfHeight))
        
        let gapBetweenQRSAndTWave: CGFloat = 20.0
        let tWaveStartPoint = qrsComplexEndPoint + gapBetweenQRSAndTWave
        path.addLine(to: CGPoint(x: tWaveStartPoint, y: graphView.halfHeight))
        
        // T Point Curve
        let tWaveEndX = tWaveStartPoint + tWaveWidth
        print(tWaveEndX)
        path.addQuadCurve(to: CGPoint(x: tWaveEndX, y: graphView.halfHeight), controlPoint: CGPoint(x: tWaveEndX - 7.0, y: graphView.halfHeight - 30.0))
        
        movingPoint = tWaveEndX
        startInterval = tWaveEndX + gapBetweenTwoIntervals
        path.addLine(to: CGPoint(x: startInterval, y: graphView.halfHeight))
        pathsArray.append(path)
        
        shapeLayer.path = pathsArray.cgPath
        
        animation.fromValue = 0.0
        animation.duration = Double(repeatLoop) * 2
        shapeLayer.add(animation, forKey: "PathAnimation")
    }
    
    graphView.layer.addSublayer(shapeLayer)
}

@IBAction func btnTap(_ sender: Any) {
    createBezierPath(repeatLoop: 2)
}
}

extension UIView {
var halfHeight: CGFloat {
    return self.frame.size.height / 2.0
}
}

很高興能幫助你：）