-
-
Notifications
You must be signed in to change notification settings - Fork 1k
Description
Background
When using Group node to handle a large content of child nodes which is overflow the Group size,we need to recalculate the position of child nodes by the latest scroll positon of Group, remove the overflowed nodes and create the new nodes. When building applications like Sheet(with cells and scroll container) and Processon(large pannel)
Introduce ViewPortGroup
Like most 2d game engine contains a main concept of Camera,We can add new type of Node called ViewPortGroup.
It extends Group node and provide a method and an option
- method: moveViewPort: move the view port when scroll position x or y changed.
- options: getViewPortChildren: return the child nodes by lastest viewport
The child nodes position should be affected by the viewport of parent ViewPortGroup
It works like this

More benefit
We can impelment incremental draw by reuse the oringin viewport canvas image with context.drawImage,which is similar to the Shape canvas cache. When moveViewPort called
- we compair the latest viewport and prev viewport to get a incremental viewport
- call getViewPortChildren to get nodes that need to redraw
- combile clip, drawImage, redraw nodes together to do faster rendering. In our sheet like application,it make 3x faster in render large content of nodes when scrolling
The all approach bellow is implemented and be used in production. Because the approach add a new node type of ViewPortGroup,I dont know whether it meets the design patten of Konva. I could create a PR if the proposal issue is needed