Javascript 在Vue Konva中仅检测非透明像素（drawHitFromCache）的图像事件

所以我基本上是在尝试重现——只检测非透明像素的事件（如悬停在狮子身上时所见）——但是在vue konva中

我和你一起工作。它基本上只是加载lion的图像并将鼠标事件附加到它

根据文档，为了只对不透明像素进行事件检测，我必须调用lion的image对象上的方法

cache（）

和

drawHitFromCache（）

在Vue中应该在代码中的什么时候调用这两个方法？当我尝试在图像的

onload

回调中调用它们时（请参见演示中注释的第46-47行），我会得到以下错误：

Konva错误：缓存配置的宽度或高度等于0。缓存被忽略。

及

无法读取未定义的属性“scene”

---

谢谢大家!

Vue可以异步更新组件的属性。因此，当您调用

cache（）

时，会看到

缓存被忽略

，因为节点尚未更新，所以Konva没有关于其大小的信息。要解决此问题，您可以在

updated

lifecycle方法（加载图像时）中调用

cache

。或者，您可以在下一次勾选时缓存节点：

image.onload = () => {
  // set image only when it is loaded
  this.configImage.image = image;

  this.$nextTick(() => {
    this.$refs.staticImage.getNode().cache();
    this.$refs.staticImage.getNode().drawHitFromCache();
  });
};