Canvas事件绑定

canvas事件绑定

众所周知canvas是位图，在位图里我们可以在里面画各种东西，可以是图片，可以是线条等等。那我们想给canvas里的某一张图片添加一个点击事件该怎么做到。而js只能监听到canvas的事件，很明显这个图片是不存在与dom里面的图片只是画在了canvas里而已。下面我就来简单的实现一个canvas内部各个图片的事件绑定。

  • 我先来讲下实现原理：其实就是canvas绑定相关事件，在通过记录图片所在canvas的坐标，判断事件作用于哪个图片中。这样讲是不是感觉跟事件代理有点相似咧。不过实现起来还是有稍许复杂的。

  • ps：下面的代码我是用ts写的，大家当es6看就好了，稍有不同的可以查看
    typescript的文档(typescript真的很好用，建议大家多多了解)。

1、建立图片和canvas之间的联系（这里我用色块来代替图片）

这里要色块和canvas建立一定的联系，而不是单纯的渲染。还要记录色块所在坐标、宽高。我们先一步一步来实现
首先写基本的html页面创建一个canvas：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas事件</title><style>html, body {height: 100%;background: #eee;}canvas {background: #fff;display: block;margin: 0 auto;}</style>
</head>
<body><canvas width="500" height="500" id="canvas"></canvas>
</body>
  • 下一步，我们要定一个Canvas的类，这个类应该要有些什么功能呢？
  1. 要有对应的canvas。
  2. 装色块数据的容器。
  3. 有添加色块的方法。
  4. 渲染色块的方法。
  5. 渲染所有色块的方法。
  • 因为色块也有自己的一些参数，为了方便拓展，我们也为色块定一个类，这类需要的功能有：

    宽、高、颜色、坐标（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 = '#fff'this.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'})

运行结果如下：
canvas事件绑定1

2、给色块添加点击事件

这里并不能直接给色块添加点击事件的，所以要通过坐标的方式判断目前点击的是哪个色块。

  1. 先给canvas添加点击事件。
  2. 判断色块区域。
  3. 执行相应事件。
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事件图3

到这里为止已经实现了对不同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事件图4

Canvas中“mousedownEvent”方法内的代码是有点复杂的，主要是有点绕。

  1. 首先是this.nowBlock = (this.blockList.filter(ele => ele.checkBoundary(x, y))).pop()这段代码是怎么获取到点击到的色块中层级最高的色块。这里因为我们每次添加色块都是设置了最高层级的，所以“blockList”内的色块都是按层级从小到大排序的。所以我们取最后一个就可以了。
  2. 第二步就是将拿到的色块的层级提升到最高。
  3. 第三步就是从小到大重新排列色块。
  4. 因为第二步的时候我们修改了选中色块的层级，导致所有色块的层级不是连续的，为了避免层级不可控，我们还得重新定义层级。
  5. 重新渲染色块到canvas中，因为“blockList”内的色块是排好序的，所以按顺序渲染即可。

运行后的效果就是下面这样了：

canvas事件图5

3、实现对不同色块进行拖拽

在上面我们已经实现了获取不同的色块，并修改它的层级。下面我们要实现色块的拖拽，主要就是获取鼠标移动过程中和一开始点击下去时位置坐标的变化。这个原理和普通的dom拖拽实现原理一样。

  1. 获取点击色块的点，距离色块左边和上边的距离(disX, disY)。
  2. 鼠标移动时，用鼠标当前距离canvas左边和上边的距离减去(disX, disY)这里就是色块的x，y坐标了。
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`)}
}

效果如下：
canvas事件图6

下面贴上完整的代码(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 = '#fff'this.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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/361327.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用Maven配置JBoss / Wildfly数据源

使用Maven配置JBoss / Wildfly数据源

大多数Java EE应用程序在其业务逻辑中使用数据库访问&#xff0c;因此开发人员经常面临在应用程序服务器中配置驱动程序和数据库连接属性的需求。 在本文中&#xff0c;我们将使用Maven为JBoss / Wildfly和Postgre数据库自动化该任务。 这项工作是根据我从以前的魔兽拍卖批量应…
阅读更多...
控件注册 - 利用资源文件将dll、ocx打包进exe文件（转）

控件注册 - 利用资源文件将dll、ocx打包进exe文件（转）

很多时候自定义或者引用控件都需要注册才能使用&#xff0c;但是如何使要注册的dll或ocx打包到exe中&#xff0c;使用户下载以后看到的只是一个exe,点击直接运行呢&#xff1f;就像很多安全控件&#xff0c;如支付宝的aliedit.exe那样。 现在介绍一种使用资源文件&#xff0c;将…
阅读更多...
Canvas-图片旋转

Canvas-图片旋转

Canvas-图片旋转 众所周知canvas是位图&#xff0c;你可以在里面渲染你要的东西&#xff0c;不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西&#xff0c;例如我在canvas里添加一幅画&#xff0c;我现在想将那幅画移动10px&#xff0c;我们并不能直…
阅读更多...
在嵌入式Neo4j中使用Neo4j浏览器

在嵌入式Neo4j中使用Neo4j浏览器

有时候&#xff0c;您有一个应用程序以嵌入式模式使用Neo4j&#xff0c;但还需要使用Neo4j Web浏览器来处理图形。 由于一次最多只能从一个进程访问数据库&#xff0c;因此在嵌入式Neo4j应用程序运行时尝试启动Neo4j服务器将无法工作。 WrappingNeoServerBootstrapper尽管已被…
阅读更多...
CSS3实现多页签图片缩放切换效果

CSS3实现多页签图片缩放切换效果

多页签切换效果&#xff0c;图片缩放&#xff0c;鼠标移动到图片上后显示文字内容等等&#xff0c;效果很集中呐 截图如下&#xff1a; 下载地址&#xff1a;http://www.lanrenzhijia.com/js/css3/2012/0718/602.html 预览地址&#xff1a;http://www.lanrenzhijia.com/yulan/2…
阅读更多...
正则表达式学习笔记

正则表达式学习笔记

该笔记内容通过《Learn regular expressions in about 55 minutes》整理得到。 文章链接&#xff1a;https://qntm.org/files/re/re.html 其中文翻译很多&#xff0c;中文名叫&#xff1a;55分钟学会正则表达式。 实际上我也算过了&#xff0c;55分钟实在不太可能&#xff0c;也…
阅读更多...
清洁单元测试图案–演示幻灯片

清洁单元测试图案–演示幻灯片

我有机会在2014年GDG DevFestKarlsruhe会议上谈论“清洁单元测试模式”。 感谢组织者邀请我&#xff0c;也感谢所有听我讲话的人。 如所承诺的&#xff0c;我为那些想看一下我在演讲中没有讲到的其他幻灯片的人分享了演示文稿&#xff1a; 清洁单元测试图案 JUnit测试并不像看…
阅读更多...
“取反”运算符

“取反”运算符

“取反”运算符转载于:https://www.cnblogs.com/LoveFishC/archive/2012/07/24/3845558.html
阅读更多...
Angular使用总结 --- 如何正确的操作DOM

Angular使用总结 --- 如何正确的操作DOM

无奈接手了一个旧项目&#xff0c;上一个老哥在Angular项目中大量使用了JQuery来操作DOM&#xff0c;真的是太不讲究了。那么如何优雅的使用Angular的方式来操作DOM呢&#xff1f; 获取元素 1、ElementRef --- A wrapper around a native element inside of a View. 在组件…
阅读更多...
Hibernate Collection乐观锁定

Hibernate Collection乐观锁定

介绍 Hibernate提供了一种乐观的锁定机制 &#xff0c;即使长时间通话也可以防止丢失更新 。 结合实体存储&#xff0c;跨越多个用户请求&#xff08;扩展的持久性上下文或分离的实体&#xff09;&#xff0c;Hibernate可以保证应用程序级的可重复读取 。 脏检查机制检测实体状…
阅读更多...
非首屏图片延时加载

非首屏图片延时加载

目标 减少资源加载可以明显的优化页面加载的速度&#xff0c;所以可以减少页面载入时立即下载的图片的数量&#xff0c;以提高页面加载速度&#xff0c;其他的图片在需要的时候再进行加载。 思路 想要实现以上的目标&#xff0c;有几个地方需要思考。 1、如何判断哪些图片需要…
阅读更多...
具有链接资源的Spring RestTemplate

具有链接资源的Spring RestTemplate

Spring Data REST是一个了不起的项目&#xff0c;它提供了一些机制来将基于Spring Data的存储库中的资源公开为REST资源。 使用链接资源公开服务 考虑两个简单的基于JPA的实体&#xff0c;课程和教师&#xff1a; Entity Table(name "teachers") public class Tea…
阅读更多...
POJ 1521 Entropy

POJ 1521 Entropy

求哈夫曼树的平均码长&#xff0c;用优先队列来写&#xff0c;先记录某个字符在字符串里出现的次数&#xff0c;然后放入 队列。依次取出第一小和第二小的数&#xff0c;将两个数相加&#xff0c;构成新的虚拟结点&#xff0c;放入队列中。 /*Accepted 196K 0MS C …
阅读更多...
事件处理详解

事件处理详解

前言 本文大概整理下绑定事件的几种方式&#xff0c;兼容IE8- 的方式&#xff08;如果需要的话&#xff09;&#xff0c;事件委托&#xff0c;阻止传播&#xff0c;取消默认行为&#xff0c;event对象等。 之前做的多是手机端页面&#xff0c;监听事件也一直是 addEventListene…
阅读更多...
用户会话，数据控件和AM池

用户会话，数据控件和AM池

最近&#xff0c;有人问我有关应用程序模块池的有趣问题。 众所周知&#xff0c;AM池包含用户会话引用的应用程序模块实例&#xff0c;这允许会话在后续请求时从池中获取完全相同的AM实例。 如果应用程序中有多个根应用程序模块&#xff0c;那么每个模块都将拥有自己的AM池&am…
阅读更多...
对Group_concaT函数利用剖析 （转）

对Group_concaT函数利用剖析 （转）

作者&#xff1a;晓华 开篇介绍 在FLYH4T大哥的“Mysql5注射技巧总结”一文中介绍了通过使用“information_schema”库实现遍历猜解库名表名以及字段名的技术&#xff0c;解决了一些以前使用工具无法猜解到的库名表名以及字段名的问题&#xff0c;提高了注射的效率。关于此文的…
阅读更多...
用 CSS 实现元素垂直居中，有哪些好的方案？

用 CSS 实现元素垂直居中，有哪些好的方案？

DIV居中的经典方法 1. 实现DIV水平居中 设置DIV的宽高&#xff0c;使用margin设置边距0 auto&#xff0c;CSS自动算出左右边距&#xff0c;使得DIV居中。 1 div{ 2 width: 100px; 3 height: 100px; 4 margin: 0 auto; 5 } 缺点&#xff1a;需要设置div的宽度 2.…
阅读更多...
使用wss和HTTPS / TLS保护WebSocket的安全

使用wss和HTTPS / TLS保护WebSocket的安全

是这个博客的第50条提示&#xff0c;是的&#xff01; 技术提示&#xff03;49说明了如何使用用户名/密码和Servlet安全机制保护WebSocket的安全。 本技术提示将说明如何在WildFly上使用HTTPS / TLS保护WebSocket。 让我们开始吧&#xff01; 创建一个新的密钥库&#xff1a…
阅读更多...
时钟同步及其应用（接上一篇）

时钟同步及其应用（接上一篇）

在linux下做的时钟同步的工作终于暂时告一段落了。 前面简单的做了客户端和服务器端的同步&#xff0c;在基于时间同步的机制上&#xff0c;将系统的1s的时间划分多个时槽。由于此时间同步应用在分布式系统中&#xff0c;涉及到多个客户端和服务器通信的问题&#xff0c;因此划…
阅读更多...
Java性能调优调查结果（第二部分）

Java性能调优调查结果（第二部分）

这是系列文章的第二篇&#xff0c;我们将分析2014年10月进行的性能调整调查的结果。如果您尚未阅读第一部分&#xff0c;我们建议从此处开始 。 第二部分将重点监视Java应用程序的性能问题。 特别是&#xff0c;我们尝试回答以下问题&#xff1a; 人们如何发现性能问题&#x…
阅读更多...
最新文章

Copyright @ 2022~2023