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();

            }
        });

这没关系，但我希望事件避免透明像素。有什么办法吗？

4

1 回答 1

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

如果您不每次都进行计算，而是保留某种矩阵来存储像素是否透明，则可以改进代码。然后在所述矩阵中查找它。

于 2013-10-25T05:53:38.980 回答