Layout processing method and device for tree-shaped Canvas

Abstract

The invention discloses a layout processing method and device for tree-shaped Canvas, and belongs to the technical field of computers. The method comprises the steps of obtaining layout parameters andtree structure data of a Canvas; respectively creating a virtual DOM object for each level of node in the tree structure data, calculating the width and the height of each virtual DOM object, and recording the width and the height as the virtual width and the virtual height of each level of node; if the layout parameters indicate that the Canvas are arranged left and right, traversing from the root node, and performing reverse recursion according to the virtual height of the child node of the stage to calculate the new virtual height of the father node of the previous stage every time the child node of the stage is added until the new virtual height of the root node is calculated in a recursion manner; according to the virtual width and the new virtual height of each level of node, obtaining first position information of each level of node, and respectively creating a real DOM object for each level of node; and rendering the real DOM object corresponding to each level of node to the Canvas according to the first position information of each level of node. The canvas rendering efficiency can be improved.

Description

technical field [0001] The present invention relates to the field of computer technology, in particular to a method and device for processing the layout of a tree-like Canvas. Background technique [0002] At present, common chart libraries are usually drawn based on HTML5 Canvas (canvas). Canvas is an important new element in HTML5, which is specially used to draw images. Placing a Canvas element on a web page is equivalent to placing a " Canvas” in which images can be drawn. More specifically, text (ie text information), lines (such as straight lines, curves or arcs, etc.), rectangles, circles, etc. can be drawn on the canvas. [0003] In the layout process of the traditional tree-like Canvas canvas, the coordinates of the root node are usually set according to the center point of the canvas, and each time a new child node is added, the coordinates of the child nodes are set according to the coordinates (x, y) of the parent node. Take the layout as an example, the vertic...

AI Technical Summary

Problems solved by technology

[0003] In the layout process of the traditional tree-like Canvas canvas, the coordinates of the root node are usually set according to the center point of the canvas, and each time a new child node is added, the coordinates of the child nodes are set according to the coordinates (x, y) of the parent node. Take the layout as an example, the vertical coordinates of the parent node are not fixed, each time a new child node is added to the parent node, the vertical coordinates of the parent node will be set according to the cumulative height of all the child nodes of the parent node, then the parent node's The change must also cause a higher-level position change, and so on. It can be seen that this method of rendering first, then adjusting, and then rendering results in lower canvas rendering efficiency

Images