介绍
本篇文章给大家分享的是有关怎么在画布中添加事件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
isPointInPath的作用:顾名思义,我们很直观的可以知道该方法用以判断点是否处于路径当中。
isPointInPath的入参出参:ctx。isPointInPath ([,] x, y [, fillRule]),该方法的参数有4个,其中路径和fillRule为选填,x和y为必填。我们依次介绍4个参数。
路径:看到这个参数,我开始以为是beginPath或者closePath的返回值,很可惜的是这两个方法并没有返回值,在查阅了资料后,发现是Path3D构造函数新的对象.Path3D构造函数具体用法。不过可惜的是该方法可能由于兼容性的问题,目前看了一些开源框架都还未使用。
x, y:这两个参数很好理解,就是x轴和y轴的距离,需要注意的是,其相对位置是帆布的左上角。
fillRule:非零(默认),evenodd。非零环绕规则和奇偶规则是图形学中判断一个点是否处于多边形内的规则,其中非零环绕规则是帆布的默认规则。想具体了解这两种规则的,可以自己去查阅资料,这里就不增加篇幅介绍了。
上面介绍完了入参,那么isPointInPath方法的出参想必大家都可以猜到了,就是真和假。
<强>使用isPointInPath
上一节介绍完isPointInPath方法后,我们现在就来使用它吧。
先来一个简单的演示:
,, const canvas =, . getelementbyid(& # 39;帆布# 39;)
const 才能;ctx =, canvas.getContext (& # 39; 2 d # 39;)
ctx.beginPath才能()
ctx.moveTo才能(10,10)
ctx.lineTo才能(10,50)
ctx.lineTo才能(50岁,50)
ctx.lineTo才能(50,10)
ctx.fillStyle=,才能& # 39;黑色# 39;
ctx.fill才能()
ctx.closePath才能()
canvas.addEventListener才能(& # 39;点击# 39;,,function (e), {
,,,const canvasInfo =, canvas.getBoundingClientRect ()
,,,console.log (ctx.isPointInPath (e.clientX 安康;canvasInfo.left, e.clientY 作用;canvasInfo.top))
})才能 
如图所示,灰色部分为帆布所占据的区域,黑色为我们实际添加事件的区域,在我们点击黑色区域后,实际也的确如我们所愿,打印出来的值为真的。貌似画布的事件监听就这么简单的解决了,不过事情真有这么简单吗。显然是不可能的!我们再来举个例子,这时候有两个区域,并且我们需要分别给其绑定不同的事件:
,, const canvas =, . getelementbyid(& # 39;帆布# 39;)
const 才能;ctx =, canvas.getContext (& # 39; 2 d # 39;)
ctx.beginPath才能()
ctx.moveTo才能(10,10)
ctx.lineTo才能(10,50)
ctx.lineTo才能(50岁,50)
ctx.lineTo才能(50,10)
ctx.fillStyle=,才能& # 39;黑色# 39;
ctx.fill才能()
ctx.closePath才能()
ctx.beginPath才能()
ctx.moveTo才能(100,,100)
ctx.lineTo才能(100,,150)
ctx.lineTo才能(150,,150)
ctx.lineTo才能(150,,100)
ctx.fillStyle=,才能& # 39;红色# 39;
ctx.fill才能()
ctx.closePath才能()
canvas.addEventListener才能(& # 39;点击# 39;,,function (e), {
,,,const canvasInfo =, canvas.getBoundingClientRect ()
,,,console.log (ctx.isPointInPath (e.clientX 安康;canvasInfo.left, e.clientY 作用;canvasInfo.top))
})才能 
这个时候,结果就不再如同我们所预计的一样,当点击其中黑色区域时,打印的值为false,点击红色区域时,打印的值为真的。
其实原因很简单,因为上述代码,我们实际创建了两个路径,而isPointInPath方法实际只检测当前点是否处于最后一个路径当中,而例子中红色区域为最后一个路径,所以只有点击红色区域时,isPointInPath方法才能判断为真的。现在我们改造一下代码:
,, const canvas =, . getelementbyid(& # 39;帆布# 39;)
const 才能;ctx =, canvas.getContext (& # 39; 2 d # 39;)
let 才能;drawArray =, []
function 才能;draw1 (), {
,,,ctx.beginPath ()
,,,ctx.moveTo (10, 10)
,,,ctx.lineTo (10, 50)
,,,ctx.lineTo(50岁,50)
,,,ctx.lineTo (50, 10)
,,,ctx.fillStyle=, & # 39;黑色# 39;
,,,ctx.fill ()
,,}
function 才能;draw2 (), {
,,,ctx.beginPath ()
,,,ctx.moveTo (100,, 100)
,,,ctx.lineTo (100,, 150)
,,,ctx.lineTo (150,, 150)
,,,ctx.lineTo (150,, 100)
,,,ctx.fillStyle=, & # 39;红色# 39;
,,,ctx.fill ()
,,,ctx.closePath ()
,,}
drawArray.push才能(draw1, draw2),,
drawArray.forEach才能(it =祝辞,{
,,,()
})才能
canvas.addEventListener才能(& # 39;点击# 39;,,function (e), {
,,,ctx.clearRect (0, 0, 400, 750)
,,,const canvasInfo =, canvas.getBoundingClientRect ()
,,,drawArray.forEach (it =祝辞,{
,,,,,,()
,,,,,console.log (ctx.isPointInPath (e.clientX 安康;canvasInfo.left, e.clientY 作用;canvasInfo.top))
,,,})
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
