问题描述
我想在 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
如何创建顶部和底部边缘带有三角形图案的视图?
谢谢
解决方法
您掌握了大部分逻辑。
想象一下用钢笔在一张带有坐标的纸上画画。
/\/\/\/\/\/\/\/\
| |
| |
| |
\/\/\/\/\/\/\/\/
所以 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 内部执行重复命令,所以我将它们放在外面。