在 Swift 中绘制对角线

Posted 2023-03-12

【中文标题】在 Swift 中绘制对角线

【英文标题】：Drawing a Diagonal Line in Swift

【发布时间】：2015-09-09 16:10:41

【问题描述】：

我想知道是否可以使用 UIViews 绘制对角线？我已经成功地画了一条直线（垂直/水平），但我找不到旋转直线的方法。

感谢您的帮助！

【参考方案1】：

这是一个在 Swift 2 中包含对角线视图的视图的基本示例。当视图的边界发生变化时，通过调整对角线的长度和旋转角度来调整对角线。

import UIKit
import Foundation

class ViewWithDiagonalLine: UIView 

    private let line: UIView

    private var lengthConstraint: NSLayoutConstraint!

    init() 
        // Initialize line view
        line = UIView()
        line.translatesAutoresizingMaskIntoConstraints = false
        line.backgroundColor = UIColor.redColor()

        super.init(frame: CGRectZero)

        clipsToBounds = true // Cut off everything outside the view

        // Add and layout the line view

        addSubview(line)

        // Define line width
        line.addConstraint(NSLayoutConstraint(item: line, attribute: .Height, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 10))

        // Set up line length constraint
        lengthConstraint = NSLayoutConstraint(item: line, attribute: .Width, relatedBy: .Equal, toItem: nil, attribute: .NotAnAttribute, multiplier: 1, constant: 0)
        addConstraint(lengthConstraint)

        // Center line in view
        addConstraint(NSLayoutConstraint(item: line, attribute: .CenterX, relatedBy: .Equal, toItem: self, attribute: .CenterX, multiplier: 1, constant: 0))
        addConstraint(NSLayoutConstraint(item: line, attribute: .CenterY, relatedBy: .Equal, toItem: self, attribute: .CenterY, multiplier: 1, constant: 0))
    

    required init?(coder aDecoder: NSCoder) 
        fatalError("init(coder:) has not been implemented")
    

    override func layoutSubviews() 
        super.layoutSubviews()

        // Update length constraint and rotation angle
        lengthConstraint.constant = sqrt(pow(frame.size.width, 2) + pow(frame.size.height, 2))
        line.transform = CGAffineTransformMakeRotation(atan2(frame.size.height, frame.size.width))
    

出于演示目的将其放入普通视图控制器中

class ViewController: UIViewController 

    override func viewDidLoad() 
        let v = ViewWithDiagonalLine()
        v.frame = CGRectMake(100, 100, 100, 200)
        v.layer.borderColor = UIColor.blueColor().CGColor
        v.layer.borderWidth = 1
        view.addSubview(v)
    

产生结果

【讨论】：

壮观而翔实的答案。两个快速修复 - line.translatesAutoresizingMaskIntoConstraints 不是属性...而是将其更改为函数并使用：line.setTranslatesAutoresizingMaskIntoConstraints(false)。其次，删除 ?在所需的 init?(coder aDecoder: NSCoder) .否则它会完美运行！谢谢！ :)

@alex1511 抱歉，我忘了说我的答案中的代码是针对 Swift 2 的。如果你想在 Swift 1.2 中使用它，你确实需要你提到的那些适应。

还有一个问题：目前只能画一条从左上到右下的线……我怎么才能从右上到左下画呢？

@alex1511 只需将角度计算改为CGFloat(M_PI) - atan2(frame.size.height, frame.size.width)即可。

还有一个后续问题！绘制后如何删除线...我尝试过 line1.hidden 甚至尝试删除 line1 的所有子视图，但似乎没有任何效果。

【参考方案2】：

您可以通过设置transform 属性来旋转UIView。你会想使用CGAffineTransformMakeRotation 或CGAffineTransformRotate。

但是，您最好使用CAShapeLayer 并将其path 属性设置为您要绘制的线。