Question

我有两个想要绘制到画布对象的图像。我从服务器获取这些图像，当loadHandler调用时，我得到图像的尺寸（它们具有相同的宽度和高度）并计算画布的尺寸。然后我在画布中计算出的x，y位置绘制每个图像。问题是画布中只出现一个图像。为什么呢？

以下是代码的一部分：

final Image siImg = new Image();
            siImg.setVisible(false);
            siImg.setUrl(Constants.URL_PREFIX + siPath);
            siImg.addLoadHandler(new LoadHandler() {

                @Override
                public void onLoad(LoadEvent event) {

                    int siWidth = siImg.getWidth();
                    int siHeight = siImg.getHeight();

                    siImg.removeFromParent();

                    if (!CategoryTableView.this.dimFromBg) {
                        CategoryTableView.this.width = siWidth;
                        CategoryTableView.this.height = siHeight * sSize;
                        //CategoryTableView.this.setPixelSize(CategoryTableView.this.width, CategoryTableView.this.height);
                        CategoryTableView.this.canvas.setPixelSize(CategoryTableView.this.width, CategoryTableView.this.height);
                        CategoryTableView.this.canvas.setCoordinateSpaceHeight(CategoryTableView.this.height);
                        CategoryTableView.this.canvas.setCoordinateSpaceWidth(CategoryTableView.this.width);
                        CategoryTableView.this.dimFromBg = true;
                    }

                    ImageElement imageElement = (ImageElement) siImg.getElement().cast();

                    int left = xOff;
                    int top = yOff + (siHeight * fi);


                    CategoryTableView.this.context.drawImage(imageElement, left, top);

                }

            });
            RootPanel.get().add(siImg);

好吧我觉得我找到了......我每次都要保存上下文的状态。是对的吗？（因为它现在有效！）

Answer 1

您将图像添加到最后一行的根面板

final Image siImg = new Image();
...
RootPanel.get().add(siImg);

而不是添加你的画布。所以你只会看到图像而不是画布。您必须将Canvas添加到根面板并将两个图像绘制到画布上。出于性能原因，最好绘制到后备缓冲区而不是直接绘制到画布上。这是一个小例子：

Canvas canvas = Canvas.createIfSupported();
Canvas backBuffer = Canvas.createIfSupported();

Context2d context = canvas.getContext2d();
Context2d backBufferContext = backBuffer.getContext2d();

Image image1 = new Image("http://your.url.to/image.jpg");
image1.addLoadHandler(new LoadHandler() {       
    public void onLoad(LoadEvent event) {
        // do anything you want here
        doDraw();
    }
});

Image image2 = new Image("http://your.url.to/image2.jpg");
image2.addLoadHandler(new LoadHandler() {       
    public void onLoad(LoadEvent event) {
        // do anything you want here
        doDraw();
    }
});

RootPanel.get().add(canvas);

draw-method看起来像这样：

public void doDraw() {
    backBufferContext.setFillStyle(redrawColor);
    backBufferContext.fillRect(0, 0, width, height);
    ImageElement imageElement = ImageElement.as(image1.getElement());
    backBufferContext.drawImage(imageElement, 0, 0, 1024, 768, 0, 0, 102, 76);

    ImageElement imageElement = ImageElement.as(image2.getElement());
    backBufferContext.drawImage(imageElement, 0, 0, 1024, 768, 102, 76, 102, 76);

    context.drawImage(backBufferContext.getCanvas(), 0, 0);
}

请注意：您必须在此示例中使用全局变量。通过传递参数/类或在类范围内定义变量，将其更改为您的需要。此示例中的绘图区域也是硬编码的：您还可以根据需要进行更改。

用GWT绘制画布

1 个答案: