It is necessary to realize a version of kanban with multiple teams of progress nodes. Based on the efficiency requirements, it is necessary to investigate the realization methods of visual Echarts diagram, native Canvas and so on, and choose to use the native Canvas to achieve the effect. In the process of getting familiar with canvas, IT is understood that the plug-in konvaJS provides rich API and graphics support. Canvas can be operated just like DOM. It provides rich graphics drawing API and supports event operation of Canvas element with better performance.
What is a Konva?
Konva is a 2D JavaScript framework library based on Canvas, which can easily achieve graphical interaction effects in desktop applications and mobile applications. It can achieve high performance animation, transitions, node nesting, local operations, filters, caching, events and other functions, not only for desktop and mobile development, but also a wider range of applications. Allows drawing on stage, adding event listeners, moving or zooming a figure, independent rotation, and efficient animation. This can be done easily even with thousands of graphics in the application.
2. Basic elements
Konva’s graph tree is shown as follows:
Stage
|
+——+——+
| |
Layer Layer
| |
+—–+—–+ Shape
| |
Group Group
| |
+ +—+—+
| | |
Shape Group Shape
|
+
|
Shape
Keywords: stage, layer, group, shape
• The root node stage is called the stage. When creating the stage, you need to wrap the mounted DOM node ID. The whole view is considered as a stage;
• Layer can be understood as layer, each layer has two elements: scene layer and interaction layer. Scene layer is used to draw visible graphics, and interaction layer is used to monitor high-performance interaction events.
• A group group is a container element that can manage multiple graphs or groups, and groups can also manage groups;
• Shape provides basic element shapes: triangles, circles, text, lines, polygons, paths, arrows, etc.
3. Plug-in to introduce
3.1., download KonvaJS code, use script tag to import the Konva library you need to use.
3.2. NPM installation
npm install konva –save
var Konva = require(‘konva’);
import Konva from ‘konva’;
3.3. The CDN load
< script SRC = “unpkg.com/konva@ ^ 4.0….
4. The basic use steps
• step1. Create the stage
Mount the DOM element
• step2. Create layer and draw on it
• step3. Draw graph (circle)
5. Kanban implementation
5. 1. Implementation idea
After providing the basic components and graphics, it is necessary to combine the business and the effect diagram to combine the basic components with the business, and multiple graphics nodes need algorithm ranking
5. 2. Algorithm steps
• step1. Overall interface element layout
The whole stage is divided into 50px*50px cells with minimum interval to ensure stable display effect;
The stage width was divided into 14 parts, with the start and end taking up 2/14 each, and the progress of the middle team taking up 10/14. Secant lines of 2/14 and 12/14 were drawn according to the progress.
The height of the stage is determined by the number of teams 16*50px;
• step2. Draw the start and end points
Each center point as the center of the circle, draw a circle graph, add text description, starting point line to the starting line, end line to the end point line;
• step3. Draw team progress nodes
Each team is divided into a row with a height of 50px. State nodes are drawn according to team data status, and the current progress is distinguished by color.
• step4. Connect the cable according to the status node
Different colors are distinguished on the left and right sides of the current progress node, and the end node is directly connected to the end dividing line.
5. 3. Code implementation
6. conclusion
Compared with Canvas, konvaJS provides a convenient API for the realization of basic graphics. In the development process, it is unnecessary to pay too much attention to the realization of basic graphics, and more energy can be put into the combination and layout of graphics.
Performance optimization compared to canvas, each step of node drawing is loaded in memory, and the final layer.draw(); Mounts them all to dom for great performance savings;
The core of the whole kanban implementation is the layout localization algorithm and realization idea of many basic nodes.
This version of Kanban is static and does not provide user interaction, but konvaJS ‘most powerful performance advantage is high performance interaction, especially when multiple nodes are listening for user interaction.