UIView 蒙版三角形

Question

我想在我的 UIView 的底部和顶部边缘添加一个三角形蒙版图案。像这样的：

到目前为止，我只能绘制底部图案：

let constant: CGFloat = 5
let width = rect.width
let height = rect.height

var p = CGPoint.zero
let path = UIBezierPath()
path.move(to: .zero)

p.x = width
path.addLine(to: p)
p.y = height
path.addLine(to: p)

var i = 0
var value = false
while Double(i) <= Double(width + 10) {
    value.toggle()
    if value {
        p.x -= constant
        p.y -= constant
        path.addLine(to: p)
    } else {
        p.x -= constant;
        p.y += constant;
        path.addLine(to: p)
    }
    i += 1
}
path.close()

let maskShape = CAShapeLayer()
maskShape.path = path.cgPath
layer.mask = maskShape

如何在顶部和底部边缘创建具有三角形图案的视图？

谢谢

Answer 1

你有大部分的逻辑。

想象用笔在一张纸上画出坐标。

 /\/\/\/\/\/\/\/\
|                |
|                |
|                |
 \/\/\/\/\/\/\/\/

所以 CGPoint.zero 位于左上角，将是我们绘图的开始。

    +    
     /\/\/\/\/\/\/\/\
    |                |
    |                |
    |                |
     \/\/\/\/\/\/\/\/


var point = CGPoint.zero
let path = UIBezierPath()
path.move(to: point)

那么，让我们画三角形吧。

----------------->
 /\/\/\/\/\/\/\/\
|                |
|                |
|                |
 \/\/\/\/\/\/\/\/


var i = 0
var value = true
while Double(i) <= Double(width + 10) {
    value.toggle()
    point.x += constant
    if value {
        point.y -= constant
    } else {
        point.y += constant;
    }
    path.addLine(to: point)
    i += 1
}

我们现在在右上角，让我们继续我们的绘图，让我们转到右下角：

 /\/\/\/\/\/\/\/\
|                | |
|                | |
|                | |
 \/\/\/\/\/\/\/\/ ˇ 

point = CGPoint(x: width, y: height)
path.addLine(to: point)

现在，我们需要三角形直到到达左下角：

 /\/\/\/\/\/\/\/\
|                |
|                |
|                |
 \/\/\/\/\/\/\/\/
<-----------------

i = 0
value = true
while Double(i) <= Double(width + 10) {
    value.toggle()
    point.x -= constant
    if value {
        point.y += constant
    } else {
        point.y -= constant;
    }
    path.addLine(to: point)
    i += 1
}

现在，让我们回到起点并结束：

^   /\/\/\/\/\/\/\/\
|  |                |
|  |                |
|  |                |
    \/\/\/\/\/\/\/\/

point = CGPoint(x: 0, y: 0) //Not needed, but I find it cleaner to add it
path.addLine(to: point) //Not needed, but I find it cleaner to add it
path.close()

旁注，我对你的循环进行了一点分解，因为你在 if/else 中执行重复命令，所以我把它们放在外面。