用GWT在画布中绘图

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

和牵引法是这样的：

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

请注意：你必须在这个例子中使用全局变量。通过传递参数/类或定义整个类的变量，将其更改为您的需要。在这个例子中，绘图区域也是硬编码的：这也是你需要改变的地方。