2016-05-31 35 views
1

我正在構建應用程序,在某處使用帶有layeredLayout的窗體。在這種形式下,我已經有了兩個標籤堆疊在一起,我想在特定區域寫一個字符串。在代碼名爲1的圖形中的給定位置寫入字符串

第一張圖像(最深的一張)是來自設備相機的圖像,第一張圖像的第一張圖像是一張背景透明的png文件。他們都具有比屏幕分辨率,這就是爲什麼我使用下面的代碼,以顯示他們一個更大的分辨率:

findPhotoBase3().getUnselectedStyle().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FIT); 
findDecoration3().getUnselectedStyle().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED_FIT); 
findPhotoBase3().getUnselectedStyle().setBgImage(montage.getBaseImage()); 
findDecoration3().getUnselectedStyle().setBgImage(montage.getdecorationImageSelected()); 

由於2個圖像縮放到適合屏幕大小,在橫向模式下兩個圖像不覆蓋整個寬度(這是自保持原始圖像比率以來非常正常的)。因此部分堆疊圖像上有空白欄。

我知道我的字符串應該從原始圖像寬度的xx%(這裏是裝飾)開始,並且yy%是原始高度的yy%。因此,我首先需要知道(0,0)點的位置。

所以,如果我添加新的組件到父窗體:

findDecoration3().getParent().add(new Component(){ 

     @Override 
     public void paint(Graphics g) { 
      g.drawString(".", 0 , 0); 
     } 
} 

堆疊的圖像,然後點繪製左,略高於圖像左上角低。我已計算出的x和y偏移是這樣的:

int originalImageWidth = findPhotoBase3().getUnselectedStyle().getBgImage().getWidth(); 
int originalImageHeight = findPhotoBase3().getUnselectedStyle().getBgImage().getHeight(); 
float ratioOriginal = (float) originalImageWidth/originalImageHeight; 

// L'espace disponible dans le containeur parent 
int availableWidth = findPhotoBase3().getParent().getWidth(); 
int availableHeight = findPhotoBase3().getParent().getHeight(); 

// Landscaped mode assumed 
final int displayedImageWidth = (int) (ratioOriginal * availableHeight) ; 
final int displayedImageHeight = availableHeight ; 

// L'image débute à (coordonnées par rapport au container parent see chapter 9.10 of https://www.codenameone.com/files/developer-guide.pdf) 
final int imageStartX0 = (availableWidth - displayedImageWidth)/2; 
// L'image prend toute la hauteur, donc elle commence à 0 dans le container parent 
final int imageStartY0 = 0; 

然而,0點(imageStartX/Y0),其被示出不立在適當的位置(即,確切地在光鹼圖像的左上角)但在兩個方向都有正向偏移。

點繪製如前所示:

g.drawString(".", imageStartX0 , imageStartY0); 

這裏是結果,我獲得(私人照片使用它,只是部分顯示):

Upper left corner of the screen where the small blue point is the one I try to set on the image corner

請請注意,在照片上出現一個帶圈的檢查按鈕。該按鈕位於圖像頂部的容器上。我沒有提到它讓我的問題儘可能清楚。

因此,如果我不能得到正確的0點,我不能在預期位置寫字符串!

編輯1

於是,我就申請了忠告釃的了,也得出這樣的圖像區域周圍的矩形:

@Override 
public void paint(Graphics g) { 

    int color = 0xFF0000; 
    g.setColor(color); 
    g.drawRect(imageStartX0 + getX(), imageStartY0 + getY(), displayedImageWidth, displayedImageHeight); // This red rectangle is expected to be around the image just on its border 

    color = 0x0000ff; 
    g.setColor(color); 
    g.drawString(".", getX() ,getY()); // This blue point is expected to be on the upper left corner of the parent container 

} 

我得到的是下面的圖片Result after using getX and getY methods。讓我感到震驚的是,藍色的點似乎不在父容器的左上角(我會說它應該會更進一步)。看起來Y軸上有一個平移導致這個偏移量。但是,應用以下不任何區別:

g.drawString(".", getX() - g.getTranslateX() ,getY() - g.getTranslateY()); 

什麼令我太是圖像從藍色點,這預計將在容器的左上角開始「上面」(北向) 。那麼孩子有可能被繪在父母的容器之外嗎? =>請參閱編輯2(它的確沒有從上面開始)。

另一方面,由於矩形比圖像窄,我的計算顯示圖像尺寸似乎有缺陷。因此我將不得不以更清晰的方式進行計算。 =>見編輯2(計算是確定的,但看起來像父容器的尺寸必須在塗裝方法內計算)。

EDIT 2

重讀夏嘉曦的我回答試圖繪製一個矩形(而不是寫點字):

g.fillRect(getX() - g.getTranslateX(), getY() - g.getTranslateY(), 5, 5); 
g.drawRect(getX() - g.getTranslateX() ,getY() - g.getTranslateY(), 5, 5); 

和它的工作如預期(藍點是左上角):

Get parent container dimensions inside paint method

因此,這應該與drawString之的Javadoc其中規定

字體從頂部位置繪製,而不是基線。

它解釋了爲什麼點不在預期的位置(我的壞!)。

並得出結論,雖然我不清楚,但我可以通過移動部分代碼(即父容器尺寸部分)內部的而不是外部的paint方法來獲得預期的位置。所以,我的繪製方法現在看起來像:

@Override 
public void paint(Graphics g) { 
    // L'espace disponible dans le containeur parent 
    // CAUTION : This has to be done in the paint method not outside 
    int availableWidth = getWidth(); 
    int availableHeight = getHeight(); 

    // On fait l'hypothèse du mode paysage 
    int displayedImageWidth = (int) (ratioOriginal * availableHeight) ; 
    int displayedImageHeight = availableHeight ; 

    // On récupère les coordonnées de l'image 
    // L'image débute à (coordonnées par rapport au container parent) 
    int imageStartX0 = (availableWidth - displayedImageWidth)/2; 
    // L'image prend toute la hauteur, donc elle commence à 0 dans le container parent 
    int imageStartY0 = 0; 


    int colorNom = 0xFF0000; 
    g.setColor(colorNom); 
    g.drawRect(imageStartX0 + getX(), imageStartY0 + getY(), displayedImageWidth, displayedImageHeight); 

    colorNom = 0x0000ff; 
    g.setColor(colorNom); 
    g.drawString(nom, syntheStartX0 , syntheStartY0 - g.getTranslateY()); 
    g.fillRect(getX() - g.getTranslateX(), getY() - g.getTranslateY(), 5, 5); 
    g.drawRect(getX() - g.getTranslateX() ,getY() - g.getTranslateY(), 5, 5); 

非常感謝任何人可以告訴我,我爲什麼不(正好位於左上角即點)得到預期的結果?

問候

回答

1

組件在一個代號定位在X /他們的父容器的Y和不翻譯成位置。所以0,0的位置是getX(), getY()

可以很明顯的使用translate,使0,0爲你工作了。

傳遞給所述的drawRect(X,Y,W,H) 方法的x和y座標是相對於組件的父的原點 - 而不是 組件本身..其父。這就是爲什麼我們的x位置是 的getX()+ 5,而不僅僅是5

the Codename One Developer Guide Graphics section

+0

謝謝ShaiAlmog。但是在這種情況下,由於圖像沒有填充整個父容器,因此getX()遠離圖像的左側,而getY()會產生與我展示的相同的偏移量。還是我誤解了某些東西? – HelloWorld

+0

你會介意看到我最後的編輯並解釋爲什麼它在你要求父容器的尺寸的地方起作用嗎?事實上,getParent()。getWidth()在paint外部返回一個比getWidth更小的值!填充/保證金相關? – HelloWorld

+1

當時可能沒有佈置該組件。繪畫通常在尺寸改變後完成。請注意,由於尺寸可能因爲方向更改或新的多任務UI之一而變化,所以即使它有效,也不能依賴尺寸 –