konvajsreact-konvakonva

Problems when Adding a react-konva Rectangle from Form with demo

I'd like to add new Rectangle to a Stage, when the width and the height in a form is submitted. The addition works fine, however, the selection has a large offset, but do not understand why. The selection is fixed when the rectangle is resized, so it must be an issue with my onSelect call. I used the Transformer - rectangle resize - demo as a baseline. https://konvajs.org/docs/react/Transformer.html

Here is my demo: https://codesandbox.io/p/sandbox/laughing-chihiro-f448r6

Expected Rect addition:

enter image description here

Actual Rect addition:

enter image description here

Solution

  • Konva tells you in the console what is wrong:

    Konva warning: "50" is a not valid value for "height" attribute. The value should be a number.

    You can do this:

    width: parseFloat(newRectangleWidth),
height: parseFloat(newRectangleHeight),