Question

我正在尝试创建一个带有圆形边缘的UILable，更像是一个半平行四边形，其半径为波纹管（表示EU 15）。我已经有UILabel的出口了。任何帮助将不胜感激。

Answer 1

您可能想使用UIBezierPath作为自定义视图的遮罩。然后，您可以将标签添加为子视图，也可以将标签叠加在其顶部。

这是一个基本示例...

红色矩形只是视图背景-白色部分是带有路径蒙版的自定义视图：

这里是UIImageView后面，上面是UILabel：

代码非常简单：

@IBDesignable
class DanuShapeView: UIView {

    let shapeLayer = CAShapeLayer()

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    override func prepareForInterfaceBuilder() {
        // make sure the background is clear
        backgroundColor = .clear
    }

    func commonInit() -> Void {

        // add the shape layer
        layer.addSublayer(shapeLayer)

        // fill color for the shape
        shapeLayer.fillColor = UIColor.white.cgColor

        // make sure the background is clear
        backgroundColor = .clear

    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let width = bounds.size.width
        let height = bounds.size.height

        let bezierPath = UIBezierPath()

        // start at bottom-left
        bezierPath.move(to: CGPoint(x: 0.0, y: height))

        // add curve
        bezierPath.addCurve(to: CGPoint(x: height, y: 0.0),
                            controlPoint1: CGPoint(x: height * 0.6, y: height),
                            controlPoint2: CGPoint(x: height * 0.4, y: 0.0))

        // add line to top-right
        bezierPath.addLine(to: CGPoint(x: width, y: 0.0))

        // add line to bottom-right
        bezierPath.addLine(to: CGPoint(x: width, y: height))

        // close the path
        bezierPath.close()

        shapeLayer.path = bezierPath.cgPath

    }

}

请注意，通过使用@IBDesignable，您可以看到在IB /情节提要中布置视图时的外观。

平行四边形UILabel的左上角是圆形的

1 个答案: