2

I'm trying to drag and drop these images to the stage. but when I dropped images, I received this error. Konva.js Konva error: Can not cache the node. Width or height of the node equals 0. Caching is skipped. The process that I thought of was

  1. drop the image into stage
  2. If it is clicked, users can resize, rotate, drag.

What should I do differently to successfully resize images?

https://codesandbox.io/embed/magical-meitner-7gic1?fontsize=14&hidenavigation=1&theme=dark

JiHyun Kim
  • 33
  • 3

1 Answers1

0

Make sure you cache a shape when image is loaded.

useLayoutEffect(() => {
  if (image) {
    shapeRef.current.cache();
  }
}, [shapeProps, image, isSelected]);
lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Thanks It's work properly! However, I got one more problem. When the image is resized, the image is not fixed and moves as much as it is reduced in that direction. – JiHyun Kim Jan 25 '22 at 07:49
  • It is not related to the image caching. It is because you are using offset and resetting scale back to 1 on `transformend`. You may need to create a different question for that. – lavrton Jan 25 '22 at 17:29