古希腊哲学家芝诺说:“你知道的越多, 你会发现自己不知道的就会更多”。以往团队的技术分享不够系统，也没有形成一定的规律和习惯，对于团队成员的技术积累和成果共享达不到很好的效果，为了大家有更快的技术提升和能力提高，今年对团队的技术分享做了相应的规划，每个团队成员都会参与其中，将自己在开发过程中总结的知识点汇总起来，以专题的形式两周一次进行技术交流分享，前期进行各个技术点的积累，逐渐形成体系，也让大家能够不断的丰富自己的技术栈和技术深度。 2022新年伊始，新的起点，后续会不断更新分享的相关文章，关于团队技术提升和团队共建有什么好的实施经验，欢迎评论区交流指导。本文是团队技术分享的第二篇，针对之前业务开发中关于canvas的两个技术点进行了整理，内容如下： # 一、用canvas画布实现鼠标拖拽矩形框 ## 1、实现原理 Canvas是一种非保留性的绘图界面，即不会记录过去执行的绘图操作，而是保持最终结果。如果想让Canvas变得具有交互性，比如用户可以选择、拖动画布上的图形。那么我们必须记录绘制的每一个对象，才能在将来灵活的修改并重绘它们，实现交互。以鼠标的坐标点为基点，改变矩形框的大小，不同的是，这里每帧都要把画布清空以及重绘，这样最终看到的效果就是跟着鼠标的拖动，矩形框也跟着在变化。 ## 2、相关参数 ```javascript drawer：{ drawType: 1, // 1. 矩形；2.圆形 layers: [], //存储的画框信息 c: null, //获取画布 ctx: null, //获取绘图2D环境 currentR: null,//当前选中的对象 leftDistance: 0, //鼠标点横坐标与当前选中矩形左侧的差值 topDistance: 0, //鼠标点纵坐标与当前选中矩形左侧的差值 flag: 0, //是否点击鼠标的标志，0 不点击，1点击鼠标 op: 0, //op操作类型 0 无操作 1 画矩形框 2 拖动矩形框 x: 0, //鼠标的位置 y: 0, //鼠标的位置 imgUrl: "", //图片地址 elementWidth: 0, //画布的宽度 elementHeight: 0, //画布的高度 } ``` ### 2.1 isPointInPath：在每次重绘画布的时候，判断鼠标坐标点是否在画布的某一个矩形内部。只有实现了判断方法才可以实现拖动以及改变矩形框的大小。如果指定的点位于当前路径，返回true；否则返回false。 ```javascript context.isPointInPath(x,y) ``` ### 2.2 reshow:重绘函数，把已经绘制的矩形的相关属性放在了layers这个数组里，每帧的重绘操作就是根据这个对象的描述重现这个矩形框，然后判断x,y是否在这个矩形框的路径上，由此实现了判断鼠标是否在矩形框内。 ```javascript reshow: (x, y) => { let allNotIn = 1; drawer.layers.forEach((item) => { drawer.ctx.beginPath(); drawer.ctx.strokeStyle = item.strokeStyle; drawer.ctx.lineWidth = item.lineWidth; //矩形 if (item.drawType == 1) { drawer.ctx.rect(item.x1, item.y1, item.width, item.height); // 更新大小区域 if ( x >= item.x1 - 10 / drawer.scale && x <= item.x1 + 10 / drawer.scale && y <= item.y2 - 10 / drawer.scale && y >= item.y1 + 10 / drawer.scale ) { drawer.resizeLeft(item); } else if ( x >= item.x2 - 10 / drawer.scale && x <= item.x2 + 10 / drawer.scale && y <= item.y2 - 10 / drawer.scale && y >= item.y1 + 10 / drawer.scale ) { drawer.resizeWidth(item); } else if ( y >= item.y1 - 10 / drawer.scale && y <= item.y1 + 10 / drawer.scale && x <= item.x2 - 10 / drawer.scale && x >= item.x1 + 10 / drawer.scale ) { drawer.resizeTop(item); } else if ( y >= item.y2 - 10 / drawer.scale && y <= item.y2 + 10 / drawer.scale && x <= item.x2 - 10 / drawer.scale && x >= item.x1 + 10 / drawer.scale ) { drawer.resizeHeight(item); } else if ( x >= item.x1 - 10 / drawer.scale && x <= item.x1 + 10 / drawer.scale && y <= item.y1 + 10 / drawer.scale && y >= item.y1 - 10 / drawer.scale ) { drawer.resizeLT(item); } else if ( x >= item.x2 - 10 / drawer.scale && x <= item.x2 + 10 / drawer.scale && y <= item.y2 + 10 / drawer.scale && y >= item.y2 - 10 / drawer.scale ) { drawer.resizeWH(item); } else if ( x >= item.x1 - 10 / drawer.scale && x <= item.x1 + 10 / drawer.scale && y <= item.y2 + 10 / drawer.scale && y >= item.y2 - 10 / drawer.scale ) { drawer.resizeLH(item); } else if ( x >= item.x2 - 10 / drawer.scale && x <= item.x2 + 10 / drawer.scale && y <= item.y1 + 10 / drawer.scale && y >= item.y1 - 10 / drawer.scale ) { drawer.resizeWT(item); } } if (item.drawType == 2) { drawer.ctx.arc(item.x1, item.y1, item.r, 0, 2 * Math.PI); let newR = Math.sqrt( Math.pow(x - item.x1, 2) + Math.pow(y - item.y1, 2) ); if ( newR >= item.r - 10 / drawer.scale && newR <= item.r + 10 / drawer.scale ) { drawer.resizeCircle(item); } } if (drawer.ctx.isPointInPath(x * drawer.scale, y * drawer.scale)) { drawer.render(item); allNotIn = 0; } drawer.ctx.stroke(); }); if (drawer.flag && allNotIn && drawer.op < 3) { drawer.op = 1; } }, ``` ### 2.3 render函数:用于修改当前移动的矩形框的坐标 ```javascript render: (rect) => { drawer.c.style.cursor = "move"; if (drawer.flag && drawer.op == 0) { drawer.op = 2; } if (drawer.flag && drawer.op == 2) { if (!drawer.currentR) { drawer.currentR = rect; } drawer.currentR.x2 += drawer.x - drawer.leftDistance - drawer.currentR.x1; drawer.currentR.x1 += drawer.x - drawer.leftDistance - drawer.currentR.x1; drawer.currentR.y2 += drawer.y - drawer.topDistance - drawer.currentR.y1; drawer.currentR.y1 += drawer.y - drawer.topDistance - drawer.currentR.y1; } }, ``` ### 2.4 isPointInRetc(x, y)：判断当前鼠标是否在矩形框内和圆内 ```javascript function isPointInRetc(x, y) { let len = drawer.layers.length; for (let i = 0; i < len; i++) { // 矩形区域判断 if (drawer.layers[i].drawType === 1) { if ( drawer.layers[i].x1 < x && x < drawer.layers[i].x2 && drawer.layers[i].y1 < y && y < drawer.layers[i].y2 ) { return drawer.layers[i]; } } // 圆形区域判断 if (drawer.layers[i].drawType === 2) { let oriR = Math.pow(drawer.layers[i].x1 - drawer.layers[i].x2, 2) + Math.pow(drawer.layers[i].y1 - drawer.layers[i].y2, 2); let newR = Math.pow(drawer.layers[i].x1 - x, 2) + Math.pow(drawer.layers[i].y1 - y, 2); if (newR <= oriR) { return drawer.layers[i]; } } } } ``` ### 2.5 mousedown:鼠标按下 ```javascript let mousedown = function (e) { //获取鼠标的点 startx = (e.pageX - drawer.c.offsetLeft + drawer.c.parentElement.scrollLeft) starty = (e.pageY - drawer.c.offsetTop + drawer.c.parentElement.scrollTop) drawer.currentR = isPointInRetc(startx, starty); if (drawer.currentR) { drawer.leftDistance = startx - drawer.currentR.x1; drawer.topDistance = starty - drawer.currentR.y1; } drawer.ctx.strokeRect(drawer.x, drawer.y, 0, 0); drawer.ctx.strokeStyle = "#00ff00"; drawer.ctx.lineWidth = 2; drawer.flag = 1; }; ``` ### 2.6 mousemove：鼠标移动 ```javascript let mousemove = function (e) { drawer.x = (e.pageX - drawer.c.offsetLeft + drawer.c.parentElement.scrollLeft) drawer.y = (e.pageY - drawer.c.offsetTop + drawer.c.parentElement.scrollTop) drawer.ctx.save(); drawer.ctx.setLineDash([5]); drawer.c.style.cursor = "default"; drawer.ctx.lineWidth = 2; drawer.ctx.clearRect(0, 0, drawer.elementWidth, drawer.elementHeight); if (drawer.flag && drawer.op == 1) { if (drawer.drawType == 1) { drawer.ctx.strokeRect( startx, starty, drawer.x - startx, drawer.y - starty ); } if (drawer.drawType == 2) { let r = Math.sqrt( Math.pow(drawer.x - startx, 2) + Math.pow(drawer.y - starty, 2) ); drawer.ctx.beginPath(); drawer.ctx.arc(startx, starty, r, 0, 2 * Math.PI); drawer.ctx.stroke(); } } drawer.ctx.restore(); drawer.reshow(drawer.x, drawer.y); }; ``` ### 2.7 mouseup:鼠标弹起 ```javascript let mouseup = function (e) { if (drawer.x - startx > 20 || drawer.y - starty > 20) { drawer.layers.push( fixPosition({ x1: startx, y1: starty, x2: drawer.x, y2: drawer.y, strokeStyle: "#00ff00", lineWidth: 2, drawType: drawer.drawType, }) ); } drawer.currentR = null; drawer.flag = 0; drawer.reshow(drawer.x, drawer.y); drawer.op = 0; }; ``` ## 3、效果展示： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9fcc762c76a647dd868c6b634d9d4c51~tplv-k3u1fbpfcp-zoom-1.image) # 二、用svg实现实现鼠标拖拽矩形框 SVG 是可缩放的矢量图形，使用XML格式定义图像，可以生成**对应的DOM节点，便于对单个图形进行交互操作**。比CANVAS更加灵活一点。关于SVG的基础知识，请参考[SVG学习地址](http://www.w3school.com.cn/svg/svg_examples.asp) ## 1、SVG的图形和基本属性 ### 1.1 基本图形 ```javascript 矩形 x y 横坐标和纵坐标（矩形左上角的位置） width 宽 height 高 rx ry 圆角大小（只设置rx或ry，则两者的值相同，只有分别设置了不同的值才会各自显示不同的大小）圆形 cx cy 横坐标和纵坐标（圆形的中心点） r 半径椭圆 cx cy 横坐标和纵坐标 rx ry 横向半径和纵向半径线段 x1 y1 端点坐标 x2 y2 端点坐标折线 points="x1 y1 x2 y2 x3 y3.." 多少个节点就设置多少个x y 值多边形 points="x1 y1 x2 y2 x3 y3.." 多少个节点就设置多少个x y 值，第一个节点和最后一个节点会自动连接在一起 ``` ### 1.2 基本属性 ```javascript fill = “#FFB3AE” 填充颜色 stroke = #971817 描边颜色 stroke-width = 10 描边的粗细 transform = "rotate(30)" 旋转变形 ``` ## 2、案例 ```html ``` ### 2.1 打开图片这是一个能针对某个元素实行大小、位置变化监听的API，是一个类，它提供了一个观察器，该观察器将在每个 resize 事件上调用，通过实例化一个监听器，然后调用observe方法传入一个要执行监听的DOM元素或SVG元素，那么每次resize事件触发时都会执行ResizeObserver实例化时传入的回调函数，该回调函数默认会返回一个数组，数组里包含了每个被执行了监听器的元素及其可读信息，元素的拜访顺序也是监听器执行的顺序（对，实例化一个监听器，可多次执行observe方法对不同元素进行监听！） ```javascript let _that = this; var ro = new ResizeObserver(entries => { _that.oriWidthFull = _that.oriWidthFull || oriImg.offsetWidth; _that.oriHeightFull = _that.oriHeightFull || oriImg.offsetHeight; _that.resizeDrawSvg(_that.oriWidthFull, _that.oriHeightFull); _that.oriWidthFull = entries[0].contentRect.width; _that.oriHeightFull = entries[0].contentRect.height; }); this.$nextTick(async () => { ro.observe(document.getElementById('oriImg')); this.drawSvg(); }); ``` ### 2.2 drawSvg：初始画框 ```javascript drawSvg() { this.$nextTick(() => { let orisize = this.chooseSample.size.split('*'); let oriWidth = +orisize[0]; let oriHeight = +orisize[1]; let imgWidth = oriImg.offsetWidth; let imgHeight = oriImg.offsetHeight; svgelem.setAttribute('width', imgWidth); svgelem.setAttribute('height', imgHeight); let scale = imgWidth / oriWidth; // 更改实际的坐标 this.newTags.forEach(tag => { tag.oriX = tag.x || 0; tag.oriY = tag.y || 0; tag.oriWidth = tag.width || 0; tag.oriHeight = tag.height || 0; tag.x = Math.round(tag.oriX * scale); tag.y = Math.round(tag.oriY * scale); tag.width = Math.round(tag.oriWidth * scale); tag.height = Math.round(tag.oriHeight * scale); }); this.currentTags.forEach(tag => { tag.oriX = tag.x || 0; tag.oriY = tag.y || 0; tag.oriWidth = tag.width || 0; tag.oriHeight = tag.height || 0; tag.x = Math.round(tag.oriX * scale); tag.y = Math.round(tag.oriY * scale); tag.width = Math.round(tag.oriWidth * scale); tag.height = Math.round(tag.oriHeight * scale); }); }); }, ``` ### 2.3 resizeDrawSvg：页面变化框重绘 ```javascript resizeDrawSvg(oriWidth, oriHeight) { this.$nextTick(() => { let imgWidth = oriImg.offsetWidth; let imgHeight = oriImg.offsetHeight; svgelem.setAttribute('width', imgWidth); svgelem.setAttribute('height', imgHeight); let scale = imgWidth / oriWidth; // 更改实际的坐标 this.newTags.forEach(tag => { tag.oriX = tag.x || 0; tag.oriY = tag.y || 0; tag.oriWidth = tag.width || 0; tag.oriHeight = tag.height || 0; tag.x = Math.round(tag.oriX * scale); tag.y = Math.round(tag.oriY * scale); tag.width = Math.round(tag.oriWidth * scale); tag.height = Math.round(tag.oriHeight * scale); }); this.currentTags.forEach(tag => { tag.oriX = tag.x || 0; tag.oriY = tag.y || 0; tag.oriWidth = tag.width || 0; tag.oriHeight = tag.height || 0; tag.x = Math.round(tag.oriX * scale); tag.y = Math.round(tag.oriY * scale); tag.width = Math.round(tag.oriWidth * scale); tag.height = Math.round(tag.oriHeight * scale); }); }); }, ``` ### 2.4 handleChooseTag：选中某个标注 ```javascript // 选中某个标注 handleChooseTag(index) { this.editIndex = index; let temp = JSON.parse(JSON.stringify(this.newTags)); temp.forEach((tag, ind) => { tag.isActive = ind == index; tag.color = ind == index ? 'red' : '#00ff00'; }); this.newTags = JSON.parse(JSON.stringify(temp)); }, ``` ## 3、效果展示 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5a040d033cb349e29af382d0bebfdb7d~tplv-k3u1fbpfcp-zoom-1.image) # 三、基于Vue + fabric.js的图片标注组件搭建 Fabric.js 是一个强大而简单的 Javascript HTML5 画布库 Fabric 在画布元素之上提供交互式对象模型 Fabric 还具有 SVG-to-canvas（和 canvas-to-SVG）解析器。使用Fabric.js，你可以在画布上创建和填充对象; 比如简单的几何形状 - 矩形，圆形，椭圆形，多边形，自定义图片或由数百或数千个简单路径组成的更复杂的形状。另外，还可以使用鼠标缩放，移动和旋转这些对象；修改它们的属性 - 颜色，透明度，z-index等。也可以将画布上的对象进行组合。 ## 1、安装 yarn add fabric -S 或者 npm i fabric -S ## 2、依赖下载[customiseControls.min.js](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fpurestart%2Fvue-fabric%2Fblob%2Fmaster%2Fstatic%2Fjs%2FcustomiseControls.min.js).和 [fabric.min.js](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fpurestart%2Fvue-fabric%2Fblob%2Fmaster%2Fstatic%2Fjs%2Ffabric.min.js) 到本地 static/js/文件下
本地项目 index.html 引入 ```javascript ``` ### 3.1 绘制一个简单的图形 #### 3.1.1 Fabric 提供了 7 种基础形状： - fabric.Circle (圆) - fabric.Ellipse (椭圆) - fabric.Line (线) - fabric.Polyline (多条线绘制成图形) - fabric.triangle (三角形) - fabric.Rect (矩形) - fabric.Polygon (多边形) #### 3.1.2 效果展示可支持对图片、矩形、三角形、虚线添加到画布中并且进行旋转。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c668f5087eae43ca8ada6fe3a8e00cf8~tplv-k3u1fbpfcp-zoom-1.image) #### 3.1.2 代码展示 ``` ``` ``` ``` # 四、基于canvas改色图片 ### 1.图片的颜色组成 RGB色彩是工业界的一种颜色标准，是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的，RGB即是代表红、绿、蓝三个通道的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是运用最广的颜色系统之一。三原色Red, Green, Blue, 每一种颜色值的范围是0~255，所以每一个颜色用1个字节=8个bit便可完全在计算机内部表示出来。而R， G, B不同的组合几乎产生了所有的颜色，当然自然界中的颜色比这些要远远丰富很多，采用R, G, B的方式，如果以24色深表示的话，在计算机中可表示的颜色数量有2^8 2 ^8 2 ^8 = 16777216种颜色。 ## 2.图片在计算机中的存储照片、图像等非数字化的图像信息，都是以“像素”的形式，通过按照顺序（矩阵形式）进行有序排列。像素是组成图像的基本单位。每个图片中的像素都会对应一个颜色值的矩阵，如果一个480*320像素的黑白图片就会有一个480*320的颜色值（0,255）矩阵。下面是入门卷积神经网络经常使用的一张图片。
![294481b3ee54735337db304b6dace9b0.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e6fcfccd7cb4999ba3f701fe5757a32~tplv-k3u1fbpfcp-zoom-1.image) ![8bab72cf59cff79f9d74efef3a2afcd9.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0a24ec4c071847b59f5870bca0fc6dec~tplv-k3u1fbpfcp-zoom-1.image) 图片实际上在计算机的存储。[](https://blog.csdn.net/qq_27524749/article/details/104581736) ## 3.基于canvas的demo ```vue

//canvas加载图片 loadImg() { let img = document.getElementById('imgs'); this.mycanvas = document.getElementById('drawing');//获取dom let ctx = this.mycanvas.getContext('2d'); img.crossOrigin = '';//配置canvas跨域 img.onload = function() { ctx.drawImage(img, 0, 0); console.log(ctx.getImageData(0, 0, img.width, img.height)); }; img.src = 'http://192.168.79.140:80/testN/aaaa/demo.jpg'; }, // 获取图片的像素点数据 getImgPixData() { let img = document.getElementById('imgs'); var context = this.mycanvas.getContext('2d'); let imageData = context.getImageData(0, 0, img.width, img.height);//获取图像数据 let data = imageData.data; this.changeImage(context, imageData); }, //改变图的颜色 changeImage(context, imageData) { this.times = this.times + 1; let jtem = 0; for (let j = 0; j < 10000000; j++) { jtem = j + jtem; } for (let i = 0; i < imageData.data.length; i += 4) { imageData.data[i + 0] = imageData.data[i + 0] - 2 * this.times; imageData.data[i + 1] = 255 - imageData.data[i + 1] - 5 * this.times; imageData.data[i + 2] = imageData.data[i + 2] - 5 * this.times; // imageData.data[i + 3] = 255; } context.putImageData(imageData, 0, 0);//将图像数据画进canvas中 } ``` canvas返回的图像数据，存在着四方面的信息，即 RGBA 值： - R - 红色 (0-255) - G - 绿色 (0-255) - B - 蓝色 (0-255) - A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的) ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf3678339ab84621a79dee0b9ab3e4cd~tplv-k3u1fbpfcp-zoom-1.image)
效果展示 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b97d94897f254fec988f962026c22106~tplv-k3u1fbpfcp-zoom-1.image)
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/02b2d185d2d142e29e912ac2476b3a23~tplv-k3u1fbpfcp-zoom-1.image) **本文来自董小胖和中国式苗子**