南京建设主管部门网站,jsp商业网站开发,wordpress系统版,网页制作和网站建设的区别canvas事件绑定
众所周知canvas是位图#xff0c;在位图里我们可以在里面画各种东西#xff0c;可以是图片#xff0c;可以是线条等等。那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件#xff0c;很明显这个图片是不存在与dom里面…canvas事件绑定
众所周知canvas是位图在位图里我们可以在里面画各种东西可以是图片可以是线条等等。那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定。
我先来讲下实现原理其实就是canvas绑定相关事件在通过记录图片所在canvas的坐标判断事件作用于哪个图片中。这样讲是不是感觉跟事件代理有点相似咧。不过实现起来还是有稍许复杂的。ps下面的代码我是用ts写的大家当es6看就好了稍有不同的可以查看 typescript的文档(typescript真的很好用建议大家多多了解)。
1、建立图片和canvas之间的联系这里我用色块来代替图片
这里要色块和canvas建立一定的联系而不是单纯的渲染。还要记录色块所在坐标、宽高。我们先一步一步来实现 首先写基本的html页面创建一个canvas
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitlecanvas事件/titlestylehtml, body {height: 100%;background: #eee;}canvas {background: #fff;display: block;margin: 0 auto;}/style
/head
bodycanvas width500 height500 idcanvas/canvas
/body
下一步我们要定一个Canvas的类这个类应该要有些什么功能呢
要有对应的canvas。装色块数据的容器。有添加色块的方法。渲染色块的方法。渲染所有色块的方法。
因为色块也有自己的一些参数为了方便拓展我们也为色块定一个类这类需要的功能有 宽、高、颜色、坐标x,y还有Canvas实例;初步就定这几个吧
ok开始写
// Canvas类
class Canvas {blockList: Block[]ctx: anycanvas: anycreateBlock (option) {option.Canvas thisthis.blockList.push(new Block(option))this.painting()}rendering (block) { // 渲染色块函数this.ctx.fillStyle block.colorthis.ctx.fillRect(block.x, block.y, block.w, block.h)}painting () { // 将容器里的色块全部渲染到canvas// 清空画布渲染之前应该将老的清空this.ctx.fillStyle #fffthis.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)this.blockList.forEach(ele {this.rendering(ele)})}constructor (ele) { // 初始化函数输入的是canvas// 设置canvasthis.canvas elethis.ctx this.canvas.getContext(2d)// 色块容器this.blockList []}
}
class Block {w: numberh: numberx: numbery: numbercolor: stringCanvas: Canvashierarchy: numberconstructor ({ w, h, x, y, color, Canvas }) { // 初始化设置色块相关属性this.w wthis.h hthis.x xthis.y ythis.color colorthis.Canvas Canvas}
}
下面运行一波试试 // 创建Canvas实例并添加蓝色个宽高100px,位置(100,100)、(300,100)红色和蓝色的色块var canvas new Canvas(document.getElementById(canvas))canvas.createBlock({ // 红色x: 100,y: 100,w: 100,h: 100,color: #f00})canvas.createBlock({ // 蓝色x: 100,y: 100,w: 300,h: 100,color: #00f})
运行结果如下
2、给色块添加点击事件
这里并不能直接给色块添加点击事件的所以要通过坐标的方式判断目前点击的是哪个色块。
先给canvas添加点击事件。判断色块区域。执行相应事件。
class Block {// ...省略部分代码checkBoundary (x, y) { // 判断边界方法return x this.x x (this.x this.w) y this.y y (this.y this.h)}mousedownEvent () { // 点击事件console.log(点击了颜色为${this.color}的色块)}
}class Canvas {// ...省略部分代码constructor (ele) {this.canvas elethis.ctx this.canvas.getContext(2d)this.blockList []// 事件绑定(这里有一个要注意的我这里用了bind方法是为了将“mousedownEvent”方法内的this指向切换到Canvas)this.canvas.addEventListener(click, this.mousedownEvent.bind(this)) // 点击事件}mousedownEvent () { // 点击事件const x e.offsetXconst y e.offsetY// 这里将点击的坐标传给所有色块根据边界判断方法判断是否在点击在内部。是的话执行色块的事件方法。this.blockList.forEach(ele {if (ele.checkBoundary(x, y)) ele.mousedownEvent(e)})}
}到这里为止已经实现了对不同canvas内不同色块绑定对应的点击事件。不过这个点击事件是不完美的因为目前为止我们还没有引入层级的概念就是说两个色块重叠部分点击的话全部都会触发。所以我们还要给色块加入层级的属性。实现一个点击某一个色块改色块的层级就会提升到最高。
class Block {// ...省略部分代码constructor ({ w, h, x, y, color, Canvas, hierarchy }) { // 初始化设置色块相关属性this.w wthis.h hthis.x xthis.y ythis.color colorthis.Canvas Canvasthis.hierarchy 0}
}class Canvas {// ...省略部分代码constructor (ele) {this.canvas elethis.ctx this.canvas.getContext(2d)this.blockList []// 事件绑定(这里有一个要注意的我这里用了bind方法是为了将“mousedownEvent”方法内的this指向切换到Canvas)this.canvas.addEventListener(click, this.mousedownEvent.bind(this)) // 点击事件this.nowBlock null // 当前选中的色块}createBlock (option) { // 创建色块函数这里的Block是色块的类option.Canvas this// 创建最新的色块的层级应该是最高的option.hierarchy this.blockList.lengththis.blockList.push(new Block(option))this.rendering()}mousedownEvent (e) { // 点击事件const x e.offsetXconst y e.offsetY// 获取点中里层级最高的色块this.nowBlock (this.blockList.filter(ele ele.checkBoundary(x, y))).pop()// 如果没有捕获的色块直接退出if (!this.nowBlock) return// 将点击到的色块层级提高到最高this.nowBlock.hierarchy this.blockList.length// 重新排序(从小到大)this.blockList.sort((a, b) a.hierarchy - b.hierarchy)// 在重新从0开始分配层级this.blockList.forEach((ele, idx) ele.hierarchy idx)// 重新倒序排序后再重新渲染。this.painting()this.nowBlock.mousedownEvent(e) // 只触发选中的色块的事件}
}// 这里我们还得加入第三块色块与红色色块重叠的色块
canvas.createBlock({x: 150,y: 150,w: 100,h: 100,color: #0f0
}) Canvas中“mousedownEvent”方法内的代码是有点复杂的主要是有点绕。
首先是this.nowBlock (this.blockList.filter(ele ele.checkBoundary(x, y))).pop()这段代码是怎么获取到点击到的色块中层级最高的色块。这里因为我们每次添加色块都是设置了最高层级的所以“blockList”内的色块都是按层级从小到大排序的。所以我们取最后一个就可以了。第二步就是将拿到的色块的层级提升到最高。第三步就是从小到大重新排列色块。因为第二步的时候我们修改了选中色块的层级导致所有色块的层级不是连续的为了避免层级不可控我们还得重新定义层级。重新渲染色块到canvas中因为“blockList”内的色块是排好序的所以按顺序渲染即可。
运行后的效果就是下面这样了 3、实现对不同色块进行拖拽
在上面我们已经实现了获取不同的色块并修改它的层级。下面我们要实现色块的拖拽主要就是获取鼠标移动过程中和一开始点击下去时位置坐标的变化。这个原理和普通的dom拖拽实现原理一样。
获取点击色块的点距离色块左边和上边的距离(disX, disY)。鼠标移动时用鼠标当前距离canvas左边和上边的距离减去(disX, disY)这里就是色块的xy坐标了。
class Block {// ...省略部分代码mousedownEvent (e: MouseEvent) {/* 这里 disX和disY的计算方式 e.offsetX获取到的是鼠标点击距离canvas左边的距离this.x是色块距离canvas左边的距离。e.offsetX-this.x就是色块左边的距离。这应该很好理解了 */const disX e.offsetX - this.x // 点击时距离色块左边的距离const disY e.offsetY - this.y // 点击时距离色块上边的距离// 绑定鼠标滑动事件这里mouseEvent.offsetX同样是鼠标距离canvas左侧的距离mouseEvent.offsetX - disX就是色块的x坐标了。同理y也是这样算的。最后在重新渲染就好了。document.onmousemove (mouseEvent) {this.x mouseEvent.offsetX - disXthis.y mouseEvent.offsetY - disYthis.Canvas.painting()}// 鼠标松开则清空所有事件document.onmouseup () {document.onmousemove document.onmousedown null}// console.log(点击了颜色为${this.color}的色块22)}
}
效果如下
下面贴上完整的代码(html和调用的方法就不放了)这个例子只是简单实现给canvas内的内容绑定事件大家可以实现复杂一点的例如把色块换成图片除了拖拽还以给图片缩放旋转删除等等。
class Canvas {blockList: Block[]ctx: anycanvas: anynowBlock: BlockcreateBlock (option) {option.hierarchy this.blockList.lengthoption.Canvas thisthis.blockList.push(new Block(option))this.painting()}rendering (block) {this.ctx.fillStyle block.colorthis.ctx.fillRect(block.x, block.y, block.w, block.h)}painting () {// 清空画布this.ctx.fillStyle #fffthis.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height)this.blockList.forEach(ele {this.rendering(ele)})}mousedownEvent (e: MouseEvent) { // 点击事件const x e.offsetXconst y e.offsetY// 获取点中里层级最高的色块this.nowBlock (this.blockList.filter(ele ele.checkBoundary(x, y))).pop()// 如果没有捕获的色块直接退出if (!this.nowBlock) return// 将点击到的色块层级提高到最高this.nowBlock.hierarchy this.blockList.length// 重新排序(从小到大)this.blockList.sort((a, b) a.hierarchy - b.hierarchy)// 在重新从0开始分配层级this.blockList.forEach((ele, idx) ele.hierarchy idx)// 重新倒序排序后再重新渲染。this.painting()this.nowBlock.mousedownEvent(e)// this.blockList.forEach(ele {// if (ele.checkBoundary(x, y)) ele.clickEvent(e)// })}constructor (ele) {this.canvas elethis.ctx this.canvas.getContext(2d)this.blockList []// 事件绑定this.canvas.addEventListener(mousedown, this.mousedownEvent.bind(this))}
}
class Block {w: numberh: numberx: numbery: numbercolor: stringCanvas: Canvashierarchy: numberconstructor ({ w, h, x, y, color, Canvas, hierarchy }) {this.w wthis.h hthis.x xthis.y ythis.color colorthis.Canvas Canvasthis.hierarchy hierarchy}checkBoundary (x, y) {return x this.x x (this.x this.w) y this.y y (this.y this.h)}mousedownEvent (e: MouseEvent) {const disX e.offsetX - this.xconst disY e.offsetY - this.ydocument.onmousemove (mouseEvent) {this.x mouseEvent.offsetX - disXthis.y mouseEvent.offsetY - disYthis.Canvas.painting()}document.onmouseup () {document.onmousemove document.onmousedown null}// console.log(点击了颜色为${this.color}的色块22)}
}
更多专业前端知识请上
【猿2048】www.mk2048.com
