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

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

966bdc622a9e0d329f93377b4fc3643c.png

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

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

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

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

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

0fbcde9f50d9bf7a8a62e7b775adbb95.png

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

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

小球的半径(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;}

实现效果:

dc54517bcbf9674a07469619fd7139ec.gif

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

ea5df80df6633357e80f41f844b1e39a.png

点击事件的调用方法

完整的小球类的代码:

bf83828982b16dfc8b582855fe4ab8eb.png

小球类

总结:

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

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

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

未完待续。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值