search

caleb531 / jcanvas

A jQuery plugin that makes the HTML5 canvas easy to work with.
https://projects.calebevans.me/jcanvas/
MIT License
626 stars 192 forks source link

Events not binding to drawLine() #55

Closed robert2d closed 11 years ago

robert2d commented 11 years ago

Example below does not bind mouseover event. Should this be working?

http://calebevans.me/projects/jcanvas/sandbox.php#//%20Click%20the%20star%20to%20make%20it%20spin%0A%24%28%22canvas%22%29.drawLine%28%7B%0A%20%20layer%3A%20true%2C%0A%20%20strokeStyle%3A%20%22%23c33%22%2C%0A%20%20strokeWidth%3A%205%2C%0A%20%20x1%3A%20100%2C%20y1%3A%20100%2C%0A%20%20x2%3A%20140%2C%20y2%3A%20200%2C%0A%20%20mouseover%3A%20function%28layer%29%20%7B%0A%20%20%20%20//%20Spin%20star%0A%20%20%20%20%24%28this%29.animateLayer%28layer%2C%20%7B%0A%20%20%20%20%20%20rotate%3A%20%27+%3D144%27%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%0A%7D%29%3B

I would also like to know how to get it working with the addLayer method

caleb531 commented 11 years ago

Lines are weird in that they only respond to events when the mouse reacts with any part of their filled regions. To see this, set a fillStyle on your line to some noticeable color. Anywhere where you see this color touching your line will be a hotspot for events. However, I doubt you will be able to see it because the fill regions for paths are only created between any two points on the path. And, because a single line only has two points, you will not see the fill that is below the stroke of the line (which would have no thickness anyway because, again, it's just a straight line).

-Caleb

On Dec 16, 2012, at 11:00 PM, Dave Robertson notifications@github.com wrote:

Example below does not bind mouseover event. Should this be working?

http://calebevans.me/projects/jcanvas/sandbox.php#//%20Click%20the%20star%20to%20make%20it%20spin%0A%24%28%22canvas%22%29.drawLine%28%7B%0A%20%20layer%3A%20true%2C%0A%20%20strokeStyle%3A%20%22%23c33%22%2C%0A%20%20strokeWidth%3A%205%2C%0A%20%20x1%3A%20100%2C%20y1%3A%20100%2C%0A%20%20x2%3A%20140%2C%20y2%3A%20200%2C%0A%20%20mouseover%3A%20function%28layer%29%20%7B%0A%20%20%20%20//%20Spin%20star%0A%20%20%20%20%24%28this%29.animate Layer%28layer%2C%20%7B%0A%20%20%20%20%20%20rotate%3A%20%27+%3D144%27%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%0A%7D%29%3B

I would also like to know how to get it working with the addLayer method

— Reply to this email directly or view it on GitHub.

robert2d commented 11 years ago

Okay thanks @caleb531, Im going to try and use a rectangle instead but will need to brush up on some maths first :)

Will post a solution for future reference if I have any luck.