Design and Implementation of ccgui Based on cocos2d-x (5) Implementation of tree control

Tree control is a complex control in the GUI system and is widely used. This document does not describe the control in detail and only analyzes the tree control applied in the game, the cocos2d-x itself does not provide any support for the control, nor can it write a complex control similar to the operating system level.

 

Control Requirements:

(1) fold is supported. Click the parent node to fold or expand the child node.

(2) sliding is supported. The background layer of the tree control is a scroll view, which is automatically adjusted based on the size of the tree control.

Of course, the basic components are the widgets and scrollview of this series. When writing this article, widgets and scrollview are more mature and stable than the original prototype, because most of the controls are already used in a large number in complex game systems.

 

Implementation ideas:

(1) The data layer and the display layer are separated. The data layer is a tree-like data structure, which is the basic structure in the computer course and is not described here;

(2) Each time a new node is added, the data layer is updated first, and then the display layer is updated, that is, the data layer is the input of the display layer;

(3) The display layer is relatively troublesome. It is difficult to correctly calculate the node location. This article focuses on this issue.

Control legend:

The abstract diagram is as follows:

To calculate the positions of all nodes more clearly, several symbols are defined here for subsequent descriptions.

The height of node I itself is hi. node I includes the total height of its child as AI. The position of node I (from top to bottom) is defined as pi, nodes 1, 2, 3, 4, 5, 6 in sequence from top to bottom:

The calculation of a is relatively simple. You can add the of several bytes in sequence, and then add your own height. Note that if the node is folded, A = H exists.

 

Now we calculate the position P based on the node height H and total height;

We need to use some basic data to derive a mathematical formula so that any node can easily calculate its location.

Assuming that node 1 is at the positions 0, 2, 3, 4, 5, and 6, the following increments sequentially:

 

OK. Note that the right side of the equation involves the base value 0, the symbol H, the symbol A, and the symbol P, which may be messy. However, you can find that for any node, if a sibling node exists in front of the node, the node can calculate its position based on its sibling node. The formula is: PMN = PM (n-1) + AM (n-1 ), if the node is preceded by a Father's Day node, it depends on the computing location of the parent node. The formula is PM1 = PM + hm, which is summarized as follows:

 

Note that Mn represents not necessarily two numbers, but also complex symbols such as p122321312 (PM = 12232131, n = 2.

With these expressions, writing code should not be a problem. After the location problem of the tree control is solved, other things are code bricks and tiles, which will not be described here.

Cegui implements a tree control. However, the comment clearly states that the quality of the design and implementation is poor, and it fails to reach the same level of other controls. Therefore, it is not recommended, I do not know whether to refer to its interfaces and implementations.

If you have any questions about this article, please kindly advise.

In addition, I recently read the story "Specific mathematics" by my father. The words written by my father are both rigorous and witty. Reading is also a pleasure, as a computer science graduate, I also hope that my post will be rigorous.

Refer:

Cegui source code tree;

 

It must be said: From the word to the web page, the typographical effect has been lost. In addition, for articles with mathematical formulas, it is enough to use images, I didn't expect csdn to add a watermark to the image again.