2013-10-24 78 views
2

我使用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(); 

      } 
     }); 

这是确定的,但我想事件避免透明像素。 有什么办法吗?

回答

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

的代码可以改善,如果你不这样做计算每一次,但保持某种矩阵您存储像素是否是透明与否。然后,只需在所述矩阵中查找它。