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

참고 : 당신은이 예제에서 전역 변수를 사용할 필요가 여기에 약간의 예입니다. 인수/클래스를 전달하거나 클래스 전체의 변수를 정의하여 필요에 맞게 변경하십시오. 또한이 예제에서는 드로잉 영역이 하드 코드되어 있습니다.이 영역도 필요에 맞게 변경해야합니다.