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

你已经掌握了大部分逻辑。

想想用笔在 sheet 纸上画坐标。

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

所以 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 中执行重复命令，我把它们放在外面。

UIView遮罩三角形

UIView mask triangle

cgpath

ios

swift