CAShaperLayer als Maske zeige nur 1/4 von UIView

Question

Ich versuche UIView zu machen, um Zick-Zack-Unterkante zu zeigen. Etwas wie http://www.shutterstock.com/pic-373176370/stock-vector-receipt-vector-icon-invoice-flat-illustration-cheque-shadow-bill-with-total-cost-amount-and-dollar-symbol-abstract-text-receipt-paper-isolated-on-green.html?src=zMGBKj_5etMCcRB3cKmCoA-1-2

Ich habe Methode, die einen Pfad erstellen und als Maske festlegen, aber es als 1/4 der Ansicht angezeigt. Muss ich etwas anderes einstellen? Sieht aus wie ein Netzhautproblem oder Koordinatenproblem, aber nicht sicher, welches.

func layoutZigZag(bounds: CGRect) -> CALayer { 
    let maskLayer = CAShapeLayer() 
    maskLayer.bounds = bounds 
    let path = UIBezierPath() 

    let width = bounds.size.width 
    let height = bounds.size.height 

    let topRight = CGPoint(x: width , y: height) 
    let topLeft = CGPoint(x: 0 , y: height) 
    let bottomRight = CGPoint(x: width , y: 0) 
    let bottomLeft = CGPoint(x: 0 , y: 0) 

    let zigzagHeight: CGFloat = 10 
    let numberOfZigZag = Int(floor(width/23.0)) 
    let zigzagWidth = width/CGFloat(numberOfZigZag) 

    path.move(to: topLeft) 
    path.addLine(to: bottomLeft) 

    // zigzag 
    var currentX = bottomLeft.x 
    var currentY = bottomLeft.y 
    for i in 0..<numberOfZigZag { 
     let upper = CGPoint(x: currentX + zigzagWidth/2, y: currentY + zigzagHeight) 
     let lower = CGPoint(x: currentX + zigzagWidth, y: currentY) 

     path.addLine(to: upper) 
     path.addLine(to: lower) 

     currentX += zigzagWidth 
    } 

    path.addLine(to: topRight) 
    path.close() 

    maskLayer.path = path.cgPath 
    return maskLayer 
} 

and 

let rect = CGRect(x: 0, y: 0, width: 320, height: 400) 
let view = UIView(frame: rect) 
view.backgroundColor = UIColor.red 
let zigzag = layoutZigZag(bounds: rect) 
view.layer.mask = zigzag 

Pfad aussehen korrekt

Ergebnis 1/4 der Ansicht ist

Answer 1

ändern maskLayer.bounds = bounds-maskLayer.frame = bounds

Update:

Kopf gestellt ist, weil der Unterschied zwischen der Benutzeroberfläche und CG sind wir den Weg in UIBezierPath erstellen und diesen Weg als CGPath Umwandeln (maskLayer.path = path.cgPath). Zuerst müssen wir den Unterschied kennen, wo CGPath is Quartz 2D und Herkunft ist links unten während in UIBezierPath is UIKitUrsprung ist oben links. Gemäß Ihrem Code sind die angewandten Koordinaten wie oben links, dh UIBezierPath, wenn wir in CGPath transformieren (Ursprung links unten), wird es auf den Kopf gestellt. Ändern Sie den Code wie folgt, um den gewünschten Effekt zu erzielen.

let topRight = CGPoint(x: width , y: 0) 
    let topLeft = CGPoint(x: 0 , y: 0) 
    let bottomLeft = CGPoint(x: 0 , y: (height - zigzagHeight)) 

Quartz 2D Koordinatensysteme

UIBezierPath Koordinatensysteme