问题描述
我正在使用贝塞尔曲线路径、形状图层和 CABasicAnimation 以动画方式绘制视图。但它只绘制一次视图。完成前一条后如何多次绘制相同的贝塞尔曲线?
这是用于创建此类波形的附加代码。请检查...
class ViewController: 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,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
}
}
解决方法
我设法解决了您的问题,请检查并告诉我它是否适合您。
注意 - 我添加了一个按钮单击以添加更多图形模式,而不是服务器响应。您可以通过调用服务器响应成功方法中的按钮点击代码来使用服务器响应来执行相同的操作。
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,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
}
}
乐于助人:)