Search code examples
konvajsreact-konvakonva

Konva.js How to drag images and resize with Transformer?

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

Solution

  • Make sure you cache a shape when image is loaded.

    useLayoutEffect(() => {
  if (image) {
    shapeRef.current.cache();
  }
}, [shapeProps, image, isSelected]);