如何在我的视图上绘制箭头？

Question

您好，并提前感谢您的任何答复。 我想在我的UIView上绘制一个很宽的箭头，它有浅绿色到深绿色的阴影。 我一直在寻找CGContextRef，CGPathRef和UIBezierPath的文档，但我只是越来越困惑。 有人可以帮助我这个。谢谢！

Answer 1

早在2004年，我写了a blog post about drawing nice MetaPost-like arrows using NSBezierPath，你可能想看看。

根据需要，它应该很容易适应CoreGraphics或UIBezierPath。

Answer 2

如果你不需要真正的贝塞尔曲线，http://www.developers-life.com/draw-arrow-on-quartzcore-for-ios.html看起来像一个很好的简单的解决方案！

Answer 3

问题是旧的，但我很高兴与大家分享您一些代码，希望有用 - 雨燕2.3兼容 -

public extension UIView { 

    public enum PeakSide: Int { 
     case Top 
     case Left 
     case Right 
     case Bottom 
    } 

    public func addPikeOnView(side side: PeakSide, size: CGFloat = 10.0) { 
     self.layoutIfNeeded() 
     let peakLayer = CAShapeLayer() 
     var path: CGPathRef? 
     switch side { 
     case .Top: 
      path = self.makePeakPathWithRect(self.bounds, topSize: size, rightSize: 0.0, bottomSize: 0.0, leftSize: 0.0) 
     case .Left: 
      path = self.makePeakPathWithRect(self.bounds, topSize: 0.0, rightSize: 0.0, bottomSize: 0.0, leftSize: size) 
     case .Right: 
      path = self.makePeakPathWithRect(self.bounds, topSize: 0.0, rightSize: size, bottomSize: 0.0, leftSize: 0.0) 
     case .Bottom: 
      path = self.makePeakPathWithRect(self.bounds, topSize: 0.0, rightSize: 0.0, bottomSize: size, leftSize: 0.0) 
     } 
     peakLayer.path = path 
     let color = (self.backgroundColor ?? .clearColor()).CGColor 
     peakLayer.fillColor = color 
     peakLayer.strokeColor = color 
     peakLayer.lineWidth = 1 
     peakLayer.position = CGPoint.zero 
     self.layer.insertSublayer(peakLayer, atIndex: 0) 
    } 


    func makePeakPathWithRect(rect: CGRect, topSize ts: CGFloat, rightSize rs: CGFloat, bottomSize bs: CGFloat, leftSize ls: CGFloat) -> CGPathRef { 
     //      P3 
     //     / \ 
     //  P1 -------- P2  P4 -------- P5 
     //  |        | 
     //  |        | 
     //  P16       P6 
     // /        \ 
     // P15         P7 
     //  \        /
     //  P14       P8 
     //  |        | 
     //  |        | 
     //  P13 ------ P12 P10 -------- P9 
     //     \ /
     //      P11 

     let centerX = rect.width/2 
     let centerY = rect.height/2 
     var h: CGFloat = 0 
     let path = CGPathCreateMutable() 
     var points: [CGPoint] = [] 
     // P1 
     points.append(CGPointMake(rect.origin.x, rect.origin.y)) 
     // Points for top side 
     if ts > 0 { 
      h = ts * sqrt(3.0)/2 
      let x = rect.origin.x + centerX 
      let y = rect.origin.y 
      points.append(CGPointMake(x - ts, y)) 
      points.append(CGPointMake(x, y - h)) 
      points.append(CGPointMake(x + ts, y)) 
     } 

     // P5 
     points.append(CGPointMake(rect.origin.x + rect.width, rect.origin.y)) 
     // Points for right side 
     if rs > 0 { 
      h = rs * sqrt(3.0)/2 
      let x = rect.origin.x + rect.width 
      let y = rect.origin.y + centerY 
      points.append(CGPointMake(x, y - rs)) 
      points.append(CGPointMake(x + h, y)) 
      points.append(CGPointMake(x, y + rs)) 
     } 

     // P9 
     points.append(CGPointMake(rect.origin.x + rect.width, rect.origin.y + rect.height)) 
     // Point for bottom side 
     if bs > 0 { 
      h = bs * sqrt(3.0)/2 
      let x = rect.origin.x + centerX 
      let y = rect.origin.y + rect.height 
      points.append(CGPointMake(x + bs, y)) 
      points.append(CGPointMake(x, y + h)) 
      points.append(CGPointMake(x - bs, y)) 
     } 

     // P13 
     points.append(CGPointMake(rect.origin.x, rect.origin.y + rect.height)) 
     // Point for left side 
     if ls > 0 { 
      h = ls * sqrt(3.0)/2 
      let x = rect.origin.x 
      let y = rect.origin.y + centerY 
      points.append(CGPointMake(x, y + ls)) 
      points.append(CGPointMake(x - h, y)) 
      points.append(CGPointMake(x, y - ls)) 
     } 

     let startPoint = points.removeFirst() 
     self.startPath(path: path, onPoint: startPoint) 
     for point in points { 
      self.addPoint(point, toPath: path) 
     } 
     self.addPoint(startPoint, toPath: path) 
     return path 
    } 

    private func startPath(path path: CGMutablePath, onPoint point: CGPoint) { 
     CGPathMoveToPoint(path, nil, point.x, point.y) 
    } 

    private func addPoint(point: CGPoint, toPath path: CGMutablePath) { 
     CGPathAddLineToPoint(path, nil, point.x, point.y) 
    } 

} 

通过这种方式，你可以把这种对每一种观点：

let view = UIView(frame: frame) 
view.addPikeOnView(side: .Top) 

未来我会为派克位置添加抵消。

• 是的，名字肯定是可以改进的！