变换 UIView 形状答案

【问题标题】：Transform UIView shape变换 UIView 形状
【发布时间】：2018-01-24 07:43:54
【问题描述】：

我想使用 Swift 将我的 UIView 的形状转换成这个（白色的 UIView - 看右边）：

任何想法如何做到这一点？我想我应该使用转换功能，但我不知道具体如何。提前致谢！

【问题讨论】：

显示你现在得到的代码
事实上，我没有什么可展示的，因为没有什么是真正接近预期的。我有一些可以创建平行四边形的东西，但它不是所需的形状：myView.transform = CGAffineTransform(a: 1.0, b: 0.0, c: -0.3, d: 1.0, tx: 0.0, ty: 0.0)
所以连视图本身的代码都没有吗？
这只是一个普通视图，宽度 = 200，高度 = 20。如图所示。
为什么每次我要一个代码，而不是在问题中包含代码，人们开始在 cmets 中解释代码是什么样的？

标签： ios swift uiview transform shape

【解决方案1】：

更新：

这是更新，我在第一个答案中误解了您的问题你需要继承 UIView 并用你自己的行为覆盖默认的 draw 方法。要调整角度，您可以更改offsetFactor

class ShapeView : UIView {
    public var bgc = UIColor.clear
    override init(frame: CGRect) {
        super.init(frame: frame)
        //backup old background color
        self.bgc = backgroundColor!
        backgroundColor = UIColor.clear
    }

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

    override func draw(_ rect: CGRect) {
        let size = self.bounds.size

        let offsetFactor = size.width * 0.98

        //define the points
        let tl = self.bounds.origin //top left
        let tr = CGPoint(x:tl.x + size.width, y:tl.y) //top  right
        let br = CGPoint(x:tl.x + offsetFactor, y:tr.y + size.height) // bottom right
        let bl = CGPoint(x:tl.x, y:tr.y + size.height) //bottom left

        let path = UIBezierPath()
        path.move(to: tl)
        path.addLine(to: tr)
        path.addLine(to: br)
        path.addLine(to: bl)
        path.close()

        //set old background color
        bgc.set()
        path.fill()
    }
}

Image

~~我希望我确实理解你的问题。你需要继承 UIView 并用你自己的行为覆盖默认的 draw 方法。要调整尖顶，您可以更改offsetFactor 这应该可以完成工作~~

class ShapeView : UIView {
    public var bgc = UIColor.clear
    override init(frame: CGRect) {
        super.init(frame: frame)
        //backup old background color
        self.bgc = backgroundColor!
        backgroundColor = UIColor.clear
    }

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

    override func draw(_ rect: CGRect) {
        let size = self.bounds.size

        let offsetFactor = size.height * 0.7

        //define the points
        let tl = self.bounds.origin //top left
        let tr = CGPoint(x:tl.x + size.width, y:tl.y) //top  right
        let br = CGPoint(x:tr.x, y:tr.y + offsetFactor) // bottom right
        let bm = CGPoint(x:size.width/2, y:size.height) ////bottom middle
        let bl = CGPoint(x:tl.x, y:offsetFactor) //bottom left

        let path = UIBezierPath()
        path.move(to: tl)
        path.addLine(to: tr)
        path.addLine(to: br)
        path.addLine(to: bm)
        path.addLine(to: bl)
        path.close()

        //set old background color
        bgc.set()
        path.fill()
    }
}

Storyboard and Simulator

【讨论】：

他指的是白色视图，而不是绿色图片，但我相信他应该能够通过修改您在此处所做的事情来得出正确的解决方案
谢谢，我已更改答案以匹配问题

【解决方案2】：

伙计们，我找到了一个更简单的解决方案，可以完美地作为 UIView 的扩展：

extension UIView {

    func makeItEdgy() {
       let bounds = self.bounds

        // Create path to mask the view
        let path = CGMutablePath()
        path.move(to: bounds.origin)
        path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.minY))
        path.addLine(to: CGPoint(x: bounds.maxX - (bounds.height / 5), y: bounds.maxY))
        path.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
        path.closeSubpath()

        let maskLayer = (self.layer.mask as? CAShapeLayer) ?? CAShapeLayer()
        maskLayer.path = path

        self.layer.mask = maskLayer
    }
}

【讨论】：