使用帶有ImageResource的GWTCanvas

我想使用GWT的clientBundle功能只加載1個圖像，它由許多精靈組成，並帶有GWTCanvas。我最初的起飛是剛剛ImageResource轉換成ImageElement，但顯然這似乎並沒有工作：使用帶有ImageResource的GWTCanvas

public interface Bundle implements ClientBundle{ 
    public static Bundle INSTANCE = GWT.create(Bundle .class); 
    @Source("/img/tile1.png") 
    public ImageResource tile1() 
} 

final GWTCanvas canvas = new GWTCanvas(400,400); 
canvas.drawImage(ImageElement.as(new Image(Bundle.INSTANCE.tile1()).getElement()), 0, 0);

我第一次嘗試添加圖像到RootPanel（強制負載），但不似乎也工作。或許時機不正確。有沒有人有關於如何使用GWTCanvas繪製imageResource的線索？

來源

2011-02-26 Chii

以您想要的方式使用ClientBundled圖像是不可能的。組合成一個大圖像的圖像被顯示爲基於瀏覽器的特徵以僅顯示圖像的一部分的背景圖像。 GWT稱之爲「剪輯」模式。因此，當您嘗試獲取該圖像的元素時，實際的src標記爲空，因爲該圖像是背景圖像。如果要在「畫布」上顯示圖像，它必須是圖像的實際鏈接。

來源

2011-02-26 13:05:08

我的解決方案適用於我。 – 2013-05-07 11:00:21

你可以嘗試使用ImageResource的的getURL（）方法時，創建映像：

canvas.drawImage(ImageElement.as(new Image(Bundle.INSTANCE.tile1().getUrl()).getElement(), 0, 0);

使用與GWT 2.2.0的帆布類型ClientBundle時，這固定它爲我，我有同樣的問題。

來源

2011-03-12 20:30:25

讓我試試這個，看看它是否也爲我修復！ – Chii 2011-03-14 08:22:12

您可以使用數據URI從包中獲取圖像，但您需要像處理遠程圖像一樣管理異步。

final Image image = new Image(resources.imageResource().getURL()); 
RootPanel.get().add(image); 
image.setVisible(false); 
fetchedImage.addLoadHandler(new LoadHandler() { 
    public void onLoad(LoadEvent event) { 
    context.drawImage(ImageElement.as(image.getElement()), 0, 0); 
    } 
});

來源

2011-06-26 13:47:53

這工作：（GWT 2.4）

// load: 
    SafeUri uri= imageResource.getSafeUri();   
    ImageElement imgElement= ImageElement.as((new Image(uri)).getElement()); 

    // render 
    context.drawImage(imgElement, 0, 0);

來源

2011-11-25 15:09:37

有趣。這不幸的是涉及加載圖像兩次？（我希望它來自緩存壽，所以它可能沒有實際意義）。此外，uri將用於大型精靈表，因此您需要計算出實際的座標。我想它是瀏覽器中canvas和img元素如何工作與gwt的css spritesheet技術的不幸技術限制。 – Chii 2011-12-13 08:35:26

他們是正確的，只是用getSafeUri()，而不是getURL()

來源

2013-01-14 11:39:05

湯姆·菲什曼的解決方案，我沒有工作，因爲圖像當我調用canvas.drawImage（）時沒有加載。此解決方案（也適用於大圖像）：

// Create Image 
    SafeUri uri = resource.getSafeUri(); 
    Utils.console("URI: "+ uri); 
    final Image img = new Image(uri); 

    // Add the image to the RootPanel to force the image to be loaded. 
    RootPanel.get().add(img); 

    // The image has to be added to the canvas after the image has been loaded. 
    // Otherwise the bounding box of the image is 0,0,0,0 and nothing will be drawn. 
    img.addLoadHandler(new LoadHandler() { 
     @Override 
     public void onLoad(LoadEvent event) { 
      // Create the image element. 
      ImageElement imgElement = ImageElement.as(img.getElement()); 

      // Render the image on the canvas. 
      context2d.drawImage(imgElement, offsetX, offsetY); 

      // Delete the image from the root panel. 
      RootPanel.get().remove(img); 
     } 
    });

來源

2013-05-07 10:59:52

使用帶有ImageResource的GWTCanvas

回答

相關問題