如何绘制虚线箭头?

安德烈·M。

我想这样画箭头:

在此处输入图片说明

我在这里找到了如何绘制实心箭头,但是我不知道如何绘制上面的箭头。

解决方案:

对我来说,我最终得到以下代码:

func addArrowOntoView(view: UIView, startPoint: CGPoint, endPoint: CGPoint, color: UIColor) {
    let line = UIBezierPath()
    line.moveToPoint(startPoint)
    line.addLineToPoint(endPoint)

    let arrow = UIBezierPath()

    arrow.moveToPoint(endPoint)
    arrow.addLineToPoint(CGPointMake(endPoint.x - 5, endPoint.y - 4))
    arrow.moveToPoint(endPoint)
    arrow.addLineToPoint(CGPointMake(endPoint.x - 5, endPoint.y + 4))
    arrow.lineCapStyle = .Square

    let sublayer = CAShapeLayer()
    sublayer.path = line.CGPath
    view.layer.addSublayer(sublayer)

    //add Line
    let lineLayer = CAShapeLayer()
    lineLayer.path = line.CGPath
    lineLayer.strokeColor = color.CGColor
    lineLayer.lineWidth = 1.0
    lineLayer.lineDashPattern = [5, 3]
    view.layer.addSublayer(lineLayer)

    //add Arrow
    let arrowLayer = CAShapeLayer()
    arrowLayer.path = arrow.CGPath
    arrowLayer.strokeColor = color.CGColor
    arrowLayer.lineWidth = 1.0
    view.layer.addSublayer(arrowLayer)
}
什里帕达

这是我为在操场上获得此ArrowView而编写的代码:

// ArrowView

class ArrowView : UIView {


var dashWidth :CGFloat = 3.0
var dashGap : CGFloat = 3.0
var arrowThickNess : CGFloat = 2.0
var arrowLocationX : CGFloat = 0.0
//MARK:

override func drawRect(rect: CGRect) {

    //Compute the dashPath 

    let path = UIBezierPath()

    //Compute the mid y, path height
    let midY = CGRectGetMidY(frame)
    let pathHeight = CGRectGetHeight(frame)


    path.moveToPoint(CGPointMake(frame.origin.x, midY))
    path.addLineToPoint(CGPointMake(frame.origin.x + frame.size.width - dashWidth , midY))
    path.lineWidth = arrowThickNess

    let dashes: [CGFloat] = [dashWidth, dashGap]
    path.setLineDash(dashes, count: dashes.count, phase: 0)


    //Arrow 

    let arrow = UIBezierPath()

    arrow.lineWidth = arrowThickNess

    arrow.moveToPoint(CGPointMake(frame.origin.x + arrowLocationX , midY))
    arrow.addLineToPoint(CGPointMake(frame.origin.x + frame.size.width -  arrowThickNess/2 - 18, 0))
    arrow.moveToPoint(CGPointMake(frame.origin.x + arrowLocationX , midY))
    arrow.addLineToPoint(CGPointMake(frame.origin.x + frame.size.width - arrowThickNess/2 - 18 , pathHeight))
    arrow.lineCapStyle = .Square


    UIColor.whiteColor().set()
    path.stroke()
    arrow.stroke()

 }

}


let arrowView = ArrowView(frame: CGRect(x: 0, y: 0, width: 210, height: 20))
arrowView.dashGap = 10
arrowView.dashWidth = 5
arrowView.arrowLocationX = 202

arrowView.setNeedsDisplay()

基本上,您将需要创建带有必需的破折号的贝塞尔曲线路径,并且需要将破折号作为浮点值的数组提供。在此贝塞尔曲线路径的末尾,您将需要绘制另一个表示箭头的贝塞尔曲线路径。

输出:-

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章