CODEWITHSUNDEEP
javagwt
A.v
A.v

Reputation: 744

Avoid Transparent pixels of an image

I use GWT and I want to implement a simple MouseMoveHandler on an image. So I simply implement it like this :

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

            }
        });

This is OK, but I want the event avoid transparent pixels. Is there any way?

Upvotes: 2

Views: 65

Answers (1)

Adrian B.
Adrian B.

Reputation: 4363

The only option I can think of is to draw the picture on an HTML5 canvas. Then analyze every pixels RGB values and decide whether to handle the event or not.

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

Then later in your MouseHandler code. Evaluate the position of the mouse handler on the image (x, y), then analyze the image color on this position.

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

The code can be improved, if you don't do the calculation every time but keep some kind of matrix where you store whether a pixel is transparent or not. Then just look it up in said matrix.

Upvotes: 1

Related Questions