在 Vue Konva 中仅检测非透明像素的图像事件 (drawHitFromCache)答案

【问题标题】：Detecting image events for non-transparent pixels only (drawHitFromCache) in Vue Konva在 Vue Konva 中仅检测非透明像素的图像事件 (drawHitFromCache)
【发布时间】：2018-11-26 16:16:06
【问题描述】：

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

Here is the demo 我正在合作。它基本上只是加载狮子的图像并将鼠标事件附加到它。

根据文档，为了仅对不透明像素进行事件检测，我必须在狮子的图像对象上调用方法 cache() 和 drawHitFromCache()。

在 Vue 中应该在代码中的什么位置调用这两个方法？当我尝试在 Image 的 onload 回调中调用它们时（参见演示中注释的 第 46-47 行），我收到以下错误：

Konva error: Width or height of caching configuration equals 0. Caching is ignored.

和

Cannot read property 'scene' of undefined

谢谢！

【问题讨论】：

标签： javascript vue.js konvajs

【解决方案1】：

Vue 可以异步更新组件的属性。因此，当您调用 cache() 时，您会看到 Caching is ignored，因为节点尚未更新，因此 Konva 没有关于其大小的信息。要解决此问题，您可以在 updated 生命周期方法（加载图像时）中调用 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();
  });
};

【讨论】：