Flutter:如何为已绘制完成的Canvas图层依次应用ImageFilter?
嘿,我来帮你搞定这个Canvas滤镜的问题!你之前提到的saveLayer其实是支持ImageFilter的,可能是之前看文档的时候误解了,或者用错了Paint的属性~ 这里有两种简单高效的方法,能完美满足你“画完所有形状后批量依次应用滤镜”的需求:
方法一:多次用saveLayer逐个叠加滤镜
这种方式可以让你按顺序一层一层给绘制内容套滤镜,每一次saveLayer都会把当前内容处理后作为下一层的基础:
// 先定义好两个模糊滤镜 val blurFilter1 = ImageFilter.createBlur(10f, 10f, Shader.TileMode.CLAMP) val blurFilter2 = ImageFilter.createBlur(5f, 5f, Shader.TileMode.CLAMP) // 注意顺序哦!要先保存应用最后一个滤镜的图层,因为restore是从最近的图层开始处理的 canvas.saveLayer(null, Paint().apply { imageFilter = blurFilter2 }) canvas.saveLayer(null, Paint().apply { imageFilter = blurFilter1 }) // 在这里画完你所有的形状 canvas.drawCircle(100f, 100f, 50f, Paint().apply { color = Color.RED }) canvas.drawCircle(200f, 200f, 50f, Paint().apply { color = Color.BLUE }) // 依次恢复图层,每一次restore都会把对应的滤镜应用上去 canvas.restore() canvas.restore()
简单说就是:先给最终要应用的滤镜建图层,再给第一个滤镜建图层,画完之后恢复,就会先过第一个滤镜,再过第二个滤镜,完全符合你“依次应用”的要求~
方法二:把多个滤镜组合成一个,一次性应用
如果你的滤镜顺序是固定的,更推荐这种方法,只需要一次saveLayer,性能更好:
// 把两个滤镜组合起来,顺序是先应用blurFilter1,再应用blurFilter2 val combinedFilter = ComposeImageFilter.create(blurFilter1, blurFilter2) // 只需要保存一次图层,直接用组合后的滤镜 canvas.saveLayer(null, Paint().apply { imageFilter = combinedFilter }) // 照旧画所有形状 canvas.drawCircle(100f, 100f, 50f, Paint().apply { color = Color.RED }) canvas.drawCircle(200f, 200f, 50f, Paint().apply { color = Color.BLUE }) // 恢复图层,一次性把所有滤镜都应用上 canvas.restore()
为啥你之前的尝试没效果?
你之前在saveLayer里用的是colorFilter,但我们需要的是imageFilter呀!saveLayer的Paint参数可以设置imageFilter,专门用来给整个图层应用图像滤镜,刚好匹配你的需求~
内容的提问来源于stack exchange,提问作者Piotr Dabkowski




