Topic: Canvas based apps which allow user to interact directly using mouse Pages that link to <a href="https://ozoneasylum.com/backlink?for=31360" title="Pages that link to Topic: Canvas based apps which allow user to interact directly using mouse" rel="nofollow" >Topic: Canvas based apps which allow user to interact directly using mouse\

 
Author Thread
sethx
Neurotic (0) Inmate
Newly admitted

From:
Insane since: Oct 2009

IP logged posted posted 10-02-2009 11:30 Edit Quote

Hello,
I've been looking to find technicuqes for canvas based apps which allow the user to directly interact with objects displayed within, through mouse events [vs binding to a keyboard event], and was wondering if somebody could show some examples or some techniques used to achieve this... ?

If it were plain dhtml it wouldnt be a problem because i could bind to events on a specific domnode, but using canvas its an entire other pair of gloves.

Any input, anybody?

poi
Paranoid (IV) Inmate

From: Norway
Insane since: Jun 2002

IP logged posted posted 10-02-2009 12:56 Edit Quote

Using SVG you could add any regular DOM event listener to the shapes or groups.

Using Canvas, you can easily track the position of the mouse on click or mouse move, convert the coordinates to the coordinates system of your canvas ( if it's scaled ), then check if the point is inside the path of some geometric shapes if you use geometric to represent or approximate the elements on your canvas. If you use bitmaps, one way to do collision detection is to have a hidden canvas where you draw each element with a unique color so that can simply check the color where the user clicked and voila.

sethx
Obsessive-Compulsive (I) Inmate

From:
Insane since: Oct 2009

IP logged posted posted 10-02-2009 13:07 Edit Quote

Thanks for the reply,
If using 3d in the canvas, what kind of technique would you suggest to map out the current polygon which is being interacted with? A separate canvas which maps the projection of the polygons and ultimatley use the same technique as you mentioned for bitmaps or is there something more efficient? I'd like to handle solid textured objects. Think the basics of the engine for a game, but thats not what its going to be used for.. just some infographics in the context of a visual experiment.

Also, i'm looking for some info on documentation which you may think is worthwile reading on the subject, or any toolkits which could eventually handle this but are difficult to find if not specifically searched for.. got any pointers? I'm currently using dojo which has 3d drawing ability, but am not quite satisfied with performance...

coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

IP logged posted posted 05-31-2011 11:04 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu