Konva调用cache()后imageSmoothingEnabled=false失效如何解决

Konva的imageSmoothingEnabled配置仅对当前画布上下文的直接绘制生效。调用节点cache()方法时，Konva会创建独立的离屏Canvas生成节点缓存快照，Layer层级配置的imageSmoothingEnabled=false不会作用于这个离屏Canvas的绘制流程。默认开启的图像平滑会直接写入缓存生成的位图，后续主画布即使关闭平滑，渲染的已经是带平滑效果的缓存资源，自然无法保持像素化效果。

调用cache()时通过配置项显式关闭缓存离屏画布的图像平滑即可，原有Layer层级配置不需要改动，滤镜也能正常生效：

const LionImage = () => {
  const [image] = useImage("https://konvajs.org/assets/lion.png");
  const imageRef = React.useRef();
  useEffect(() => {
    if (!imageRef.current) return;
    // 缓存时关闭离屏画布平滑
    imageRef.current.cache({
      imageSmoothingEnabled: false
    });
    // 此处添加需要的滤镜，例如灰度、像素化等
    // imageRef.current.filters([Konva.Filters.Grayscale]);
    imageRef.current.getLayer()?.batchDraw();
  }, [image]);
  return <Image image={image} ref={imageRef} width={400} height={400} />;
};

如果项目中存在大量像素化精灵需要缓存加滤镜，可以在初始化阶段全局修改Konva默认配置，避免每次调用cache()重复传参：

import Konva from 'konva';
// 像素化场景建议固定像素比为1，避免高DPI屏自动缩放插值导致模糊
Konva.defaults.pixelRatio = 1;
Konva.defaults.imageSmoothingEnabled = false;

• 重新调用cache()更新缓存（比如修改节点尺寸、更换滤镜后），需要保持imageSmoothingEnabled: false配置，否则会重新生成带平滑的缓存
• 固定pixelRatio=1后渲染清晰度不会受影响，像素化场景本身不需要适配高DPI的插值缩放
• 不需要额外在Image节点上重复配置imageSmoothingEnabled属性，缓存阶段关闭平滑后，主画布会直接渲染无平滑的缓存位图

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