gpt4 book ai didi

ios - 在 Tableview 中使用 BezierPath 创建时间线 View

转载 作者:行者123 更新时间:2023-11-28 10:16:45 24 4
gpt4 key购买 nike

我正在尝试在 TableView 中绘制一个具有 5 行的里程碑,我在单元格中添加了一个标签为“O”,这里的行高是 44,我正在尝试连接这些点像这样的东西O-----O-----O-----O-----O 垂直,但我无法弄清楚这里缺少什么,请引用以下代码

 class StopslistTableViewCell:UITableViewCell{

@IBOutlet weak var milestoneLbl: UILabel!

override func draw(_ rect: CGRect) {

let scrrenX = UIScreen.main.bounds.width - 30

let frametosuperview = milestoneLbl.convert(milestoneLbl!.frame, to: self.superview)

print("dotframetosuperview",frametosuperview)

//print(CGPoint(x: scrrenX, y: previousposY + rect.size.height))

//frametosuperview.origin.y > 40 ? frametosuperview.origin.y - 20 : frametosuperview.origin.y

let path = UIBezierPath()
path.move(to: CGPoint(x: scrrenX, y:frametosuperview.origin.y < 30 ? frametosuperview.origin.y : frametosuperview.origin.y - frametosuperview.height))

print("move to point--->",frametosuperview.origin.y < 30 ? frametosuperview.origin.y : frametosuperview.origin.y - frametosuperview.height)

path.addLine(to: CGPoint(x: scrrenX, y: frametosuperview.origin.y < 30 ? frametosuperview.height + 24 : (frametosuperview.origin.y + 24)))
print("add line to point--->",CGPoint(x: scrrenX, y: frametosuperview.origin.y < 30 ? frametosuperview.height + 24 : (frametosuperview.origin.y + 24)))

path.lineWidth = 5

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

setNeedsDisplay()
}

调试输出

dotframetosuperview (560.0, 20.0, 20.0, 20.0) 
move to point---> 20.0
add line to point---> (290.0, 44.0)
dotframetosuperview (560.0, 64.0, 20.0, 20.0)
move to point---> 44.0
add line to point---> (290.0, 88.0)
dotframetosuperview (560.0, 108.0, 20.0, 20.0)
move to point---> 88.0
add line to point---> (290.0, 132.0)
dotframetosuperview (560.0, 152.0, 20.0, 20.0)
move to point---> 132.0
add line to point---> (290.0, 176.0)
dotframetosuperview (560.0, 196.0, 20.0, 20.0)
move to point---> 176.0
add line to point---> (290.0, 220.0)

我需要这样的东西

enter image description here

我无法获得想要的结果,我是否遗漏了什么……?

最佳答案

您不需要创建 UILabel。而是创建一个圆和一 strip 有虚线图案的线:

let offSet:CGFloat = 20.0
let circleRadius:CGFloat = 5.0

override func draw(_ rect: CGRect) {

//creating a circle
let circlePath = UIBezierPath(arcCenter: CGPoint(x: offSet,y: circleRadius), radius: CGFloat(circleRadius), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.path = circlePath.cgPath
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineWidth = 2.0
circlePath.stroke()

//creating a line with dashed pattern
let dashPath = UIBezierPath()
let startPoint = CGPoint(x:offSet ,y:circleRadius * 2)
dashPath.move(to: startPoint)

let endPoint = CGPoint(x:offSet,y:
self.bounds.maxY)
dashPath.addLine(to: endPoint)

let dashes: [ CGFloat ] = [4, 1] //line with dash pattern of 4 thick and i unit space
dashPath.setLineDash(dashes, count: dashes.count, phase: 0)
dashPath.lineWidth = 2.0
dashPath.lineCapStyle = .butt
UIColor.black.set()
dashPath.stroke()

}

输出: enter image description here

编辑:因为 OP 希望时间轴圆从单元格的中心出现。

var allRows = Int()
var currentIndexPath = IndexPath()
let offSet:CGFloat = 20.0
let circleRadius:CGFloat = 5.0


override func draw(_ rect: CGRect) {

//creating a circle
let circlePath = UIBezierPath(arcCenter: CGPoint(x: offSet,y: self.bounds.midY), radius: CGFloat(circleRadius), startAngle: CGFloat(0), endAngle:CGFloat(M_PI * 2), clockwise: true)
let shapeLayer = CAShapeLayer()
shapeLayer.path = circlePath.cgPath
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.black.cgColor
shapeLayer.lineWidth = 2.0
circlePath.stroke()

//creating a line with dashed pattern
let dashPath = UIBezierPath()
var startPoint = CGPoint()

if currentIndexPath.row == 0{

startPoint = CGPoint(x:offSet ,y:self.bounds.midY)
}else{

startPoint = CGPoint(x:offSet ,y:0)
}
dashPath.move(to: startPoint)

var endPoint = CGPoint()

if currentIndexPath.row == allRows-1{

endPoint = CGPoint(x:offSet,y:
self.bounds.midY)
}else{

endPoint = CGPoint(x:offSet,y:
self.bounds.maxY)

}
dashPath.addLine(to: endPoint)

let dashes: [ CGFloat ] = [4, 1] //line with dash pattern of 4 thick and i unit space
dashPath.setLineDash(dashes, count: dashes.count, phase: 0)
dashPath.lineWidth = 2.0
dashPath.lineCapStyle = .butt
UIColor.black.set()
dashPath.stroke()
}

你的cellForRowAt indexPath应该配置为

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

.......
cell.allRows = totalNumberOfRows
cell.currentIndexPath = indexPath
return cell


}

这导致以下 O/P: enter image description here

关于ios - 在 Tableview 中使用 BezierPath 创建时间线 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40526113/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com