如何在Flutter中为圆形路径的末端拐角添加阴影

核心逻辑 #

canvas.drawShadow会对传入的完整Path对象全局生效，因此无法直接对单段路径的局部添加阴影，需要通过拆分路径、分层绘制的方式实现需求。 #

实现步骤 #

• 第一步：提取末端局部路径
  通过路径测量工具，从完整的圆形路径上截取仅包含末端拐角的小段路径，截取长度建议略大于阴影扩散半径，避免阴影被裁切。
  • 安卓端可使用PathMeasure的getSegment方法截取指定长度的路径段
  • Web端Canvas可直接通过计算角度，单独绘制末端小段圆弧路径
• 第二步：分层绘制内容
  严格按照以下顺序绘制，避免阴影被遮挡或者漏出：
  1. 先调用canvas.drawShadow对提取的末端局部路径绘制阴影，设置对应阴影颜色、偏移量、模糊半径参数
  2. 关闭阴影效果后，绘制完整的圆形路径，用不透明的路径画笔遮盖住除末端外其他位置的多余阴影
  3. 最后绘制末端的拐角装饰元素（如果有自定义样式）

代码示例 #

安卓端（Kotlin） #

// 单位转换扩展方法
fun Int.dpToPx() = this * resources.displayMetrics.density

// 1. 测量完整圆形路径，截取末端20dp的小段路径
val pathMeasure = PathMeasure(fullCirclePath, false)
val endSegmentPath = Path()
val segmentLength = 20.dpToPx()
pathMeasure.getSegment(
    pathMeasure.length - segmentLength, 
    pathMeasure.length, 
    endSegmentPath, 
    true
)

// 2. 绘制末端阴影
canvas.drawShadow(
    endSegmentPath,
    Color.parseColor("#33000000"), // 阴影颜色
    0f, // X轴偏移
    4.dpToPx(), // 阴影模糊半径
    true
)

// 3. 绘制完整圆形路径，遮盖多余阴影
val pathPaint = Paint().apply {
    color = Color.BLUE
    style = Paint.Style.STROKE
    strokeWidth = 4.dpToPx()
    isAntiAlias = true
}
canvas.drawPath(fullCirclePath, pathPaint)

Web端（JavaScript） #

const ctx = canvas.getContext('2d')
const centerX = 100, centerY = 100, radius = 80
const startAngle = 0, endAngle = Math.PI * 1.5 // 完整圆弧的起止角度
const lineWidth = 4

// 1. 计算末端小段圆弧的起始角度，截取长度约20px
const fullCircleLength = 2 * Math.PI * radius
const shadowSegmentAngle = (20 / fullCircleLength) * 2 * Math.PI
const shadowStartAngle = endAngle - shadowSegmentAngle

// 2. 绘制末端阴影
ctx.shadowColor = 'rgba(0,0,0,0.2)'
ctx.shadowBlur = 8
ctx.lineWidth = lineWidth
ctx.strokeStyle = '#2196F3'
ctx.beginPath()
ctx.arc(centerX, centerY, radius, shadowStartAngle, endAngle)
ctx.stroke()

// 3. 清除阴影后绘制完整圆弧，遮盖多余阴影
ctx.shadowBlur = 0
ctx.beginPath()
ctx.arc(centerX, centerY, radius, startAngle, endAngle)
ctx.stroke()

注意：如果路径末端有特殊的拐角装饰形状，也可以直接针对装饰形状单独构造Path对象绘制阴影，不需要从圆弧上截取路径，效果精度更高。

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