3

So I'm basically trying to reproduce this behavior - detecting events for non-transparent pixels only (as seen when hovering over the lion) - but in vue-konva.

Here is the demo I'm working with. It basically just loads the image of lion and attaches the mouse events to it.

According to the doc, in order to have the event detection only for non-transparent pixels, I have to call methods cache() and drawHitFromCache() on the image object of lion.

At what point in code should these two methods be called in Vue? When I try to call them in the onload callback of the Image (see the commented lines 46-47 in the demo), I get the following errors:

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

and

Cannot read property 'scene' of undefined

Thank you!

Arx
  • 384
  • 2
  • 13

1 Answers1

2

Vue may update properties of a component asynchronously. So when you are calling cache() you see Caching is ignored because a node is not updated yet, so Konva has no information about its size. To resolve the issue you may call cache in updated lifecycle method (when an image is loaded). Or you can cache the node on the next tick:

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();
  });
};
lavrton
  • 18,973
  • 4
  • 30
  • 63