이미지의 투명 픽셀 피하기

Question

GWT를 사용하고 이미지에 간단한 MouseMoveHandler를 구현하고 싶습니다. 이것은 OK입니다

Image icon = new Image(Context.IMAGES.infoIcon()); 
     icon.addMouseMoveHandler(new MouseMoveHandler() { 
      @Override 
      public void onMouseMove(MouseMoveEvent event) { 
       int left = event.getScreenX(); 
       int top = event.getScreenY(); 

      } 
     }); 

,하지만 난 이벤트가 투명한 픽셀을 피하려면 : 그래서 나는 단순히 이런 식으로 구현합니다. 어떨까요?

Answer 1

내가 생각할 수있는 유일한 방법은 HTML5 캔버스에 그림을 그리는 것입니다. 그런 다음 모든 픽셀 RGB 값을 분석하고 이벤트를 처리할지 여부를 결정하십시오.

Canvas canvas = Canvas.createIfSupported(); 
Image imagePng = new Image("test.png"); 

if (_canvas != null) { 
    panel.add(canvas); 
} else { 
    // No canvas support in this browser 
    panel.add(imagePng); 
} 

canvas.getContext2d().drawImage(ImageElement.as(imagePng.getElement()), 0, 0); 

나중에 MouseHandler 코드에서. 이미지 (x, y)에서 마우스 처리기의 위치를 ​​평가 한 다음이 위치의 이미지 색상을 분석합니다. 당신이 계산을 할 때마다 할 수 있지만 픽셀이 투명 여부 저장 행렬의 어떤 종류를 유지하지 않는 경우

int width = canvas.getOffsetWidth(); 
int height = canvas.getOffsetHeight(); 

ImageData imageData = canvas.getContext2d().getImageData(0, 0, width, height); 

int r = imageData .getRedAt(x, y); 
int g = imageData .getGreenAt(x, y); 
int b = imageData .getBlueAt(x, y); 

if (!isRGBValueTransparent(r, g, b)) { 
    // Do something; 
} 

코드

은 개선 될 수있다. 그런 다음 위의 행렬에서 찾으십시오.