聊天小三角

Posted 2020-08-07

绘制聊天小三角

1.先创建一个UIView， 并添加在父视图上

let blankView = UIView(frame: CGRectMake(100, 100, 100, 100))

blankView.backgroundColor = UIColor.greenColor()

blankView.layer.mask = test(blankView)

self.view.addSubview(blankView)

 

2.创建一个方法

//设置小三角

    func test(showView: UIView) -> CAShapeLayer {

        let viewWidth = CGFloat(CGRectGetWidth(showView.frame))

        let viewHeight = CGFloat(CGRectGetHeight(showView.frame))

 

        //所占的宽度,整个view所占的宽度不会变,已经被制定,所以这个宽度会占用整个view的宽度,

        let rightSpace: CGFloat = 10

        //距离顶部的距离

        let topSpace: CGFloat = 30

        

        let point1 = CGPointMake(0, 0)

        let point2 = CGPointMake(viewWidth - rightSpace, 0)

        let point3 = CGPointMake(viewWidth - rightSpace, topSpace)

        let point4 = CGPointMake(viewWidth, topSpace)

        let point5 = CGPointMake(viewWidth - rightSpace, topSpace + 10)

        let point6 = CGPointMake(viewWidth - rightSpace, viewHeight)

        let point7 = CGPointMake(0, viewHeight)

        

        let path = UIBezierPath()

        path.moveToPoint(point1)

        path.addLineToPoint(point2)

        path.addLineToPoint(point3)

        path.addLineToPoint(point4)

        path.addLineToPoint(point5)

        path.addLineToPoint(point6)

        path.addLineToPoint(point7)

 

        let layer = CAShapeLayer()

        layer.path = path.CGPath

        return layer

    }