Нарисуйте диагональную линию с боковыми кривыми UIBezierPath - PullRequest
Новая
       17

Нарисуйте диагональную линию с боковыми кривыми UIBezierPath

0 голосов
/ 19 февраля 2019

Я хочу нарисовать диагональную линию с боковыми кривыми, как показано ниже: enter image description here

Код: 

func drawCanvas1(frame: CGRect = CGRect(x: 0, y: 0, width: 240, height: 120)) {

        //// Bezier Drawing
        let bezierPath = UIBezierPath()
        UIColor.black.setStroke()
        bezierPath.lineWidth = 1
        bezierPath.stroke()


        //// Bezier 2 Drawing
        let bezier2Path = UIBezierPath()
        bezier2Path.move(to: CGPoint(x: frame.minX + 0.5, y: frame.minY + 103.42))
        bezier2Path.addCurve(to: CGPoint(x: frame.minX + 12.17, y: frame.minY + 119.5), controlPoint1: CGPoint(x: frame.minX + 0.5, y: frame.minY + 103.42), controlPoint2: CGPoint(x: frame.minX + 0.5, y: frame.minY + 119.5))
        bezier2Path.addCurve(to: CGPoint(x: frame.minX + 232.03, y: frame.minY + 26.23), controlPoint1: CGPoint(x: frame.minX + 23.85, y: frame.minY + 119.5), controlPoint2: CGPoint(x: frame.minX + 232.03, y: frame.minY + 26.23))
        bezier2Path.addCurve(to: CGPoint(x: frame.minX + 237.87, y: frame.minY + 0.5), controlPoint1: CGPoint(x: frame.minX + 232.03, y: frame.minY + 26.23), controlPoint2: CGPoint(x: frame.minX + 243.7, y: frame.minY + 16.58))
        UIColor.black.setStroke()
        bezier2Path.lineWidth = 1
        bezier2Path.lineCapStyle = .square
        bezier2Path.stroke()

        let layer1 = CAShapeLayer()
        layer1.path = bezierPath.cgPath

        let layer2 = CAShapeLayer()
        layer2.path = bezier2Path.cgPath

        imageCollectionView.layer.addSublayer(layer1)
        imageCollectionView.layer.addSublayer(layer2)

    }

Вывод:

enter image description here

Как вы можете видеть в выводе, он заполняется черным цветом, в то время как я только дал штрих.Я не очень хорош в безье пути.Может ли кто-нибудь помочь мне в достижении желаемого эффекта

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

Может быть, использовать addArc проще? 

func drawCanvas1(frame: CGRect = CGRect(x: 0, y: 0, width: 240, height: 120)) {
    let rhsY:CGFloat = frame.minY + 60   // Please adjust this value depending on your need
    let cornerRadius:CGFloat = 25
    let angle = atan2(frame.maxY - rhsY, frame.width)

    // upper left corner
    let p1 = CGPoint(x: frame.minX, y: frame.minY)
    // left point touching bottom left corner
    let p2 = CGPoint(x: frame.minX, y: frame.maxY - cornerRadius)
    let a = cornerRadius * cos(angle)
    let o = cornerRadius * sin(angle)

    // Center of bottom left round corner
    let c1 = CGPoint(x: p2.x + a, y: p2.y - o)
    let c1Start = CGFloat.pi - angle
    let c1End = c1Start - (CGFloat.pi / 2)

    // Center of bottom right round corner
    let c2 = CGPoint(x: frame.maxX - cornerRadius, y: rhsY)

    // bottom point touching bottom left corner
//    let p3 = CGPoint(x: c1.x + o, y: c1.y + a)
    // bottom point touching bottom right corner
    let p4 = CGPoint(x: c2.x + o, y: c2.y + a)
    // right point touching bottom right corner
//    let p5 = CGPoint(x: frame.maxX, y: rhsY)
    // upper right corner
    let p6 = CGPoint(x: frame.maxX, y: frame.minY)

    let path = UIBezierPath()
    path.move(to: p1)
    path.addLine(to: p2)
    path.addArc(withCenter: c1, radius: cornerRadius, startAngle: c1Start, endAngle: c1End, clockwise: false)
    path.addLine(to: p4)
    path.addArc(withCenter: c2, radius: cornerRadius, startAngle: c1End, endAngle: 0, clockwise: false)
    path.addLine(to: p6)
    path.addLine(to: p1)

    // I am guessing you are trying to use a mask to the top level image?
    let maskLayer = CAShapeLayer()
    maskLayer.path = path.cgPath
    imageCollectionView.layer.mask = maskLayer
}
0 голосов
/ 19 февраля 2019

Если вы не укажете цвет заливки, черный будет использоваться по умолчанию для заполнения пути.Если путь не закрыт, цвет заливки пытается заполнить, используя начальную и конечную точки.

...