UIView 遮罩三角形

安托万·加西亚

我想在 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 内部执行重复命令,我把它们放在外面。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章