Избегайте прозрачных пикселей изображения

Question

Я использую GWT, и я хочу реализовать простой MouseMoveHandler на изображении. Так что я просто реализовать это следующим образом:

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

Код может быть улучшена, если не делать расчет каждый раз, но держать какую-то матрицу, в которой вы храните ли прозрачен или не пиксель. Затем просто просмотрите его в указанной матрице.