在代号为1的图形中的给定位置写入字符串 [英] Writing a string at a given position in a drawing in Codename one

问题描述

我正在构建一个应用程序，该应用程序有时会使用带有layeredLayout的表单。在这种形式下，我已经有2个标签彼此堆叠，并且我想在特定区域中写一个字符串。

I am building an app where at some point I use a form with a layeredLayout. In this form I already have 2 labels stacked on top of each other and I want to write a string in a specific area.

第一张图片（最深的一张）是来自设备相机的图像，第一个图像之上的第二个图像是具有透明背景的png文件。它们都具有比屏幕分辨率更大的分辨率，这就是为什么我使用以下代码来显示它们：

The first image (the deepest one) is an image from the device camera and the second image on top of the first one is a png file with transparent background. Both of them have a larger resolution than the screen resolution that's why I am using the following code to display them :

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张图像以适合屏幕尺寸，在横向模式下，两个图像都不能覆盖整个图像宽度（由于保留了原始图像比例，这是很正常的）。因此，在部分堆叠的图像上有空白列。

As the 2 images are scaled to fit screen size, in landscape mode both images do not cover the entire width (which is quite normal since the original image ratio is kept). Therefore there are blank columns on part of the stacked images.

我知道我的字符串应从原始图像宽度（此处为装饰）的xx％和原始高度的yy％开始。因此，我首先需要知道（0，0）点的位置。

I know that my string should start at xx % of the original image width (here decoration) and yy % of the original height. Consequently I first need to know where the (0, 0) point stands.

因此，如果我将新组件添加到父表单：

So if I add a new component to the parent form :

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

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

然后将点向左画堆叠的图像，并且比图像的左上角低一点。我已经计算出x和y偏移量，如下所示：

then the point is drawn left of the stacked images and a bit lower than the images upper left corner. I have computed the x and y offsets like this :

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）不在正确的位置（即完全在photoBase图像的左上角），但在两个方向上都有正偏移。

However the 0 point (imageStartX/Y0) that is shown does not stand at the right location (ie exactly in the upper left corner of the photoBase image) but with positive offsets on both directions.

如先前所示绘制点：

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

这是我得到的结果（使用了私人照片，所以只显示了一部分）：

And here is the result I get (private photo used so only part of it is shown) :

请注意，图片上出现带圆圈的选中按钮。此按钮位于图像顶部的容器上。我没有提到它是为了使我的问题尽可能清楚。

因此，如果我不能正确地获得0分，我将无法解决将能够在预期位置写入我的字符串！

Consequently if I can't get the 0 point right, there is no way I will be able to write my string at the expected location!

编辑1

所以我尝试运用Shai的建议并在图像区域周围绘制一个矩形，如下所示：

So I tried to apply the piece of advice Shai gave and also to draw a rectangle around the image area like this :

@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

}

我得到的是以下图片。令我吃惊的是，蓝点似乎并不完全位于父容器的左上角（我想说它应该更靠上）。看起来在Y轴上有一个平移导致此偏移。但是应用以下内容并不会产生任何区别：

What I get is the following picture . What strikes me is that the blue point does not seem to be exactly on the upper left corner of the parent container (I would say it should be further up). It looks like there is a translation on the Y-axis causing this offset. But applying the following does not make any difference :

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

同样让我印象深刻的是，图像从蓝点开始向上（向北）预计在容器的左上角。那么，孩子有可能在其父母的容器之外被涂漆吗？ =>参见编辑2（它实际上并未从上面开始）。

What strikes me too is that the image starts "above" (north direction) from the blue point which is expected to be on the container's upper left corner. So is it possible that the child gets painted outside of its parent's container ? => see Edit 2 (it does not start above indeed).

另一方面，看来我对displayImage尺寸的计算由于矩形比图像窄，因此存在缺陷。因此，我将不得不以一种更简洁的方式进行计算。 =>参见编辑2（可以进行计算，但看起来必须在内部绘制方法中计算父容器的尺寸）。

On the other hand, it seems that my computation of the displayedImage dimensions has flaws since the rectangle is narrower than the image. Consequently I will have to compute it in a cleanlier fashion. => See Edit 2 (computation is OK but looks like parent container's dimensions have to be computed inside paint method).

编辑2

再次阅读Shai的答案，我试图绘制一个矩形（而不是编写点字符）：

Reading again Shai's answer I tried to draw an rectangle (instead of writing a point character) :

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

它按预期方式工作（蓝点位于左上角）：

And it worked as expected (the blue point being in the upper left corner) :

因此，这应该与drawString的JavaDoc有关状态

So this should be related to drawString's JavaDoc which states

字体是从顶部位置绘制的，而不是从基线绘制的。

The font is drawn from the top position and not the baseline.

，它解释了为什么点不在预期的位置（我不好！）。

and it explains why the point was not at the expected location (my bad!).

并得出结论，尽管不清楚对我来说，只需将代码的一部分（即与父容器尺寸有关的部分）移到paint方法内部（而不是外部）即可获得预期位置。所以我的绘制方法现在看起来像是：

And to conclude although it is not clear to me, I could get the expected position just by moving part of the code (namely the part regarding the parent container dimensions) inside the paint method instead of outside. So my paint method now looks like :

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

非常感谢任何可以告诉我为什么我没有得到预期结果的人（即关键点）完全在左上角）？

Thanks a lot to anybody that can tell me why I am not getting the expected result (ie the point exactly in the upper left corner) ?

问候

推荐答案

组件在Codename One中，位于其父容器的X / Y中且未转换到位置。因此，0、0位置将是 getX（），getY（）。

Components in Codename One are positioned in the X/Y of their parent Container and aren't translated into location. So the 0, 0 position would be getX(), getY().

您显然可以使用翻译也可以为您提供0,0的服务。

You can obviously use translate to make 0,0 work for you too.

x和y坐标表示传递给drawRect（x，y，w，h）
方法是相对于组件父对象的原点的，而不是
组件本身的父对象。这就是为什么我们的x位置是
getX（）+ 5而不仅仅是5的原因。

The x and y coordinates that are passed to the drawRect(x,y,w,h) method are relative to the component’s parent’s origin — not the component itself .. its parent. This is why we the x position is getX()+5 and not just 5.

来自代号一个开发人员指南图形部分

这篇关于在代号为1的图形中的给定位置写入字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！