CrossApp坐標(biāo)系淺談

大家學(xué)習(xí)CrossApp的時候，搞清楚基礎(chǔ)概念性的東西，能夠大大提高我們學(xué)習(xí)CrossApp的效率。今天就和大家簡單談?wù)凜rossApp的坐標(biāo)系統(tǒng)。

基礎(chǔ)坐標(biāo)系

---

CrossApp采用的坐標(biāo)系是屏幕坐標(biāo)系，即左上角為原點，向右為X軸增長方向、向下對應(yīng)Y軸增長方向。如圖：

節(jié)點的概念

---

除了顯示內(nèi)容和處理事件之外，試圖還可以管理一個或多個子視圖。我們可以在一個view上面添加多個子view，而作為父view，即父節(jié)點，負(fù)責(zé)管理其直接子視圖，并根據(jù)需要調(diào)整他們的位置和尺寸，以及響應(yīng)他們沒有處理的事件。

根據(jù)類說明我們可以得出以下結(jié)論：

1. 所有能看到的都是CAView的派生類。
   
2. CAView上面可以添加子CAView。
   
3. 父節(jié)點管理子視圖
   

新手朋友可能不看明白父節(jié)點和子視圖的概念 并且B是添加在A上的，假如這時候，我們調(diào)整A的坐標(biāo)位置，那么B也將隨A的坐標(biāo)改變而改變。這樣我們就說：B是A的子節(jié)點（也稱子視圖），A是B的父節(jié)點。 由于B是A的子節(jié)點（子視圖），那么B則可以使用A的節(jié)點坐標(biāo)系        
，我畫圖來說明：

如圖所示，屏幕上顯示了兩個CAView分別是A和B,

上下左右邊距、中心點、寬高

---

CAView在坐標(biāo)系中定義了屬性：DLayout。API定義如下：

Layout

類型：DLayout
解釋：確定view在屏幕上顯示的自適應(yīng)方式。

起始點、中心點、寬高（舊版本）

---

//Frame
    CAView * frameView = CAView::createWithColor(CAColor_blue);
    frameView->setFrame(DRect(100, 100, 100, 100));
    //this->getView()->addSubview(frameView);
     
    //添加并設(shè)置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);
     
    //添加并設(shè)置z為1
    this->getView()->insertSubview(centerView, 1);

測試View縮放后,frame和bounds的變化:

    //縮放后的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() );