如何为TextSpriteModel实现带背景的文本圆角效果？

我之前也碰到过一模一样的场景！问题的核心在于：TextSpriteView通过layer设置的圆角是UIKit层面的实时渲染效果，但TextSpriteModel生成最终图片时，是基于自身的绘制逻辑生成像素内容，并没有同步View的圆角处理，所以才会出现预览有圆角、导出图片却没有的情况。

这里给你一套可行的解决方案，让Model和View的圆角效果保持一致，且最终生成的图片也带圆角：

步骤1：给TextSpriteModel添加圆角属性 #

首先在Model里新增一个控制圆角的属性，让它可以被配置，同时和View的layer.cornerRadius同步：

class TextSpriteModel {
    // 原有属性
    var text: String = ""
    var textColor: UIColor = .black
    var bgColor: UIColor = .lightGray
    
    // 新增圆角属性
    var cornerRadius: CGFloat = 0.0 {
        didSet {
            // 可选：通知View同步圆角值
            NotificationCenter.default.post(name: NSNotification.Name("TextSpriteCornerRadiusUpdated"), object: self)
        }
    }
    
    // 其他业务逻辑...
}

步骤2：让TextSpriteView同步Model的圆角值 #

在TextSpriteView里绑定Model时，直接同步圆角属性，保证预览效果和编辑态一致：

class TextSpriteView: UIView {
    var model: TextSpriteModel? {
        didSet {
            guard let model = model else { return }
            self.layer.cornerRadius = model.cornerRadius
            self.layer.masksToBounds = true
            // 同步其他文本、背景色等属性...
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        // 监听圆角变化通知（如果用了Notification的方式）
        NotificationCenter.default.addObserver(self, selector: #selector(updateCornerRadius), name: NSNotification.Name("TextSpriteCornerRadiusUpdated"), object: nil)
    }
    
    @objc private func updateCornerRadius() {
        self.layer.cornerRadius = model?.cornerRadius ?? 0
        self.layer.masksToBounds = true
    }
    
    // 其他View逻辑...
}

步骤3：修改Model的图片生成逻辑，手动绘制圆角背景 #

这是最关键的一步！在Model生成最终图片时，不能依赖View的layer，要自己绘制带圆角的背景：

extension TextSpriteModel {
    func generateFinalImage(size: CGSize) -> UIImage? {
        // 开启图形上下文
        UIGraphicsBeginImageContextWithOptions(size, false, UIScreen.main.scale)
        guard let context = UIGraphicsGetCurrentContext() else {
            UIGraphicsEndImageContext()
            return nil
        }
        
        // 1. 绘制带圆角的背景
        let bgRect = CGRect(origin: .zero, size: size)
        let bgPath = UIBezierPath(roundedRect: bgRect, cornerRadius: cornerRadius)
        bgColor.setFill()
        bgPath.fill()
        
        // 2. 绘制文本（注意留出内边距，避免文本贴到圆角边缘）
        let textRect = bgRect.insetBy(dx: 12, dy: 8)
        let textAttributes: [NSAttributedString.Key: Any] = [
            .foregroundColor: textColor,
            .font: UIFont.systemFont(ofSize: 18, weight: .medium)
            // 可根据需求添加行间距、对齐方式等属性
        ]
        text.draw(in: textRect, withAttributes: textAttributes)
        
        // 生成图片并关闭上下文
        let finalImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return finalImage
    }
}

额外注意点 #

• View里一定要设置layer.masksToBounds = true，否则圆角无法裁剪内部内容；
• 绘制文本时必须添加内边距，不然文字会贴着圆角边缘，视觉效果极差；
• 如果有背景透明的场景，可以根据bgColor的alpha值决定是否绘制背景，或者使用UIColor.clear时跳过背景绘制。

这样调整后，编辑预览时View的圆角和Model属性同步，生成最终图片时Model自己绘制圆角背景，就能保证两端效果完全一致啦！

内容的提问来源于stack exchange，提问作者Sunil Zishan