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 <[email protected]> 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 [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-web-toolkit?hl=en.

Reply via email to