Canvas绘制图片和地区（前端使用Canvas绘制图片，并在图片上绘制地区） ...

杀鸡焉用牛刀  金牌会员 | 2024-7-26 20:57:25 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 546|帖子 546|积分 1638

简介：在开辟中，偶尔我们必要在图片上举行一些交互式操作，好比绘制地区、标志等。这种场景下，我们可以使用HTML5的<canvas>元素来实现。Canvas 是 HTML5 提供的一种图形绘制接口，可以通过 JavaScript 在网页上绘制图形、动画和其他视觉效果。这里来记录一下，怎样在一张图片上，绘制地区。

 
 


 

那么详细怎样使用Canvas在图片上绘制地区呢？

一. 首先，我们必要初始化三个canvas画布（初始化Canvas）

  1. initCanvas() {
  2.   // 初始化canvas画布
  3.   let canvasWrap = document.getElementsByClassName("canvas-wrap");
  4.   this.wrapWidth = canvasWrap[0].clientWidth;
  5.   this.wrapHeight = canvasWrap[0].clientHeight;
  7.   this.imgCanvas = document.getElementById("imgCanvas");
  8.   this.imgCtx = this.imgCanvas.getContext("2d");
  10.   // 绘制canvas
  11.   this.drawCanvas = document.getElementById("drawCanvas");
  12.   this.drawCtx = this.drawCanvas.getContext("2d");
  14.   // 保存绘制区域 saveCanvas
  15.   this.saveCanvas = document.getElementById("saveCanvas");
  16.   this.saveCtx = this.saveCanvas.getContext("2d");
  17. },},
复制代码

  • imgCanvas用于绘制原始图片
  • drawCanvas用于临时绘制地区
  • saveCanvas用于保存终极绘制的地区
 
 

二. 盘算并设置canvas的宽高比例，以顺应图片尺寸

  1. initImgCanvas() {
  2.   // 计算宽高比
  3.   let ww = this.wrapWidth; // 画布宽度
  4.   let wh = this.wrapHeight; // 画布高度
  5.   let iw = this.imgWidth; // 图片宽度
  6.   let ih = this.imgHeight; // 图片高度
  8.   if (iw / ih < ww / wh) {
  9.     // 以高为主
  10.     this.ratio = ih / wh;
  11.     this.canvasHeight = wh;
  12.     this.canvasWidth = (wh * iw) / ih;
  13.   } else {
  14.     // 以宽为主
  15.     this.ratio = iw / ww;
  16.     this.canvasWidth = ww;
  17.     this.canvasHeight = (ww * ih) / iw;
  18.   }
  20.   // 初始化画布大小
  21.   this.imgCanvas.width = this.canvasWidth;
  22.   this.imgCanvas.height = this.canvasHeight;
  23.   this.drawCanvas.width = this.canvasWidth;
  24.   this.drawCanvas.height = this.canvasHeight;
  25.   this.saveCanvas.width = this.canvasWidth;
  26.   this.saveCanvas.height = this.canvasHeight;
  28.   // 图片加载绘制
  29.   let img = document.createElement("img");
  30.   img.src = this.imgUrl;
  31.   img.onload = () => {
  32.     console.log("图片已加载");
  33.     this.imgCtx.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
  34.     this.renderDatas(); // 渲染原有数据
  35.   };
  36. },},
复制代码
这里先盘算画布和图片的宽高比,根据比例关系决定以宽为主还是以高为主举行等比缩放。然后设置三个canvas的宽高,并在图片加载完成后将其绘制到imgCanvas上。renderDatas函数用于渲染已有的绘制数据(如果有的话)。
 
 

三. 开始绘制，绘制的重要逻辑

  1. startDraw() {
  2.   // 绘制区域
  3.   if (this.isDrawing) return;
  4.   this.isDrawing = true;
  5.   // 绘制逻辑
  6.   this.drawCanvas.addEventListener("click", this.drawImageClickFn);
  7.   this.drawCanvas.addEventListener("dblclick", this.drawImageDblClickFn);
  8.   this.drawCanvas.addEventListener("mousemove", this.drawImageMoveFn);
  9. },},
复制代码
我们在drawCanvas上监听click、dblclick和mousemove事件,分别对应点击、双击和鼠标移动三种绘制交互。
 
 
四. 点击事件，用于开始一个新的地区绘制

  1. drawImageClickFn(e) {
  2.   let drawCtx = this.drawCtx;
  3.   if (e.offsetX || e.layerX) {
  4.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  5.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  6.     let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
  7.     if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
  8.       this.drawingPoints.push([pointX, pointY]);
  9.     }
  10.   }
  11. },},
复制代码
这里获取鼠标点击的坐标,并将其推入drawingPoints数组中,用于临时保存当前绘制地区的点坐标。
 
 
五. 鼠标移动事件，用于及时绘制地区

  1. drawImageMoveFn(e) {
  2.   let drawCtx = this.drawCtx;
  3.   if (e.offsetX || e.layerX) {
  4.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  5.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  6.     // 绘制
  7.     drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  9.     // 绘制点
  10.     drawCtx.fillStyle = "blue";
  11.     this.drawingPoints.forEach((item, i) => {
  12.       drawCtx.beginPath();
  13.       drawCtx.arc(...item, 6, 0, 180);
  14.       drawCtx.fill(); //填充
  15.     });
  17.     // 绘制动态区域
  18.     drawCtx.save();
  19.     drawCtx.beginPath();
  20.     this.drawingPoints.forEach((item, i) => {
  21.       drawCtx.lineTo(...item);
  22.     });
  23.     drawCtx.lineTo(pointX, pointY);
  24.     drawCtx.lineWidth = "3";
  25.     drawCtx.strokeStyle = "blue";
  26.     drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";
  27.     drawCtx.stroke();
  28.     drawCtx.fill(); //填充
  29.     drawCtx.restore();
  30.   }
  31. },},
复制代码
这里先清空drawCanvas,然后遍历drawingPoints数组,绘制已经点击的点。接着再绘制一个动态地区,即从第一个点开始,连线到当前鼠标位置,形成一个闭合多边形地区。
 
 
六. 双击事件，用于完成当前地区的绘制

  1. drawImageDblClickFn(e) {
  2.   let drawCtx = this.drawCtx;
  3.   let saveCtx = this.saveCtx;
  4.   if (e.offsetX || e.layerX) {
  5.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  6.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  7.     let lastPoint = this.drawingPoints[this.drawingPoints.length - 1] || [];
  8.     if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
  9.       this.drawingPoints.push([pointX, pointY]);
  10.     }
  11.   }
  12.   // 清空绘制图层
  13.   drawCtx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
  14.   // 绘制区域至保存图层
  15.   this.drawSaveArea(this.drawingPoints);
  17.   this.drawedPoints.push(this.drawingPoints);
  18.   this.drawingPoints = [];
  19.   this.isDrawing = false;
  21.   // 绘制结束逻辑
  22.   this.drawCanvas.removeEventListener("click", this.drawImageClickFn);
  23.   this.drawCanvas.removeEventListener("dblclick", this.drawImageDblClickFn);
  24.   this.drawCanvas.removeEventListener("mousemove", this.drawImageMoveFn);
  25. },},
复制代码
双击时,先获取双击的坐标点,并将其推入drawingPoints数组中。然后清空drawCanvas,并调用drawSaveArea方法,将当前绘制地区渲染到saveCanvas上。
 
 
七. 遍历地区点坐标的方法

  1. drawSaveArea(points) {
  2.   if (points.length === 0) return;
  3.   this.saveCtx.save();
  4.   this.saveCtx.beginPath();
  5.   points.forEach((item, i) => {
  6.     this.saveCtx.lineTo(...item);
  7.   });
  8.   this.saveCtx.closePath();
  9.   this.saveCtx.lineWidth = "2";
  10.   this.saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";
  11.   this.saveCtx.strokeStyle = "red";
  12.   this.saveCtx.stroke();
  13.   this.saveCtx.fill();
  14.   this.saveCtx.restore();
  15. },},
复制代码
drawSaveArea方法会遍历当前地区的所有点坐标,并在saveCanvas上绘制一个闭合的多边形地区,边框为赤色,填充为半透明的紫色。接下来,将当前绘制地区的点坐标数组drawingPoints推入drawedPoints数组中,用于保存所有已绘制的地区数据。然后,重置drawingPoints和isDrawing的状态,并移除所有绘制事件的监听器。
至此,一个地区的绘制就完成了。如果必要继续绘制新的地区,只需再次调用startDraw方法即可。
 
 
八. 保存和渲染数据。我们必要将绘制的地区数据保存下来，以及从已有数据中处置惩罚出必要的地区数据

  1. savePoints() {
  2.   // 将画布坐标数据转换成提交数据
  3.   let objectPoints = [];
  4.   objectPoints = this.drawedPoints.map((area) => {
  5.     let polygon = {};
  6.     area.forEach((point, i) => {
  7.       polygon[`x${i + 1}`] = Math.round(point[0] * this.ratio);
  8.       polygon[`y${i + 1}`] = Math.round(point[1] * this.ratio);
  9.     });
  10.     return {
  11.       polygon: polygon,
  12.     };
  13.   });
  14.   this.submitData = objectPoints;
  15.   console.log("最终提交数据", objectPoints);
  16. },},
复制代码
这里遍历所有已绘制的地区drawedPoints，将每个地区的点坐标根据ratio举行缩放(实际图片尺寸),并转换成一个polygon对象的形式，终极保存在submitData中。
 
 
九. 渲染数据

  1. renderDatas() {
  2.   // 将提交数据数据转换成画布坐标
  3.   this.drawedPoints = this.submitData.map((item) => {
  4.     let polygon = item.polygon;
  5.     let points = [];
  6.     for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {
  7.       if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {
  8.         points.push([
  9.           polygon[`x${i}`] / this.ratio,
  10.           polygon[`y${i}`] / this.ratio,
  11.         ]);
  12.       }
  13.     }
  14.     this.drawSaveArea(points);
  15.     return points;
  16.   });
  17. },},
复制代码
渲染数据的逻辑是，遍历submitData中的每个polygon对象，根据ratio将其坐标值转换成canvas的坐标值，并调用drawSaveArea方法将其渲染到saveCanvas上。至此，我们就完成了在canvas上绘制图片地区的全部逻辑。可以根据详细需求举行相应的调整和扩展。
 
 
十. 执行过程

               详细全部的执行顺序如下:

     

  • 初始化Canvas

    • 调用initCanvas()方法初始化三个Canvas画布
    • 调用initImgCanvas()方法盘算并设置画布宽高比例，加载并绘制图片

  • 开始绘制

    • 调用startDraw()方法
    • 监听drawCanvas的click、dblclick、mousemove事件
    • 点击时,在drawImageClickFn中记录点坐标
    • 移动时,在drawImageMoveFn中及时绘制地区
    • 双击时,在drawImageDblClickFn中完成当前地区绘制，保存至saveCanvas

  • 保存和渲染数据

    • 调用savePoints()方法,将绘制地区的点坐标数据转换并保存到submitData中
    • 调用renderDatas()方法,将submitData中的数据转换并渲染到saveCanvas上

     简单来说，就是先初始化画布，然后开始绘制地区的交互，最后保存和渲染数据。

                                       
     
      十一. 当然，如果想使用原生JS实现，可以改成像下面这样

  
  1. let canvasWrap, wrapWidth, wrapHeight, imgCanvas, imgCtx, drawCanvas,
  2. drawCtx, saveCanvas, saveCtx;
  3. let ratio, canvasWidth, canvasHeight, imgWidth, imgHeight, imgUrl;
  4. let isDrawing = false;
  5. let drawingPoints = [];
  6. let drawedPoints = [];
  7. let submitData = [];
  9. // 1. 初始化Canvas画布
  10. function initCanvas() {
  11.   // 获取canvas容器元素并设置宽高
  12.   canvasWrap = document.getElementsByClassName("canvas-wrap")[0];
  13.   wrapWidth = canvasWrap.clientWidth;
  14.   wrapHeight = canvasWrap.clientHeight;
  16.   // 获取canvas元素并获取2D绘图上下文
  17.   imgCanvas = document.getElementById("imgCanvas");
  18.   imgCtx = imgCanvas.getContext("2d");
  19.   drawCanvas = document.getElementById("drawCanvas");
  20.   drawCtx = drawCanvas.getContext("2d");
  21.   saveCanvas = document.getElementById("saveCanvas");
  22.   saveCtx = saveCanvas.getContext("2d");
  23. }
  25. // 2. 初始化图片Canvas
  26. function initImgCanvas() {
  27.   // 计算画布和图片的宽高比
  28.   let ww = wrapWidth;
  29.   let wh = wrapHeight;
  30.   let iw = imgWidth;
  31.   let ih = imgHeight;
  33.   if (iw / ih < ww / wh) {
  34.     ratio = ih / wh;
  35.     canvasHeight = wh;
  36.     canvasWidth = (wh * iw) / ih;
  37.   } else {
  38.     ratio = iw / ww;
  39.     canvasWidth = ww;
  40.     canvasHeight = (ww * ih) / iw;
  41.   }
  43.   // 设置三个canvas的宽高
  44.   imgCanvas.width = canvasWidth;
  45.   imgCanvas.height = canvasHeight;
  46.   drawCanvas.width = canvasWidth;
  47.   drawCanvas.height = canvasHeight;
  48.   saveCanvas.width = canvasWidth;
  49.   saveCanvas.height = canvasHeight;
  51.   // 加载图片并绘制到imgCanvas上
  52.   let img = document.createElement("img");
  53.   img.src = imgUrl;
  54.   img.onload = () => {
  55.     console.log("图片已加载");
  56.     imgCtx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
  57.     renderDatas(); // 渲染已有数据
  58.   };
  59. }
  61. // 3. 开始绘制
  62. function startDraw() {
  63.   if (isDrawing) return;
  64.   isDrawing = true;
  65.   // 监听drawCanvas的click、dblclick和mousemove事件
  66.   drawCanvas.addEventListener("click", drawImageClickFn);
  67.   drawCanvas.addEventListener("dblclick", drawImageDblClickFn);
  68.   drawCanvas.addEventListener("mousemove", drawImageMoveFn);
  69. }
  71. // 4. 清空所有绘制区域
  72. function clearAll() {
  73.   saveCtx.clearRect(0, 0, canvasWidth, canvasHeight);
  74.   drawedPoints = [];
  75. }
  77. // 5. 获取并加载图片
  78. function getImage() {
  79.   imgUrl = "需要渲染的图片地址";
  80.   imgWidth = 200;
  81.   imgHeight = 300;
  82.   imgUrl && initImgCanvas();
  83. }
  85. // 6. 点击事件,记录点坐标
  86. function drawImageClickFn(e) {
  87.   if (e.offsetX || e.layerX) {
  88.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  89.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  90.     let lastPoint = drawingPoints[drawingPoints.length - 1] || [];
  91.     if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
  92.       drawingPoints.push([pointX, pointY]);
  93.     }
  94.   }
  95. }
  97. // 7. 鼠标移动事件,实时绘制区域
  98. function drawImageMoveFn(e) {
  99.   if (e.offsetX || e.layerX) {
  100.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  101.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  102.     drawCtx.clearRect(0, 0, canvasWidth, canvasHeight);
  104.     drawCtx.fillStyle = "blue";
  105.     drawingPoints.forEach((item, i) => {
  106.       drawCtx.beginPath();
  107.       drawCtx.arc(...item, 6, 0, 180);
  108.       drawCtx.fill();
  109.     });
  111.     drawCtx.save();
  112.     drawCtx.beginPath();
  113.     drawingPoints.forEach((item, i) => {
  114.       drawCtx.lineTo(...item);
  115.     });
  116.     drawCtx.lineTo(pointX, pointY);
  117.     drawCtx.lineWidth = "3";
  118.     drawCtx.strokeStyle = "blue";
  119.     drawCtx.fillStyle = "rgba(255, 0, 0, 0.3)";
  120.     drawCtx.stroke();
  121.     drawCtx.fill();
  122.     drawCtx.restore();
  123.   }
  124. }
  126. // 8. 双击事件,完成当前区域绘制
  127. function drawImageDblClickFn(e) {
  128.   if (e.offsetX || e.layerX) {
  129.     let pointX = e.offsetX == undefined ? e.layerX : e.offsetX;
  130.     let pointY = e.offsetY == undefined ? e.layerY : e.offsetY;
  131.     let lastPoint = drawingPoints[drawingPoints.length - 1] || [];
  132.     if (lastPoint[0] !== pointX || lastPoint[1] !== pointY) {
  133.       drawingPoints.push([pointX, pointY]);
  134.     }
  135.   }
  136.   drawCtx.clearRect(0, 0, canvasWidth, canvasHeight);
  137.   drawSaveArea(drawingPoints);
  139.   drawedPoints.push(drawingPoints);
  140.   drawingPoints = [];
  141.   isDrawing = false;
  143.   drawCanvas.removeEventListener("click", drawImageClickFn);
  144.   drawCanvas.removeEventListener("dblclick", drawImageDblClickFn);
  145.   drawCanvas.removeEventListener("mousemove", drawImageMoveFn);
  146. }
  148. // 9. 绘制区域到saveCanvas
  149. function drawSaveArea(points) {
  150.   if (points.length === 0) return;
  151.   saveCtx.save();
  152.   saveCtx.beginPath();
  153.   points.forEach((item, i) => {
  154.     saveCtx.lineTo(...item);
  155.   });
  156.   saveCtx.closePath();
  157.   saveCtx.lineWidth = "2";
  158.   saveCtx.fillStyle = "rgba(255,0, 255, 0.3)";
  159.   saveCtx.strokeStyle = "red";
  160.   saveCtx.stroke();
  161.   saveCtx.fill();
  162.   saveCtx.restore();
  163. }
  165. // 10. 保存绘制数据
  166. function savePoints() {
  167.   let objectPoints = [];
  168.   objectPoints = drawedPoints.map((area) => {
  169.     let polygon = {};
  170.     area.forEach((point, i) => {
  171.       polygon[`x${i + 1}`] = Math.round(point[0] * ratio);
  172.       polygon[`y${i + 1}`] = Math.round(point[1] * ratio);
  173.     });
  174.     return {
  175.       polygon: polygon,
  176.     };
  177.   });
  178.   submitData = objectPoints;
  179.   console.log("最终提交数据", objectPoints);
  180. }
  182. // 11. 渲染已有数据
  183. function renderDatas() {
  184.   drawedPoints = submitData.map((item) => {
  185.     let polygon = item.polygon;
  186.     let points = [];
  187.     for (let i = 1; i < Object.keys(polygon).length / 2 + 1; i++) {
  188.       if (!isNaN(polygon[`x${i}`]) && !isNaN(polygon[`y${i}`])) {
  189.         points.push([
  190.           polygon[`x${i}`] / ratio, // 根据ratio换算canvas坐标
  191.           polygon[`y${i}`] / ratio,
  192.         ]);
  193.       }
  194.     }
  195.     drawSaveArea(points); // 调用drawSaveArea将区域绘制到saveCanvas上
  196.     return points;
  197.   });
  198. },},
  200. // 使用方式
  201. initCanvas(); // 1. 初始化Canvas画布
  202. getImage(); // 5. 获取并加载图片
  203. startDraw(); // 3. 开始绘制
复制代码
  详细流程：
   

  • renderDatas函数的作用是将已有的绘制数据(submitData)转换成canvas坐标，
  • 并调用drawSaveArea方法将其渲染到saveCanvas上，
  • 该函数遍历submitData中的每个polygon对象，
  • 根据ratio将其坐标值转换成canvas的坐标值，
  • 然后调用drawSaveArea方法绘制该地区，
  • 终极返回一个包罗所有地区点坐标的数组drawedPoints，
  • 最后，必要按顺序调用initCanvas() -> getImage() -> startDraw()等方法,分别完成初始化画布、加载图片和开始绘制的功能。
    
   十二. 全部代码

   全部的VueJS代码和原生JavaScript代码，请打赏后，直接点我头像，私我，获取全部代码。
 
    
    

    
         创作不易，感觉有用，就一键三连，感谢(●'◡'●)

     
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

杀鸡焉用牛刀

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表