Drawing a shape using click, mouse move, and click

Konva is a great canvas framework and react-konva also nice. Thanks for the cool things!

I want to dynamic create shape on layers, and I tried add shapes into a list, then Layer show the children, but it’s doesn’t draw the shape as I move mouse. Here is a reproduce demo.

The problem seems like can’t change the shape’s props after update it’s width and height with setState , but don’t know why. Am I miss something or use wrong solution?

Thanks for reply.

[ejarzo]

I realize this isn’t a bug/issue but just to follow up - @navono Instead of creating React elements in your handleClick function, try only setting the state there, and letting render handle the rest. React is declarative, meaning that you describe your app in state, and render automatically reflects any changes you make to state.

If you represent your shapes as an array of objects (each having { x, y, width, height }), and then display that array in render, any time you change values in the array, the shapes will change on the screen. The dimension values will be props for a ColoredRect, so ColoredRect will not need to manage its own dimensions - it can simply render the props that it receives.

I made a demo here: https://codesandbox.io/s/wwpyr3j737

[ejarzo]

@physicsai Very true. Using to() could definitely work but depending on the situation, it may not be desirable because the state of your application would not be in sync with what is being drawn on the canvas. To keep the same declarative approach without ruining the performance, we could optimize the ColoredRect component using shouldComponentUpdate() or, similar to your suggestion, we could separate the shape that is currently being drawn from the rest so that only that one is re-rendered on drag. Then once it is completed, we add it to the list of static shapes.