如何绘制方向箭头
Posted
技术标签:
【中文标题】如何绘制方向箭头【英文标题】:How to draw a directional arrow head 【发布时间】:2018-02-05 15:22:08 【问题描述】:我有许多方向和角度的线条,我使用UIBezierpath
绘制它们。
我需要在线条的一端画一个箭头;根据给定点动态变化。
编辑:
编辑 2: 杰克回答这里是我的代码
let y2 = line.point2Y
let path = UIBezierPath()
path.move(to: CGPoint(x: x1, y: y1))
path.addLine(to: CGPoint(x: x2, y: y2))
path.addArrow(start: CGPoint(x: x1, y: y1), end: CGPoint(x: x2, y: y2), pointerLineLength: ...
path.close()
let shape = CAShapeLayer()
let shapeBorder = CAShapeLayer()
shapeBorder.strokeColor = UIColor.black.cgColor
shapeBorder.lineJoin = kCALineJoinRound
shapeBorder.lineCap = kCALineCapRound
shapeBorder.lineWidth = 10
shapeBorder.addSublayer(shape)
shape.path = path.cgPath
shapeBorder.path = shape.path
shape.lineJoin = kCALineJoinRound
shape.lineCap = kCALineCapRound
shape.lineWidth = shapeBorder.lineWidth-5.0
shape.strokeColor = color
但是有一个影子
【问题讨论】:
我会检查的,谢谢 需要更多信息...箭头大小、箭头方向、箭头位置等 方向是动态的,可以指向360度的任意角度。 大小无关紧要,箭头的尖端将始终是任何线的 2 个点之一 请将您的代码放在问题中的文本中,而不是图像中。您的问题是您所在图层的fillColor
。将其设置为UIColor.clear.cgColor
【参考方案1】:
这对我有用:
extension UIBezierPath
func addArrow(start: CGPoint, end: CGPoint, pointerLineLength: CGFloat, arrowAngle: CGFloat)
self.move(to: start)
self.addLine(to: end)
let startEndAngle = atan((end.y - start.y) / (end.x - start.x)) + ((end.x - start.x) < 0 ? CGFloat(Double.pi) : 0)
let arrowLine1 = CGPoint(x: end.x + pointerLineLength * cos(CGFloat(Double.pi) - startEndAngle + arrowAngle), y: end.y - pointerLineLength * sin(CGFloat(Double.pi) - startEndAngle + arrowAngle))
let arrowLine2 = CGPoint(x: end.x + pointerLineLength * cos(CGFloat(Double.pi) - startEndAngle - arrowAngle), y: end.y - pointerLineLength * sin(CGFloat(Double.pi) - startEndAngle - arrowAngle))
self.addLine(to: arrowLine1)
self.move(to: end)
self.addLine(to: arrowLine2)
class MyViewController : UIViewController
override func viewDidAppear(_ animated: Bool)
super.viewDidAppear(animated)
let arrow = UIBezierPath()
arrow.addArrow(start: CGPoint(x: 200, y: 200), end: CGPoint(x: 50, y: 50), pointerLineLength: 30, arrowAngle: CGFloat(Double.pi / 4))
let arrowLayer = CAShapeLayer()
arrowLayer.strokeColor = UIColor.black.cgColor
arrowLayer.lineWidth = 3
arrowLayer.path = arrow.cgPath
arrowLayer.fillColor = UIColor.clear.cgColor
arrowLayer.lineJoin = kCALineJoinRound
arrowLayer.lineCap = kCALineCapRound
self.view.layer.addSublayer(arrowLayer)
编辑
另外,请确保将CAShapeLayer
的fillColor
设置为UIColor.clear.cgColor
。否则,您的图层将填充箭头起点和终点线之一之间的区域。
【讨论】:
它工作得很好,但从我的代码似乎会编辑问题来看仍然是一个小问题 非常感谢你救了你一命 如何将这个的锚点设置在左下角?我已经实现了这个,它的开始参考似乎是屏幕的左上角,而不是我所有其他代码的左下角。我正在使用其他对象的常量在屏幕上引用它,它会“翻转”y 方向。 ***.com/questions/59791882/…【参考方案2】:很好的例子,感谢您发布@Jake。小更新,Xcode 12 应该是:
override func viewDidAppear(_ animated: Bool)
super.viewDidAppear(animated)
let arrow = UIBezierPath()
arrow.addArrow(start: CGPoint(x: 200, y: 200), end: CGPoint(x: 50, y: 50), pointerLineLength: 30, arrowAngle: CGFloat(Double.pi / 4))
let arrowLayer = CAShapeLayer()
arrowLayer.strokeColor = UIColor.black.cgColor
arrowLayer.lineWidth = 3
arrowLayer.path = arrow.cgPath
arrowLayer.fillColor = UIColor.clear.cgColor
arrowLayer.lineJoin = CAShapeLayerLineJoin.round
arrowLayer.lineCap = CAShapeLayerLineCap.round
self.view.layer.addSublayer(arrowLayer)
【讨论】:
以上是关于如何绘制方向箭头的主要内容,如果未能解决你的问题,请参考以下文章