Question

我对Swift中的绘图并不是很了解，但我希望创建一个与广场略有不同的应用背景的一部分。请参阅下面的图片，了解我尝试制作的内容：

这个想法是，这将位于屏幕的顶部，只不过是背景。它会向屏幕的一半延伸。然后，我会在顶部等处添加图像。我需要广场底部的点始终位于屏幕中间。

我可以通过代码在Swift中创建这个形状/ UIView吗？如果是这样，怎么样？

或者，将它创建为图像并以此方式执行是否更好？

Answer 1

我可以通过代码在Swift中创建这个形状/ UIView吗？如果是这样，怎么样？

视图总是长方形，但视图的内容可以是任何形状，它的背景可以是透明的，因此视图的可见部分可以是您可以绘制的任何内容。

有很多方法可以在iOS中绘制内容。通常最好从最适合您的工具开始，并在需要更多控制时向下移动到较低级别。考虑到这一点，我建议首先创建一个使用UIBezierPath绘制五边形的视图。这个代码非常简单：

class PentagonView : UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = UIColor.clearColor()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        backgroundColor = UIColor.clearColor()
    }

    override func drawRect(rect: CGRect) {
        let size = self.bounds.size
        let h = size.height * 0.85      // adjust the multiplier to taste

        // calculate the 5 points of the pentagon
        let p1 = self.bounds.origin
        let p2 = CGPoint(x:p1.x + size.width, y:p1.y)
        let p3 = CGPoint(x:p2.x, y:p2.y + h)
        let p4 = CGPoint(x:size.width/2, y:size.height)
        let p5 = CGPoint(x:p1.x, y:h)

        // create the path
        let path = UIBezierPath()
        path.moveToPoint(p1)
        path.addLineToPoint(p2)
        path.addLineToPoint(p3)
        path.addLineToPoint(p4)
        path.addLineToPoint(p5)
        path.closePath()

        // fill the path
        UIColor.redColor().set()
        path.fill()
    }
}

现在您可以在UI中的任何位置使用该视图：

如果要在坐标（100,200）处向视图控制器的主视图中添加150x150px PentagonView，可以将以下内容放在viewDidLoad()中：

let pg = PentagonView(frame:CGRect(100, 200, 150, 150))
self.view.addSubview(pg)

或者，您也可以在故事板中的某个视图中添加PentagonView，方法是放入正确大小的UIView，然后将其更改为PentagonView。

或者，将它创建为图像并以此方式执行是否更好？

如果你已经完全描述了你的要求，那么不，我不这么认为：图像本身可能会比绘制它的代码大很多，而我上面给出的代码将在您选择的任何尺寸。另一方面，如果您要添加许多复杂的细节，并且如果图像只需要以一种尺寸显示，那么在绘图程序中创建一次并将其作为图像存储可能会更容易。就像我上面说的那样，iOS中有很多绘图选项;你选择的应该根据你的需要来决定。

Answer 2

解决此问题的最佳方法不是创建视图（UIView）而是创建图层（CAShapeLayer）。您可以从路径创建CAShapeLayer，从而使用向量（而不是位图）描述您的形状。

有许多关于CAShapeLayer的教程将向您展示实现此目的的代码。

Answer 3

如果您将形状文件中的图像加载到UIImageView上，可能是最好的，特别是如果它只是一个背景。然后，您可以将视图的底部约束到应用程序的中间。您也可以对视图的CALayer属性进行一些调整，以达到您的效果。

Answer 4

Caleb的答案已更新为 Swift 5 ：

class PentagonView : UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .clear
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        backgroundColor = .clear
    }

    override func draw(_ rect: CGRect) {
        let size = self.bounds.size
        let h = size.height * 0.85      // adjust the multiplier to taste

        // calculate the 5 points of the pentagon
        let p1 = self.bounds.origin
        let p2 = CGPoint(x:p1.x + size.width, y:p1.y)
        let p3 = CGPoint(x:p2.x, y:p2.y + h)
        let p4 = CGPoint(x:size.width/2, y:size.height)
        let p5 = CGPoint(x:p1.x, y:h)

        // create the path
        let path = UIBezierPath()
        path.move(to: p1)
        path.addLine(to: p2)
        path.addLine(to: p3)
        path.addLine(to: p4)
        path.addLine(to: p5)
        path.close()

        // fill the path
        UIColor.red.set()
        path.fill()
    }
}

如何在Swift中创建独特的形状或UIViews

4 个答案: