如何在Canvas中添加事件
如何在Canvas中添加事件
做为一个前端，给元素添加事件是一件司空见惯的事情。但是在Canvas中，其所画的任何东西都是没法获取的，更别说添加事件，那么咱们对其就一筹莫展了吗？固然不是的！咱们在平时项目中确定都用过许多Canvas的框架，咱们发现事件在这些框架中已经使用的十分红熟了，并且并无出现特别严重的问题。那么咱们能够确定的是，事件在Canvas中并非一个没法触及的事情。前端
一个傻瓜式的方式
咱们都知道一个元素在触发一个事件时，其鼠标的位置基本处于该元素之上，那么咱们就天然而然的想到经过当前鼠标的位置以及物体所占据的位置进行比对，从而咱们就能得出该物体是否应触发事件。这种方式比较简单，我就不用代码演示了，不过既然我叫它傻瓜式的方式，很明显它不是一个有效的解决方式。由于物体所占据的位置并不必定是十分容易获取，若是是矩形、圆形等咱们还能经过一些简单的公式获取其占据的位置，但是在复杂点的多边形，甚至是多边形的某些边是弧线的，显而易见，咱们这时候再获取其所占据的位置时是一件极其复杂且难度极大的事情，因此这种方式只适合本身在作一些demo中使用，并不适用于大多数的状况。git
一个较聪明的方式
既然上面这种方式碰壁了，那么咱们只能另辟蹊径。在翻阅CanvasAPI的时候，找到了一个方法isPointInPath，貌似正是咱们苦苦寻找的良药。github
介绍isPointInPath
isPointInPath的做用：顾名思义，咱们很直观的能够知道该方法用以判断点是否处于路径当中。canvas
isPointInPath的入参出参：ctx.isPointInPath([path, ]x, y [, fillRule])，该方法的参数有4个，其中path和fillRule为选填，x和y为必填。咱们依次介绍4个参数。数组
path：看到这个参数，我开始觉得是beginPath或者closePath的返回值，很惋惜的是这两个方法并无返回值，在查阅了资料后，发现是Path2D构造函数new的对象。Path2D构造函数具体用法。不过惋惜的是该方法可能因为兼容性的问题，目前看了一些开源框架都还未使用。框架
x，y：这两个参数很好理解，就是x轴和y轴的距离，须要注意的是，其相对位置是Canvas的左上角。函数
fillRule：nonzero（默认），evenodd。非零环绕规则和奇偶规则是图形学中判断一个点是否处于多边形内的规则，其中非零环绕规则是Canvas的默认规则。想具体了解这两种规则的，能够本身去查阅资料，这里就不增长篇幅介绍了。this
上面介绍完了入参，那么isPointInPath方法的出参想必你们均可以猜到了，就是true和false。spa
使用isPointInPath
上一节介绍完isPointInPath方法后，咱们如今就来使用它吧。3d
先来一个简单的demo：
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(10, 50)
ctx.lineTo(50, 50)
ctx.lineTo(50, 10)
ctx.fillStyle= 'black'
ctx.fill()
ctx.closePath()
canvas.addEventListener('click', function (e) {
const canvasInfo = canvas.getBoundingClientRect()
console.log(ctx.isPointInPath(e.clientX - canvasInfo.left, e.clientY - canvasInfo.top))
})
如图所示，灰色部分为Canvas所占据的区域，黑色为咱们实际添加事件的区域，在咱们点击黑色区域后，实际也的确如咱们所愿，打印出来的值为true。貌似Canvas的事件监听就这么简单的解决了，不过事情真有这么简单吗。显然是不可能的！咱们再来举个例子，这时候有两个区域，而且咱们须要分别给其绑定不一样的事件：
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(10, 50)
ctx.lineTo(50, 50)
ctx.lineTo(50, 10)
ctx.fillStyle= 'black'
ctx.fill()
ctx.closePath()
ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(100, 150)
ctx.lineTo(150, 150)
ctx.lineTo(150, 100)
ctx.fillStyle= 'red'
ctx.fill()
ctx.closePath()
canvas.addEventListener('click', function (e) {
const canvasInfo = canvas.getBoundingClientRect()
console.log(ctx.isPointInPath(e.clientX - canvasInfo.left, e.clientY - canvasInfo.top))
})
这个时候，结果就再也不如同咱们所预计的同样，当点击其中黑色区域时，打印的值为false，点击红色区域时，打印的值为true。
其实缘由很简单，由于上述代码，咱们实际建立了两个Path，而isPointInPath方法实际只检测当前点是否处于最后一个Path当中，而例子中红色区域为最后一个Path，因此只有点击红色区域时，isPointInPath方法才能判断为true。如今咱们改造一下代码：
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
let drawArray = []
function draw1 () {
ctx.beginPath()
ctx.moveTo(10, 10)
ctx.lineTo(10, 50)
ctx.lineTo(50, 50)
ctx.lineTo(50, 10)
ctx.fillStyle= 'black'
ctx.fill()
}
function draw2 () {
ctx.beginPath()
ctx.moveTo(100, 100)
ctx.lineTo(100, 150)
ctx.lineTo(150, 150)
ctx.lineTo(150, 100)
ctx.fillStyle= 'red'
ctx.fill()
ctx.closePath()
}
drawArray.push(draw1, draw2)
drawArray.forEach(it => {
it()
})
canvas.addEventListener('click', function (e) {
ctx.clearRect(0, 0, 400, 750)
const canvasInfo = canvas.getBoundingClientRect()
drawArray.forEach(it => {
it()
console.log(ctx.isPointInPath(e.clientX - canvasInfo.left, e.clientY - canvasInfo.top))
})
})
上面的代码咱们进行了一个很大的改造，咱们将每一个Path放入到一个单独的函数当中，并将它们push到一个数组当中。当触发点击事件时，咱们清空Canvas，并遍历数组从新绘制，每当绘制一个Path进行一次判断，从而在调用isPointInPath方法时，咱们能实时的获取当前的最后一个Path，进而判断出当前点所处的Path当中。
如今咱们已经间接的实现了对每一个Path的单独事件监听，但是其实现的方式须要一次又一次的重绘，那么有办法不须要重绘就能监听事件吗？
首先咱们须要知道一次又一次重绘的缘由是由于isPointInPath方法是监听的最后一个Path，不过咱们在介绍这个方法的时候，说过其第一个参数是一个Path对象，当咱们传递了这个参数后，Path就再也不去取最后一个Path而是使用咱们传递进去的这个Path，如今咱们来个demo来验证其可行性：
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const path1 = new Path2D();
path1.rect(10, 10, 100,100);
ctx.fill(path1)
const path2 = new Path2D();
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
ctx.stroke(path2)
canvas.addEventListener('click', function (e) {
console.log(ctx.isPointInPath(path1, e.clientX, e.clientY))
console.log(ctx.isPointInPath(path2, e.clientX, e.clientY))
})
如上图所示，咱们点击了左边图形，打印true，false；点击右边图形，打印false，true。打印的结果代表是没有问题的，不过因为其兼容性还有待增强，因此目前建议仍是使用重绘方式来监听事件。
结语
Canvas的事件监听讲到这里基本就差很少了，原理很简单，你们应该都能掌握。
github地址，欢迎start
附录
本身写的一个demo
const canvas = document.getElementById('canvas')
class rectangular {
constructor (
ctx,
{
top = 0,
left = 0,
width = 30,
height = 50,
background = 'red'
}
) {
this.ctx = ctx
this.top = top
this.left = left
this.width = width
this.height = height
this.background = background
}
painting () {
this.ctx.beginPath()
this.ctx.moveTo(this.left, this.top)
this.ctx.lineTo(this.left + this.width, this.top)
this.ctx.lineTo(this.left + this.width, this.top + this.height)
this.ctx.lineTo(this.left, this.top + this.height)
this.ctx.fillStyle = this.background
this.ctx.fill()
this.ctx.closePath()
}
adjust (left, top) {
this.left += left
this.top += top
}
}
class circle {
constructor (
ctx,
{
center = [],
radius = 10,
background = 'blue'
}
) {
this.ctx = ctx
this.center = [center[0] === undefined ? radius : center[0], center[1] === undefined ? radius : center[1]]
this.radius = radius
this.background = background
}
painting () {
this.ctx.beginPath()
this.ctx.arc(this.center[0], this.center[1], this.radius, 0, Math.PI * 2, false)
this.ctx.fillStyle = this.background
this.ctx.fill()
this.ctx.closePath()
}
adjust (left, top) {
this.center[0] += left
this.center[1] += top
}
}
class demo {
constructor (canvas) {
this.canvasInfo = canvas.getBoundingClientRect()
this.renderList = []
this.ctx = canvas.getContext('2d')
this.canvas = canvas
this.rectangular = (config) => {
let target = new rectangular(this.ctx, {...config})
this.addRenderList(target)
return this
}
this.circle = (config) => {
let target = new circle(this.ctx, {...config})
this.addRenderList(target)
return this
}
this.addEvent()
}
addRenderList (target) {
this.renderList.push(target)
}
itemToLast (index) {
const lastItem = this.renderList.splice(index, 1)[0]
this.renderList.push(lastItem)
}
painting () {
this.ctx.clearRect(0, 0, this.canvasInfo.width, this.canvasInfo.height)
this.renderList.forEach(it => it.painting())
}
addEvent () {
const that = this
let startX, startY
canvas.addEventListener('mousedown', e => {
startX = e.clientX
startY = e.clientY
let choosedIndex = null
this.renderList.forEach((it, index) => {
it.painting()
if (this.ctx.isPointInPath(startX, startY)) {
choosedIndex = index
}
})
if (choosedIndex !== null) {
this.itemToLast(choosedIndex)
}
document.addEventListener('mousemove', mousemoveEvent)
document.addEventListener('mouseup', mouseupEvent)
this.painting()
})
function mousemoveEvent (e) {
const target = that.renderList[that.renderList.length - 1]
const currentX = e.clientX
const currentY = e.clientY
target.adjust(currentX - startX, currentY - startY)
startX = currentX
startY = currentY
that.painting()
}
function mouseupEvent (e) {
const target = that.renderList[that.renderList.length - 1]
const currentX = e.clientX
const currentY = e.clientY
target.adjust(currentX - startX, currentY - startY)
startX = currentX
startY = currentY
that.painting()
document.removeEventListener('mousemove', mousemoveEvent)
document.removeEventListener('mouseup', mouseupEvent)
}
}
}
const yes = new demo(canvas)
.rectangular({})
.rectangular({top: 60, left: 60, background: 'blue'})
.rectangular({top: 30, left: 20, background: 'green'})
.circle()
.circle({center: [100, 30], background: 'red', radius: 5})
.painting()
- 1. 如何在Canvas中添加事件
- 2. 如何在eclipse中添加spring插件
- 3. 如何在word2013中添加MathType插件
- 4. 如何在cocos中为节点添加监听事件
- 5. 如何给div、p添加onload事件？
- 6. echarts 在 formatter 中添加点击事件
- 7. 如何给后添加的标签添加事件
- 8. vue中表格中column如何添加button事件？
- 9. iphone中怎么添加邮箱_如何在iPhone的Gmail中添加附件
- 10. 如何在myEclipse中添加jdk1.7
- 更多相关文章...
- • XSD 如何使用? - XML Schema 教程
- • Eclipse 添加书签 - Eclipse 教程
- • SpringBoot中properties文件不能自动提示解决方法
- • TiDB 在摩拜单车在线数据业务的应用和实践
-
每一个你不满意的现在，都有一个你没有努力的曾经。