Блог

Я хотел бы добавить шаблон маски треугольника к нижнему и верхнему краю моего 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, я помещаю их снаружи.