使用 GWT 在 Canvas 中绘图

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

绘制方法将如下所示：

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

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