Re: Canvas, ImageData, and IE9

First of all, I found that I'm not the only one who stumbled on this
bug. See http://groups.google.com/group/google-web-toolkit/browse_thread/thread/96f842dd3a23fc3a/cb447e0aa23997f8

Second, I have reliable workaround, at least for rectangles (and
probably for lines, ovals, etc.). I've tested in in FFx 8, IE9,
Chrome, and Safari 5.

To explain, I have a number of Rectangle's (which implement
Annotation) in an ArrayList area. On click, I test for selection:

boolean testForSelection(int x, int y) {
ghostContext.clearRect(0, 0, WIDTH, HEIGHT);
for (int i = 0; i < areas.size(); i++) {
Annotation rect = areas.get(i);
if (rect.isPointInPath(ghostContext, x, y)) {
currRect = (Rectangle)rect;
return true;
}
}
return false;
}

In Rectangle, my first attempt was

@Override
public boolean isPointInPath(Context2d ctx, int x0, int y0) {

ctx.setGlobalCompositeOperation(Context2d.Composite.SOURCE_OVER);
ctx.setFillStyle("black");
ctx.fillRect(x, y, width, height);
int alpha = ctx.getImageData(x0, y0, 1, 1).getAlphaAt(0, 0);
if (alpha > 0) {
GWT.log("found!");
return true;
}
return false;
}

As I said, this did not work in IE until the 3rd click. Why? I dunno.
I started looking into the GWT source code when an idea hit me.

So here's my new approach, a new method that uses path not alpha. It
works.

@Override
public boolean isPointInPath(Context2d ctx, int x0, int y0) {
ctx.beginPath();
ctx.rect(x, y, width, height);
if (ctx.isPointInPath(x0, y0)) {
GWT.log("found!");
ctx.closePath();
return true;
}
ctx.closePath();
return false;
}

Since we're dealing with a path and not an alpha, I don't set fill or
composite.

On Dec 5, 5:01 pm, Thad <thad.humphr...@gmail.com> wrote:
> I'm working on a small canvas drawing program with GWT 2.3 and I'm
> hitting a problem with IE9. After a user draws a rectangle to the
> canvas, I want to allow dragging or resizing. To catch the mouse down
> in the rectangle I'm using a technique similar to the one show in this
> example:http://simonsarris.com/blog/225-canvas-selecting-resizing-shape
>
> Basically I keep an ArrayList of my rectangles (other shapes will
> follow). On mouse down, if my state is NONE (no drawing, dragging,
> etc.) I clear a a hidden canvas and draw each item in my ArrayList to
> to that canvas with fill style black and test for alpha. If alpha is
> greater than zeor, I return the object clicked.
>
> In Firefox, this works perfectly each time. However in IE I don't get
> alpha > 0 till the 3rd click. If keep the mouse in a rectangle--NO
> MOVEMENT--it takes 3 clicks in the same spot, 3 calls to my test
> method, before alpha > 0.
>
> What's the reason for this delay with IE? The example above is pure
> Javascript,and it works in IE9 (if copy it locally and change the
> doctype header). What gives with GWT? Is there some problem with GWT's
> ImageData in IE? Is there some work around?

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-web-toolkit@googlegroups.com.
To unsubscribe from this group, send email to google-web-toolkit+unsubscribe@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.