Click here to Skip to main content
16,016,180 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi,

I am developing a Building Plan Drawing Application in HTML5.
For that I needed to place the doors and windows on walls.
Usually, the walls (lines) are not straight.
How can I find if my mouse has touched the walls (lines) while moving the door Image.
Moreover, I should find the X, Y and angle of the door to be drawn.
Please help...
Posted

1 solution

This is called "hit testing".

This is a working JSFiddle sample of the solution: http://jsfiddle.net/G7nDS/6[^].

See also:
http://stackoverflow.com/questions/19807049/html5-canvas-hittest-arbitrary-shape[^],
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#hit-regions[^],
http://www.w3.org/wiki/Canvas_hit_testing[^].

You can find some more demonstrations is you do something like this: http://bit.ly/RBjT0i[^].

—SA
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900