Web graphics - rectangle identification

Targets Web
1

WebGraphics. -

  1. After drawing a series of rectangles onto a webCanvas how can a click selected rectangle be identified.
  2. Are there any examples of how to identify the selected rectangle?
2

Instead of drawing directly to the canvas, draw to a picture.graphics, than drawPicture into the WebCanvas Paint event.

This will enable you to look at the color value of pixels onto the picture and see which rectangle it is by it’s color.

Here is an example project I made a while ago to detect hotspots in a picture by the color value. I belive you can use the same principle for your rectangles.

http://fontmenu.com/xojo/hot.zip

If they have different colors, of course. Otherwise you could make an array of RealBasic.Rect areas and use the Contains method to see if the click was inside one.
http://documentation.xojo.com/index.php/Realbasic.Rect

3

Keep in mind that if you use the picture method, you lose all of the optimizations that WebGraphics gives you and delivering the image will be very slow.

I’d suggest using Michel’s second suggestion of keeping track of the rectangles in an array. Even better, you could create a class that represents your rectangles so you can have a tag of some kind to identify each one.

4

Taking direction from you both I have managed to identify a specific drawn rectangle within a canvas and add text detail to it. The class representing the webcanvas rectangle is a bit like Pandora’s Box - the possibilities are endless. Many thanks Michel and Greg.

One extra thought springs to mind, This could make a good subject for a webinar for Paul.

5

I did cover this general technique in the Retro Gaming Webinar from last October. The example games were desktop apps, but the concept also works with web apps.

6

[quote=164113:@Greg O’Lone]Keep in mind that if you use the picture method, you lose all of the optimizations that WebGraphics gives you and delivering the image will be very slow.

I’d suggest using Michel’s second suggestion of keeping track of the rectangles in an array. Even better, you could create a class that represents your rectangles so you can have a tag of some kind to identify each one.[/quote]

You are right, the rectangle technique is much lighter on traffic and probably way faster.

I had used the picture method mainly for varied shapes of different colors which could not have been easily detected with rectangles.