Zeichnen Sie einen Rand um die pfeilförmige Maske

Question

In meiner App brauche ich eine Kontur eines Pfeils, der mit Farbe gefüllt wird, wenn der Benutzer durch einige Aktivitäten fortschreitet. eine Pfeilform in meiner Ansicht erstellen ich UIView für den Einsatz im Interface Builder subclassed haben:

@IBDesignable 
class MaskedView: UIView { 

    var maskImageView = UIImageView() 

    @IBInspectable var maskImage: UIImage? { 
     didSet { 
      maskImageView.image = maskImage 
      maskImageView.contentMode = .scaleAspectFit 
      maskImageView.frame = bounds 
      mask = maskImageView 
     } 
    } 

} 

dann in IB ich wählen Sie ein Bild Pfeil, der die gewünschte Form erzeugt:

Hier hat die Ansicht einen grauen Hintergrund zu Demonstrationszwecken. Eigentlich muss ich es weiß sein mit Pfeil als schwarze Kontur mit:

Also im Grunde brauche ich einen Rahmen um meine Pfeil-Maske. Was ist der beste Weg, um dieses Ergebnis zu erreichen?

Answer 1

yourView sollte in clearColor sein. Passen Sie CGPoint nach Ihrem Bedarf mit Hilfe von extension.

let arrow = UIBezierPath.arrow(from: CGPoint(x: 50, y: 100), to: CGPoint(x: 200, y: 50), 
             tailWidth: 10, headWidth: 25, headLength: 40) 
let caLay = CAShapeLayer() 
caLay.path = arrow.cgPath 
yourView.layer.mask = caLay 

let borderLayer = CAShapeLayer() 
borderLayer.path = arrow.cgPath // Reuse the Bezier path 
borderLayer.fillColor = UIColor.clear.cgColor 
borderLayer.strokeColor = UIColor.green.cgColor 
borderLayer.lineWidth = 5 
borderLayer.frame = greenview.bounds 
yourView.layer.addSublayer(borderLayer) 



extension UIBezierPath { 

    class func arrow(from start: CGPoint, to end: CGPoint, tailWidth: CGFloat, headWidth: CGFloat, headLength: CGFloat) -> Self { 
     let length = hypot(end.x - start.x, end.y - start.y) 
     let tailLength = length - headLength 

     func p(_ x: CGFloat, _ y: CGFloat) -> CGPoint { return CGPoint(x: x, y: y) } 
     var points: [CGPoint] = [ 
      p(0, tailWidth/2), 
      p(tailLength, tailWidth/2), 
      p(tailLength, headWidth/2), 
      p(length, 0), 
      p(tailLength, -headWidth/2), 
      p(tailLength, -tailWidth/2), 
      p(0, -tailWidth/2) 
     ] 

     let cosine = (end.x - start.x)/length 
     let sine = (end.y - start.y)/length 
     var transform = CGAffineTransform(a: cosine, b: sine, c: -sine, d: cosine, tx: start.x, ty: start.y) 
     let path = CGMutablePath() 
     path.addLines(between: points, transform: transform) 
     path.closeSubpath() 
     return self.init(cgPath: path) 
    } 

}