代码之家 › 专栏 › 技术社区 › iDeveloper

如何在Swift中创建直角视图?

uiview swift

iDeveloper · 技术社区 · 6 年前

我可以使用下面的代码在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)

}

现在的问题是我想用变换属性把它改成直角三角形。如何做到这一点?

预期结果

当前结果

3 回复 | 直到 6 年前

Cosmos Man 6 年前

我希望你想要这个角色。

这是密码。

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()

你得到这个结果。

有乐趣的编码。

JonJ 6 年前

您当前正在绘制“a”。你想画“b”。

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. 在bezier路径指令的便利初始化中。

如果你正在做很多绘图,我建议你添加一些这样的init,以使生活更容易。

要在当前三角形视图中使用:

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
    }
}

andesta.erfan 6 年前

要做到这一点也有一些简单的方法 transform 这是示例代码。请使用此转换而不是您的转换。这是从绘图中使用直角三角形的示例代码:

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

你应该注意到 CGAffineTransform 从原点旋转视图