CrossApp坐標(biāo)系淺談

2018-08-27 15:27 更新

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

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

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

CrossApp坐標(biāo)系
        

節(jié)點(diǎn)的概念

談到CrossApp的坐標(biāo)系,不得不談到視圖類CAView。我們來看看API中CAView的類說明 : 
視圖類CAView是整個(gè)CrossApp引擎最基本的類,負(fù)責(zé)將各式各樣的界面呈現(xiàn)出來,我們?cè)贏pp中所能看見的的一切界面其實(shí)就是一個(gè)個(gè)CAView的組合。CAView負(fù)責(zé)在屏幕上定義矩形區(qū)域,在展示用戶界面及響應(yīng)用戶界面交互方面發(fā)揮關(guān)鍵作用。每個(gè)視圖對(duì)象要負(fù)責(zé)渲染試圖矩形區(qū)域中的內(nèi)容,并響應(yīng)該區(qū)域內(nèi)發(fā)生的操作事件,視圖是應(yīng)用程序用戶交互的重要機(jī)制。

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

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

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


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

CrossApp坐標(biāo)系2

如圖所示,屏幕上顯示了兩個(gè)CAView分別是A和B,


上下左右邊距、中心點(diǎn)、寬高

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

示意圖.jpg

Layout

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


起始點(diǎn)、中心點(diǎn)、寬高(舊版本)

那么CAView在坐標(biāo)系中分別定義了三個(gè)屬性:Frame、Bounds、Center。API定義如下:
E715A5A28490D0516B11CAEC7F3F488.jpg
Frame
類型:DRect
解釋:確定view在屏幕上顯示的位置和大小,參考的是父視圖的坐標(biāo)系統(tǒng),frame屬性是view及其子類共有屬性。DRect包括兩個(gè)成員,一個(gè)是起點(diǎn)坐標(biāo)origin,另一個(gè)是寬高size,創(chuàng)建一個(gè)view必須指定Frame,否則看不見任何效果。對(duì)于CAView及其子類的frame操作,在createWithFrame、setFrame等操作時(shí),如果DRect的size成員設(shè)置為(0,0),則不改變view的大??;如果只想改變view的坐標(biāo),不需要改變view的大小,則可采用setFrameOrigin方法來進(jìn)行設(shè)置,get/set{}。

Bounds
類型:DRect
解釋:view在自身坐標(biāo)系統(tǒng)中的位置和大小,參考的是自身的坐標(biāo)系統(tǒng),DRect的origin值永遠(yuǎn)都是(0,0),bounds屬性是view及其子類共有屬性。在設(shè)置frame時(shí),bounds也確定,其值等于frame的值。bounds和frame是有區(qū)別的,frame的值會(huì)隨著view的縮放操作改變,bounds的值則不會(huì)改變,get/set{}。

Center
類型:DRect
解釋:view的中心點(diǎn)在屏幕上的位置,CrossApp采用的坐標(biāo)系是屏幕坐標(biāo)系,即左上角為原點(diǎn),向右和向下分別對(duì)應(yīng)X和Y軸。在CrossApp中我們確定一個(gè)view的位置,是通過origin和size來設(shè)定的,為了方便,這里可以直接使用Center將view的中心點(diǎn)設(shè)置在我們想要的位置。如果只想改變view的坐標(biāo),不需要改變view的大小,則可采用setFrameOrigin方法來進(jìn)行設(shè)置,get/set{}。

測(cè)試代碼:

//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);


測(cè)試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() );

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)