Как создать прямоугольный вид в Swift?

Question

Я могу создать представление треугольника в swift, используя следующий код:

class TriangleView: UIView {

    override func draw(_ rect: CGRect) {

        // Get Height and Width
        let layerHeight = layer.frame.height
        let layerWidth = layer.frame.width

        // Create Path
        let bezierPath = UIBezierPath()

        // Draw Points
        bezierPath.move(to: CGPoint(x: 0, y: layerHeight))
        bezierPath.addLine(to: CGPoint(x: layerWidth, y: layerHeight))
        bezierPath.addLine(to: CGPoint(x: layerWidth / 2, y: 0))
        bezierPath.addLine(to: CGPoint(x: 0, y: layerHeight))
        bezierPath.close()

        // Apply Color
        UIColor.red.setFill()
        bezierPath.fill()

        // Mask to Path
        let shapeLayer = CAShapeLayer()
        shapeLayer.path = bezierPath.cgPath
        layer.mask = shapeLayer
    }

}

  override func viewDidLoad() {
        super.viewDidLoad()

        let triangle = TriangleView(frame: CGRect(x: 0, y: 0, width: 55 , height: 60))
        triangle.backgroundColor = .white
        triangle.transform = CGAffineTransform(rotationAngle: .pi * 4.49)
        imageView.addSubview(triangle)

}

Теперь проблема в том, что я хочу изменить его на прямоугольный треугольник, используя свойства преобразования.Как этого добиться?

Ожидаемый результат

Текущий результат

Answer 1

Я надеюсь, что вы хотите эту часть.

Вот код.

override func draw(_ rect: CGRect) {

    let path = UIBezierPath.init()

    // top left
    path.move(to: .zero)

    // top right
    path.addLine(to: CGPoint(x: bounds.size.width,
                             y: 0))

    // bottom left offset
    path.addLine(to: CGPoint(x: bounds.size.width * 0.1,
                             y: bounds.size.height))

    // bottom left
    path.addLine(to: CGPoint(x: 0,
                             y: bounds.size.height))

    // top left
    path.close()

    // change fill color here.
    UIColor.black.setFill()
    path.fill()
}

Результат

Как я рисовал

Модификация

Если вы измените код UIColor.black.setFill() на

let fillColor = UIColor(red: 0xF9/0xff, green: 0x0D/0xff, blue: 0x5A/0xff, alpha: 1)
    fillColor.setFill()

вы получите этот результат.

Веселого кодирования.

Answer 2

Существует также несколько простых способов достижения этого, но для использования transform приведен пример кода. Используйте это преобразование вместо примера кода yours.it для получения прямоугольного треугольника на чертеже:

triangle.transform = CGAffineTransform.identity.rotated(by: CGFloat.pi).translatedBy(x: (triangle.bounds.width / 2), y: 0.0)

Вы должны заметить, что CGAffineTransform повернуть вид от его происхождения

Answer 3

Вы сейчас рисуете «а». Вы хотите нарисовать «б».

extension UIBezierPath {

    convenience init(rightAngledTriangleInRect: CGRect, offset withOffset: CGFloat) {
        self.init()
        move(to: CGPoint(x: rect.minX, y: rect.minY))
        addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        addLine(to: CGPoint(x: rect.minX + offset, y: rect.maxY))
        addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
        addLine(to: CGPoint(x: rect.minX, y: rect.minY))
        close()
    }
}

Тогда используйте по:

let path = UIBezierPath.init(rightAngledTriangleInRect: rect, withOffset: 20.0)

Обратите внимание, что нет необходимости добавлять self. в удобные единицы для инструкций пути Безье.

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

Для использования в вашем текущем TriangleView:

class TriangleView: UIView {

    override func draw(_ rect: CGRect) {

        let path = UIBezierPath.init(rightAngledTriangleInRect: rect, withOffset: 20.0)
        let shape = CAShapeLayer()
        shape.path = path.cgPath

        // Set the mask
        layer.mask = shape
    }
}