ios 文字外描边效果

设计提出文字描边效果,但是富文本自带的文字描边效果,是向文字内外同时描边 效果

image.png

image.png

image.png

所以需要自己实现,采用的方法是重写textlayer的drawRect,label也一样
思路是先画一层带描边效果的文字
然后再在这层文字上面画不带描边的文字,将没描边的文字压在描边文字上面,代码如下

public override func draw(in ctx: CGContext) {
        guard let attr = self.string as? NSAttributedString else {
            super.draw(in: ctx)
            return
        }
        var newAtt = NSAttributedString.init(attributedString: attr)
        newAtt = newAtt.appendAddAttributes([NSAttributedString.Key.strokeColor : self.strokeColor.cgColor])
        newAtt = newAtt.appendAddAttributes([NSAttributedString.Key.foregroundColor : UIColor.red.cgColor])
        newAtt = newAtt.appendAddAttributes([NSAttributedString.Key.strokeWidth : 15])
        self.string = newAtt
        super.draw(in: ctx)
        self.string = attr
        super.draw(in: ctx)
    }

但是实际效果是,第二次画的效果是上下颠倒的,效果如下

图片发自简书App

查了下是cgcontext的坐标系与UIkIt的坐标系是相反的,相当于一个二维笛卡尔坐标系的第一象限

7790818-61fc7b4c75fe00b6.png

所以将contex上下翻转

        super.draw(in: ctx)
        ctx.scaleBy(x: 1, y: -1)
        ctx.translateBy(x: 0, y: -self.gxHeight)

效果就对了,