Question

因此，我基本上是在尝试复制this behavior-仅检测非透明像素的事件（将鼠标悬停在狮子上时看到）-但在 vue-konva 中。

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

根据该文档，为了仅对非透明像素进行事件检测，我必须在狮子的图像对象上调用方法p.PropertyType.IsGenericType && p.PropertyType.GetGenericTypeDefinition().Equals(typeof(ICollection<>))和cache()。

应该在代码的什么时候在Vue中调用这两种方法？当我尝试在图片的drawHitFromCache()回调中调用它们时（请参见演示中的第46-47行注释），会出现以下错误：

onload

和

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

谢谢！

Answer 1

Vue可能会异步更新组件的属性。因此，当您呼叫cache()时，会看到Caching is ignored，因为尚未更新节点，因此Konva没有有关其大小的信息。要解决此问题，您可以在cache生命周期方法中调用updated（加载图像时）。或者，您可以在下一个刻度上缓存节点：

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();
  });
};

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

1 个答案: