views:

355

answers:

1

I had an idea for a WebOS, but it requires detecting drawn shapes. Ie: I want a user to be able to draw an image, then draw a big box around the whole image. Then the user can drag that box by the grabbing the border, and moving the whole image around. This requires that I be able to detect when such a box has been drawn, and turn it into a Rect type. Anyone have any pointers or tips on how to do this? I don't even know where to start.

+1  A: 

There are Canvas functions for getting the pixels in a rectangle. But these functions do not work in IE (even with excanvas.js). Is that what you want to do?

You can attach mouse events to a Canvas, or to a div containing it.

If you could explain what you're trying to do exactly, I might be able to offer more help. If I understand you correctly, I think you could you what you're talking about if you don't care about Internet Explorer support.

Nosredna
I am trying to detect drawn shapes. Basically, when a user draws something, I want to be able to tell what they drew. What sort of shape it corresponds to (circle, rectangle, whatever)
Timothy McDowell
So they draw with the mouse? Freeform? I suppose you could do that. Maybe even in IE, since you could track the drawing motions and remember them even if you can't read the pixels from the Canvas.
Nosredna
Yeah, freeform with the mouse.
Timothy McDowell
I'd start with a simple drawing program. Make a canvas, attach a click handler to it or a containing div, and connect the last point to the current point each time the user clicks on the canvas. There are some canvas tutorials around the web that are pretty easy to follow.
Nosredna