如何使用CGContext绘制指定样式填充圆？是否需借助图片实现？

Hey there! 针对你的问题，我们可以根据你需要的圆的样式复杂度来选择不同的实现方式，下面分情况详细说明：

一、基础样式圆：优先用Core Graphics API（比如fillEllipse(in:)） #

如果你的圆是纯色、带阴影、渐变、简单边框这类基础样式，直接用CGContext的原生API就完全够用，而且相比图片渲染，它的性能更好、灵活性更高（可以动态调整颜色、大小、阴影参数等）。

先修正你现有代码的小细节 #

你当前的代码里，CGRect(x: center.x, y: center.y, width: cursorSize, height: cursorSize)会让圆的左上角在center位置，而不是以center为圆心。需要调整rect的原点，让圆居中：

// 修正后的rect：以center为圆心
let rect = CGRect(x: center.x - cursorSize/2, y: center.y - cursorSize/2, width: cursorSize, height: cursorSize)

扩展基础样式的示例 #

比如要绘制带渐变填充+黑色边框的圆，可以这样写：

private func drawStyledCursor(inContext ctx: CGContext) {
    ctx.saveGState()
    let center = pointFrom(angle: currentAngle)
    let rect = CGRect(x: center.x - cursorSize/2, y: center.y - cursorSize/2, width: cursorSize, height: cursorSize)
    
    // 1. 设置阴影
    ctx.setShadow(offset: CGSize(width: 0, height: 0), blur: 3, color: cursorShadowColor.cgColor)
    
    // 2. 创建径向渐变
    let gradientColors = [UIColor.systemBlue.cgColor, UIColor.systemPurple.cgColor] as CFArray
    guard let gradient = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(),
                                   colors: gradientColors,
                                   locations: [0.0, 1.0]) else {
        ctx.restoreGState()
        return
    }
    let gradientCenter = CGPoint(x: rect.midX, y: rect.midY)
    let gradientRadius = min(rect.width, rect.height) / 2
    
    // 3. 绘制渐变圆
    ctx.drawRadialGradient(gradient,
                           startCenter: gradientCenter,
                           startRadius: 0,
                           endCenter: gradientCenter,
                           endRadius: gradientRadius,
                           options: .drawsBeforeStartLocation)
    
    // 4. 添加边框
    ctx.setStrokeColor(UIColor.black.cgColor)
    ctx.setLineWidth(2)
    ctx.strokeEllipse(in: rect)
    
    ctx.restoreGState()
}

二、复杂样式圆：使用图片绘制 #

如果你的圆有复杂纹理、多层精细特效、不规则图案（比如带有渐变纹理+镂空+反光的设计，用Core Graphics很难精准还原），这时候建议用预先设计好的图片来绘制，能保证和设计稿完全一致。

图片绘制的示例代码 #

private func drawImageCursor(inContext ctx: CGContext) {
    ctx.saveGState()
    let center = pointFrom(angle: currentAngle)
    let rect = CGRect(x: center.x - cursorSize/2, y: center.y - cursorSize/2, width: cursorSize, height: cursorSize)
    
    // 建议提前缓存图片，不要每次绘制都加载，避免性能损耗
    guard let cursorImage = UIImage(named: "custom_styled_cursor") else {
        ctx.restoreGState()
        return
    }
    
    // 绘制图片到指定rect
    cursorImage.draw(in: rect)
    
    // 如果需要额外添加阴影，也可以继续设置
    ctx.setShadow(offset: CGSize(width: 0, height: 0), blur: 3, color: cursorShadowColor.cgColor)
    
    ctx.restoreGState()
}

⚠️ 注意：要为图片准备@2x、@3x的分辨率版本，保证在不同设备上的清晰度，并且尽量提前加载缓存图片，避免重复IO操作影响性能。

总结选择建议 #

• 👉 如果样式是纯色、渐变、阴影、边框这类可通过Core Graphics组合实现的效果，优先用fillEllipse(in:)或其他CGContext绘制API，性能更好、动态调整更方便。
• 👉 如果样式复杂到用API难以精准复现，选择图片绘制，能保证视觉效果和设计完全一致。

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