ImageResource와 함께 GWTCanvas 사용하기

GWT의 clientBundle 기능을 사용하여 GWTCanvas와 함께 많은 스프라이트로 구성된 1 개의 이미지 만로드하려고합니다. 내 초기 걸릴 그냥 ImageElement에 ImageResource을 변환했지만, 분명히 그것은 작동하지 않는 것 : 내가 처음 인 RootPanel에 이미지를 추가하는 시도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);

는 (부하를 강제로),하지만하지 않습니다 너무 효과가있는 것처럼 보입니다. 아마도 타이밍이 잘못되었을 수 있습니다. 누구나 GWTCanvas를 사용하여 imageResource를 그리는 방법에 대한 단서가 있습니까?

출처

2011-02-26 Chii

원하는 방식으로 ClientBundled 이미지를 사용할 수 없습니다. 하나의 큰 이미지에 결합 된 이미지는 이미지의 일부만 표시하기 위해 브라우저의 기능을 기반으로하는 배경 이미지로 표시됩니다. GWT는이 '클리핑 된'모드를 호출합니다. 따라서 이미지의 요소를 가져 오려고하면 실제 src 태그는 이미지가 배경 이미지이므로 비어 있습니다. Canvas에 이미지를 표시하려면 이미지에 대한 실제 링크 여야합니다.

출처

2011-02-26 13:05:08

내 솔루션이 제대로 작동합니다. –

당신 수도 이미지를 만들 때 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

데이터 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

흥미 롭습니다. 불행히도 이미지를 두 번로드하는 작업이 포함되어 있습니까? (나는 그것이 캐시 tho에서 올 것으로 기대할 것이므로, 그것은 부적절 할 수있다). 또한, uri는 큰 스프라이트 시트를위한 것이므로, 실제 좌표로 작업해야합니다. 나는 브라우저에서 캔버스와 img 요소가 css 스프라이트 시트 기술과 어떻게 작동하는지에 대한 불행한 기술적 한계를 맞춰야한다. – Chii

그들은이 올바른지, 단지 대신 getURL()

출처

2013-01-14 11:39:05

톰 피시의 솔루션의 getSafeUri()를 사용하는 나를 위해 작동하지 않았다, 이미지 때문에 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 사용하기

답변

관련 문제