CrossApp coordinate system is a simple talk

When we learn CrossApp, we can make sure that the basic conceptual things can greatly improve the efficiency of our study of CrossApp. Let's talk briefly about CrossApp's coordinate system today.

The underlying coordinate system

---

CrossApp uses a coordinate system that is the screen coordinate system, i.e. the upper left corner is the origin, the right is the X-axis growth direction, the downward corresponding Y-axis growth direction. Pictured:

The concept of nodes

---

When it comes to CrossApp's coordinate system, you have to talk about view class CAView. L et's take a look at the class description of CAView in the API:
View class CAView is the most basic class of the entire CrossApp engine, responsible for presenting a variety of interfaces, we can see in the app all the interface is actually a combination of CAView. C AView is responsible for defining rectangular areas on the screen and plays a key role in presenting the user interface and responding to user interface interactions. Each view object is responsible for rendering the content in the area of the attempted rectangle and responding to operational events that occur in that area, and the view is an important mechanism for application user interaction.

In addition to displaying content and handling events, you can try to manage one or more sub-views. We can add multiple childviews to a view, and as parentviews, the parent nodes, are responsible for managing their direct child views and adjusting their position and size as needed, as well as responding to events that they have not handled.

Based on the class description, we can draw the following conclusions:

1. All you can see is a derived class of CAView.
   
2. SubCAView can be added above CAView.
   
3. The parent node manages the child view
   

Newbies may not understand the concept of parent nodes and child views and B is added to A, and if at this point we adjust the coordinate position of A, then B will change with the coordinates of A. S o we say: B is the child node of A (also known as the child view), and A is the parent node of B. S ince B is a child of A (sub-view), B can use A's node coordinate system
I draw a picture to illustrate:

As shown in the figure, the two CAViews shown on the screen are A and B, respectively.

Up and down left and right margins, center points, wide height

---

CAView defines a property in the coordinate system: DLayout. The API is defined as follows:

Layout

Type: DLayout
Explanation: Determines how view appears on the screen.

Start point, center point, height (older version)

---

CAView then defines three properties in the coordinate system: Frame, Bounds, Center. The API is defined as follows:
Frame
Type: DRect
Explanation: Determines the position and size of the view displayed on the screen, refers to the coordinate system of the parent view, and the frame property is a common property of the view and its children. T he DRect consists of two members, one at the starting coordinates and the other at wide height size, and creating a view must specify Frame or no effect will be visible. For frame operations of CAView and its sub-classes, the size of the view is not changed if the size of the target's size is set to (0,0) for operations such as creativeWithFrame, setframe, etc., and if you only want to change the coordinates of the view and do not need to change the size of the view, you can set it up using the setFrame Origin method, get/set.

Bounds
Type: DRect
Explanation: View's position and size in its own coordinate system, refer to its own coordinate system, the origin value of DRect is always (0,0), bounds property is the view and its sub-class common properties. W hen you set frame, bounds also determine that its value is equal to the value of frame. T here is a difference between bounds and frames, the value of frame changes as the view zooms, and the value of bounds does not change, get/set.

Center
Type: DRect
Explanation: The center point of the view is positioned on the screen, and CrossApp uses a coordinate system that is the screen coordinate system, i.e. the top left corner is the origin, corresponding to the X and Y axes to the right and down, respectively. I n CrossApp we determine the location of a view, which is set by origin and size, and for convenience, center can be used directly to set the center point of the view where we want it. If you only want to change the coordinates of the view and do not need to change the size of the view, you can set it up using the setFrame Origin method, get/set.

Test code:

//Frame
    CAView * frameView = CAView::createWithColor(CAColor_blue);
    frameView->setFrame(DRect(100, 100, 100, 100));
    //this->getView()->addSubview(frameView);
     
    //添加并设置z为2
    this->getView()->insertSubview(frameView, 2);
     
    //Bounds
    CAView* boundsView = CAView::createWithColor(CAColor_red);
    boundsView->setBounds(DRect(300, 300, 100, 100));
    this->getView()->addSubview(boundsView);
     
    //Center
    CAView* centerView = CAView::createWithColor(CAColor_orange);
    centerView->setCenter(DRect(100, 100, 100, 100));
    //this->getView()->addSubview(centerView);
     
    //添加并设置z为1
    this->getView()->insertSubview(centerView, 1);

Changes in frame andbounds after testing View zoom:

    //缩放后的Frame和Bounds
    frameView->setScale(2);
     
    DRect frameRect = frameView->getFrame();
    DRect boundsRect = frameView-> getBounds();
    CCLog( "frameView->getFrame():x:%f,y:%f,width:%f,height:%f", frameRect.getMinX(), frameRect.getMinY(), frameRect.getMaxX() - frameRect.getMinX(), frameRect.getMaxY() - frameRect.getMinY() );
    CCLog( "frameView->getBounds():x:%f,y:%f,width:%f,height:%f", boundsRect.getMinX(), boundsRect.getMinY(), boundsRect.getMaxX() - boundsRect.getMinX(), boundsRect.getMaxY() - boundsRect.getMinY() );