Question

我需要创建一个左边框倾斜 45度的UIView 我想知道，有没有办法以编程方式实现这一目标？在这种情况下， CATransform3D 能帮助我，因为它不是真正的“3D旋转”吗？

修改

这是一张图片，解释了我需要的更多输出

enter image description here

Answer 1

如果您只想要没有内容的形状，那么您可以创建CAShapeLayer并将其添加到视图的图层中。（事实上你也可以使用这种方法将内容放在那里，但是你需要稍微修改它。）

CAShapeLayer *layer = [CAShapeLayer layer];

UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, 100)]; // bottom left corner
[path addLineToPoint:CGPointMake(100, 0)]; // top middle
[path addLineToPoint:CGPointMake(300, 0)]; // top right corner
[path addLineToPoint:CGPointMake(300, 100)]; // bottom right corner
[path closePath];

layer.path = path.CGPath;
layer.fillColor = [UIColor blackColor].CGColor;
layer.strokeColor = nil;

[theView.layer addSubLayer:layer];

这并不需要使用drawRect或其他任何内容。您必须根据所需的值更改坐标。

您还可以使用UIView子类并覆盖drawRect。它需要更多的工作，但UIBezierPath几乎是一样的。

CALayer非常强大，Apple使用了很多。例如，Pages中的编辑画布几乎只使用CALayer s。

编写

Answer 2

实现这一目标的最短路径可能是采取以下步骤：

子类UIView
覆盖drawRect以提供视图的自定义绘图
在drawRect中，使用Core Graphics API，它允许您在绘图上下文中绘制自定义形状，并提供rotation或scaling

Here is an overview of the API from the Apple docs.

Answer 3

Resulted shape

Swift5中的代码

--

 class CustomView: UIView {

// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
    // Drawing code
    // Get Height and Width
    //let layerHeight = layer.frame.height
    let layerWidth = layer.frame.width
    // Create Path
    let bezierPath = UIBezierPath()
    //  Points
    let pointA = CGPoint(x: 0, y: 30)
    let pointB = CGPoint(x: 20, y: 0)
    let pointC = CGPoint(x: layerWidth, y: 0)
    let pointD = CGPoint(x: layerWidth, y:30)
    // Draw the path
    bezierPath.move(to: pointA)
    bezierPath.addLine(to: pointB)
    bezierPath.addLine(to: pointC)
    bezierPath.addLine(to: pointD)
    bezierPath.close()
    // Mask to Path
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = bezierPath.cgPath
    layer.mask = shapeLayer
}
}

Answer 4

我想提供一个使用 Swift 5 的代码示例，介绍如何在 UIViewController 中全部使用带有 UIKit 的程序化 UI 来实现它。我错过的关键组件是在创建 CAShapeLayer 并将其添加到视图层的地方，如果您在 layoutSubviews() 中执行，则必须在 UIView 中调用或 viewDidLayoutSubviews() 如果您在 UIViewController 内创建形状。您需要熟悉如何使用 UIBezierPath 来理解绘图机制。

以下是我认为最有用的资源：

Apple Docs on UIBezierPath

Medium Blog write up on UIBezierPath

import UIKit

class ViewController: UIViewController {
    var diagonalSideView: UIView = {
        let view = UIView()
        view.translatesAutoresizingMaskIntoConstraints = false
        view.backgroundColor = .black
        return view
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        setupViews()
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        makeDiagonalDividerShape(from: diagonalSideView)
    }

    private func setupViews() {
        view.addSubview(diagonalSideView)

        let heightConstraint = diagonalSideView.heightAnchor.constraint(equalToConstant: 200)
        let leftConstraint = diagonalSideView.leftAnchor.constraint(equalTo: view.leftAnchor)
        let rightConstraint = diagonalSideView.rightAnchor.constraint(equalTo: view.rightAnchor)
        let centerXConstraint = diagonalSideView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
        let centerYConstraint = diagonalSideView.centerYAnchor.constraint(equalTo: view.centerYAnchor)

        NSLayoutConstraint.activate([heightConstraint,
                                     leftConstraint,
                                     rightConstraint,
                                     centerXConstraint,
                                     centerYConstraint])
    }

    private func makeDiagonalDividerShape(from view: UIView) {
        let layer = CAShapeLayer()

        // Create Path
        let bezierPath = UIBezierPath()

        //  Points of the Polygon with Diagonal left side
        let pointA = CGPoint(x: view.bounds.origin.x, y: view.bounds.height)
        let pointB = CGPoint(x: view.bounds.width / 4, y: view.bounds.origin.y)
        let pointC = CGPoint(x: view.bounds.width, y: view.bounds.origin.y)
        let pointD = CGPoint(x: view.bounds.width, y: view.bounds.height)

        // Draw the path
        bezierPath.move(to: pointA)
        bezierPath.addLine(to: pointB)
        bezierPath.addLine(to: pointC)
        bezierPath.addLine(to: pointD)
        bezierPath.close()

        // Create the mask
        layer.path = bezierPath.cgPath
        view.layer.mask = layer
    }
}

最终结果：

创建一个只有一个对角线的UIView

4 个答案: