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

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

避免图像的透明像素

1 个答案: