mouseover圈子HTML5画布 [英] mouseover circle HTML5 canvas

问题描述

我想知道如何将一个区域设置为在画布中定义的半复杂形状（圆），当用户鼠标超过形状时，将调用一个函数。

我不想使用库，如KineticJS等。

目前我已经添加了一个事件监听器到canvas元素，所以在鼠标移动调用多个函数;其中一个工作出相对于画布的鼠标x / y坐标。因此，任何矩形形状都很容易听使用基本的if语句（因为画布是交互式的并且重绘每个鼠标移动）。

对于圆形对象，以及说三角形对象，有没有办法使用类似的方法使用三角学和一个if语句？

或者有更好的方法在画布上有多个区域

解决方案

<如果你知道鼠标在哪里，你知道圆在画布上的位置，那么当鼠标到圆的中心的距离小于半径时，鼠标在圆内。如果这是真的手动调用你需要调用什么。

希望帮助

I am wondering how to set an area as a semi-complex shape (circle) defined in the canvas so when the user mouse overs the shape, a function will be called.

I do not wish to use libraries at all such as KineticJS etc.

Currently I have added an event listener to the canvas element so that on mouse move I call multiple functions; one of which works out the mouse x/y coordinates relative to the canvas. As such, any rectangular shape is easy to 'listen' for using a basic if statement (as the canvas is interactive and redrawn each mouse move).

For circular objects, as well as say triangular objects, is there a way to use a similar method using trigonometry and an if statement?

Or are there better ways to have multiple areas on a canvas which on mouse over, call a function?

Cheers

解决方案

If you know where the mouse is and you know where the circle is on the canvas then the mouse is inside the circle when the distance from the mouse to the center of the circle is less that the radius. If that's true manually call what ever you need to call.

Hope that helped

这篇关于mouseover圈子HTML5画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！