当贝塞尔曲线的阴影超出画布边界,在不改变位置的情况下如何正常显示?

当贝塞尔曲线的阴影超出画布边界,在不改变位置的情况下如何正常显示?


鸿蒙
2025-03-26 08:58:58
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
李游LEO
  1. 启用裁剪绘制
    调用Canvas.saveLayer()创建离屏图层,配合Canvas.clipRect()设置画布裁剪区域,确保阴影绘制范围被限制在画布边界内,超出部分自动裁剪。
  2. 动态调整阴影参数
    通过计算阴影扩散范围与画布边界的差值,动态调整阴影的模糊半径(blurRadius)和偏移量(offsetX/Y),避免阴影过度扩散。
  3. 使用离屏缓冲技术
    在更大的虚拟画布上先绘制完整阴影,再通过​​Canvas.drawBitmap()​​将处理后的结果贴图到实际画布,既保留完整阴影效果,又避免直接越界。


代码:

// 创建离屏画布
const offscreenCanvas = createOffscreenCanvas(width * 2, height * 2)
const offscreenPaint = Paint()
offscreenPaint.setShadow(blur, dx, dy, color)

// 在离屏画布绘制贝塞尔曲线
drawBezierPath(offscreenCanvas, path)

// 将离屏结果绘制到实际画布(自动裁剪越界部分)
mainCanvas.save()
mainCanvas.clipRect(0, 0, canvasWidth, canvasHeight)
mainCanvas.drawBitmap(offscreenBitmap, 0, 0, null)
mainCanvas.restore()
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
分享
微博
QQ
微信
回复
2025-03-26 09:22:12
相关问题
HarmonyOS 曲线绘制
871浏览 • 1回复 待解决
有没有实现曲线相关库?
669浏览 • 1回复 待解决
arkUI怎么绘制三段曲线
198浏览 • 1回复 待解决