addeventlistener事件参数_前端图形学（十四）——封装小球的鼠标事件

欢迎来到【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中,敬请关注。

在传统的Dom操作中，我们要给一个元素去绑定一个事件是特别容易的事情，那么在canvas图形学中，我们无法直接给一个图形去添加一些鼠标事件，原因就是因为图形和dom元素有着本质的区别。

拿我们一用在用的小球为例。我们无法直接给小球绑定任何的鼠标事件，而其实在我们的实际项目开发过程中，有很多情况是需要我们通过鼠标去操作图形的，比如拖拽。

所以我们的做法是直接给画布元素(Canvas标签就是一个dom元素)去添加鼠标事件，然后再去映射到对应的图形上即可。

主要有两种方法去实现，下面我分别举例。

鼠标到圆心的距离和圆的半径的比较

从上面的图中我们可以看到，如果鼠标点落在了红色小球的位置，则小球没有被点击到，相反，如果是鼠标点落在了白色小圆上，那么小球则是被点击到了。

换成程序语言就是：如果鼠标和小球中心点的距离大于小球的半径，则没有点击到，否则小球被点击到了。

小球的半径(ball.r)我们知道了，现在我们要计算出鼠标点和小球圆心的距离。这个距离要怎么求呢？

这个应该很容易想到，数学中的直角三角形满足勾股定理。a*a + b*b = c*c，现在我们可以很容易计算出a,b

核心代码；

canvas.addEventListener('click',e=>{var x = e.pageX - canvas.offsetLeft;var y = e.pageY - canvas.offsetTop;var a = x - ball.x;var b = y - ball.y;var c = Math.sqrt(Math.pow(a,2)+Math.pow(b,2));if(c<=ball.r){alert('点中了')}else{alert('没有点中')}})

这种方式原理很简单，就是判断两个点之间的距离和半径相比即可。这种方法只适合用于圆形的判断，如果是其它的图形，这种方法就行不通了。

那么接下来，我们换一种方式去实现，canvas给我们提供了原生的Api：

context.isPointInPath(x,y)

从字面上很好理解，就是判断一个点坐标(x,y)是否在某个路径内。

看似比我们第一种实现方法要简单得很多，接下来我们来改造一下我们的小球类。

我们在render方法中添加两个参数，pointX,pointY,然后判断这两个坐标对应的点是否在小球内，并将结果挂载到当前小球类的对象上面。

核心代码：

render(context,pointX,pointY) {let { x, y, r, scaleX, scaleY, fillStyle, strokeStyle, opacity} = this;context.save();context.strokeStyle = strokeStyle;context.fillStyle = fillStyle;context.translate(x, y);context.globalAlpha = opacity;context.scale(scaleX, scaleY);context.beginPath();context.arc(0, 0, r, 0, Math.PI * 2, false);if(pointX && pointY){this.isPointInPath = context.isPointInPath(pointX,pointY);}context.fill();context.stroke();context.restore();return this;}

实现效果：

分别点击两个小球，可分别触发对应的事件

点击事件的调用方法

完整的小球类的代码：

小球类

总结：

1. 这里不仅是通过鼠标的点击事件，像mouseover mouseout些事件都是一样的道理，我们获取鼠标事件，其实是要获取到一个点坐标。
2. 数学知识，通过勾股定理去计算两点之间的距离。
3. 大家可能有发现，我写的小球类从一开始简单的绘制，到后面给小球添加新的属性和方法内部的改造。这些都不是一次性就能写完整的，而是随着项目的不断迭代,我们再去不断的完善我们的代码程序。

以上是今天所有的分享内容。喜欢的请点赞关注，不喜欢的解散。。。

这里是【畅哥聊技术】前端图形学相关技术文章，更多精彩内容持续更新中。。。

未完待续。。。