鼠标悬停圆圈 HTML5 画布

问题描述

我想知道如何将一个区域设置为画布中定义的半复杂形状(圆形)，以便当用户将鼠标悬停在该形状上时，将调用一个函数.

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.

我根本不想使用 KineticJS 等库.

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

目前我已经为画布元素添加了一个事件监听器，以便在鼠标移动时调用多个函数；其中之一计算出相对于画布的鼠标 x/y 坐标.因此，使用基本 if 语句(因为画布是交互式的并且每次鼠标移动都会重新绘制)，任何矩形形状都很容易听".

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).

对于圆形对象以及三角形对象，有没有办法使用三角函数和 if 语句的类似方法?

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?

干杯

推荐答案

如果你知道鼠标在哪里，并且你知道圆在画布上的位置，那么当鼠标到中心的距离时，鼠标在圆内圆的半径小于半径.如果确实如此，请手动调用您需要调用的任何内容.

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.

希望有所帮助

这篇关于鼠标悬停圆圈 HTML5 画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！