Infinite whiteboard with konvaJS and Angular — part 1
Working in an advance realtime collaboration board requires us to use and extra technics. In this note i’ll tell how to create Infinite whiteboard with KonvaJS and Angular. The story bellow allow us to better understand how the KonvaJS works.
Let’s start!
First of all, we need to understand a some API of KonvaJS:
- Stage - a stage is used to contain multiple layers
- Layer - are tied to their own canvas element and are used
to contain groups or shapes. - Shape - are primitive objects such as rectangles,
circles, text, lines, etc.
Design Infinitely whiteboard
Based on this knowledge we can to design Infinite whiteboard.
There are a three main entities in this solution:
- Stage will include a two layers
- Back layer created for render cells
- Main layer will use to draw a different shapes
After create this entities you need to subscribe to stages dragend event. And update cells on the back layer.
Result
Source code
WhiteBoard class init layers and shapes. BackLayerRender draw cells and update them when dragend event appears.
Conclusion
I wrote this article to present how to create infinite whiteboard with KonvaJS. I hope that it will be useful for developers, because there are a lot of project try to design realtime collaboration board and this feature is very important. KonvaJS is a powerful tools to work with canvas, i am going to continue tell about it. The full source code you find by link source code.
