使用鼠标绘制canvas绘制多边形

于 2024-07-27 09:49:03 发布
阅读量229 收藏 6
点赞数 2
文章标签： 计算机外设 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/p_roject/article/details/140722432
版权

实现一个鼠标绘制多边形，区域的功能，可以添加文字展示，并且支持文字换行，居中展示

效果如下请添加图片描述
实现主要思路：
绘制方面：要创建两个绘制的方法，第一个：绘制所有的图形通过allPoints进行存储，不报行正在绘制的点位列表
第二个：绘制当前正在画的点位列表并且，通过currentPoints进行存储
监听事件：监听鼠标的事件：移动，单击(绘制)，双击（结束绘制）
文字位置计算：计算几何图形的中心点，计算换行的高度，计算最宽的文字宽度，通过计算得出中心点，再通过每段文字的宽度与最大文字宽度对比，小于最大宽度进行空格补齐实现居中显示
区域选中：通过计算点击位置是否再图形内循环计算
此外根据已经实现的函数，可以轻易的拓展功能，例如绘制矩形 圆形

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
      img {
        user-select: none;
      }
    </style>
    <script src="./canvas.js"></script>
  </head>
  <body>
    <div id="app">
      <img
        width="1014"
        height="609"
        src="./地图.png"
        style="position: relative;opacity: 0;"
      />
      <canvas
        ref="canvas"
        style="position: absolute; top: 0; left: 0; z-index: 1"
      ></canvas>
      <div>
        <button @click="makeArea">绘制区域</button>
        <button @click="cancelMakeArea">取消绘制</button>
        <button @click="selectAreaHandler">选择区域</button>
        <button @click="openBounding">显示边框区域</button>
        <button @click="closeBounding">关闭边框区域</button>
        <button :disabled="!currentArea" @click="deleteArea">
          删除所选区域
        </button>
      </div>
      <div v-if="currentArea">已经选中:{{currentArea}}</div>
    </div>
    <script>
      const app = new Vue({
        el: "#app",
        data() {
          return {
            canvas: null,
            ctx: null,
            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0,
            allPoints: [],
            currentPoints: [],
            isdraw: false,
            isBegin: false,
            selectArea: false,
            currentArea: null,
          };
        },
        mounted() {
          // new MyCanvas(this.$refs.canvas)
          this.canvas = this.$refs.canvas;
          this.$refs.canvas.width = 1014;
          this.$refs.canvas.height = 609;
          this.ctx = this.canvas.getContext("2d");

          this.canvas.addEventListener("mousedown", this.mousedown);
          this.canvas.addEventListener("mousemove", this.mousemove);
          this.canvas.addEventListener("mouseleave", this.mouseleave);
          this.canvas.addEventListener("dblclick", this.stopDraw);
          this.allPoints =
            JSON.parse(window.localStorage.getItem("allPoints")) || [];
          this.drawAllPoints(this.setDrawColor);
        },

        methods: {
          saveArea() {},
          closeDialog() {
            this.dialog = false;
            this.currentPoints = [];
            this.clearCanvas();
            this.drawAllPoints(this.setDrawColor);
          },
          clearCanvas() {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
          },
          makeArea() {
            this.isdraw = true;
            this.isBegin = false;
            this.selectArea = false;
            this.$refs.canvas.style.cursor = "crosshair";
          },
          cancelMakeArea() {
            this.isdraw = false;
            this.isBegin = false;
            this.selectArea = false;
            this.$refs.canvas.style.cursor = "default";
          },
          selectAreaHandler() {
            this.isdraw = false;
            this.isBegin = false;
            this.selectArea = true;
            this.$refs.canvas.style.cursor = "default";
          },
          openBounding() {
            this.allPoints.forEach((areas) => {
              this.setBoundingStroke(areas.list);
            });
          },
          closeBounding() {
            this.clearCanvas();
            this.drawAllPoints(this.setDrawColor);
          },
          clearAll() {
            this.allPoints = [];
            window.localStorage.setItem(
              "allPoints",
              JSON.stringify(this.allPoints)
            );
            this.clearCanvas();
          },
          deleteArea() {
            this.allPoints = this.allPoints.filter(
              (item) => item.name !== this.currentArea.name
            );
            this.currentArea = null;
            window.localStorage.setItem(
              "allPoints",
              JSON.stringify(this.allPoints)
            );
            this.clearCanvas();
            this.drawAllPoints(this.setDrawColor);
          },
          setDrawColor(areas) {
            if (areas.id == this.currentArea?.id) {
              this.ctx.strokeStyle = "rgba(0,0,255,1)";
              this.ctx.fillStyle = "rgba(0,0,255,0.5)";
            } else {
              this.ctx.strokeStyle = "rgba(15,101,101,1)";
              this.ctx.fillStyle = "rgba(15,101,101,0.40)";
            }
          },
          drawAllPoints(setColorCalBack) {
            this.allPoints.forEach((areas) => {
              this.ctx.moveTo(areas.list[0].x, areas.list[0].y);
              this.ctx.beginPath();
              if (typeof setColorCalBack == "function") {
                setColorCalBack(areas);
              } else {
                this.ctx.strokeStyle = "rgba(255,0,0,1)";
                this.ctx.fillStyle = "rgba(255,0,0,0.5)";
              }

              areas.list.forEach((point) => {
                this.ctx.lineTo(point.x, point.y);
              });
              this.ctx.lineTo(areas.list[0].x, areas.list[0].y);
              this.ctx.fill();
              this.ctx.stroke();
              this.ctx.closePath();
              this.drawAreaName(areas);
            });
          },
          drawAreaName(areas) {
            const center = this.getPolygonAreaCenter(areas.list, areas.name);
            const name = areas.name.split(" ");

            this.ctx.fillStyle = "#fff"; // 文本颜色
            this.ctx.fontWeight = "bold";
            this.ctx.font = "12px sans-serif";
            this.ctx.textAlign = "left";
            this.ctx.textBaseline = "middle";
            let maxWidth = 0;
            name.forEach((item) => {
              const textMetrics = this.ctx.measureText(item);
              const textWidth = textMetrics.width;
              if (maxWidth < textWidth) {
                maxWidth = textWidth;
              }
            });

            const textHeight = parseInt(this.ctx.font);
            // 向上取整
            const nameLength = name.length;
            console.log(nameLength);
            center.y =
              nameLength >= 2
                ? center.y - (nameLength * textHeight) / 4
                : center.y;
            // console.log(center.y)
            // console.log(textHeight)
            // console.log(maxWidth)
            name.forEach((item) => {
              const textwidth = this.ctx.measureText(item).width;
              if (textwidth < maxWidth) {
                this.ctx.fillText(
                  item,
                  center.x + (maxWidth - textwidth) / 2,
                  center.y
                );
              } else {
                this.ctx.fillText(item, center.x, center.y);
              }
              center.y += textHeight + 3;
            });
          },
          drawCurrentLine() {
            if (!this.currentPoints[0]) return;
            this.ctx.moveTo(this.currentPoints[0].x, this.currentPoints[0].y);
            this.ctx.beginPath();
            this.currentPoints.forEach((point) => {
              this.ctx.lineTo(point.x, point.y);
            });
          },
          stopDraw() {
            this.isBegin = false;
            // this.isdraw = false
            const name = prompt("保存成功");
            const repeat = this.allPoints.some((item) => item.name === name);
            if (repeat) {
              this.$message.error("编号重复");
              return;
            }

            this.currentPoints.pop();
            this.allPoints.push({
              name: name,

              list: this.currentPoints,
            });
            window.localStorage.setItem(
              "allPoints",
              JSON.stringify(this.allPoints)
            );
            this.currentPoints = [];
            this.ctx.closePath();
            this.clearCanvas();
            this.drawAllPoints(this.setDrawColor);
            this.dialog = false;
          },

          mousedown(e) {
            if (this.isdraw) {
              this.isBegin = true;
              this.startX = e.offsetX;
              this.startY = e.offsetY;
              this.ctx.moveTo(this.startX, this.startY);
              this.ctx.beginPath();
              this.currentPoints.push({ x: this.startX, y: this.startY });
            }
            if (this.selectArea) {
              this.allPoints.forEach((areas) => {
                if (this.isPointInPolygon(e.offsetX, e.offsetY, areas.list)) {
                  this.currentArea = areas;
                  this.clearCanvas();
                  this.drawAllPoints(this.setDrawColor);
                }
              });
            }
          },
          mousemove(e) {
            if (this.isdraw && this.isBegin) {
              this.endX = e.offsetX;
              this.endY = e.offsetY;
              this.drawCurrentLine();
              this.clearCanvas();
              this.ctx.lineTo(this.endX, this.endY);
              this.ctx.lineTo(this.currentPoints[0].x, this.currentPoints[0].y);
              this.ctx.stroke();
              this.ctx.fillStyle = "rgba(255,255,255,0.5)";
              this.ctx.fill();
              this.drawAllPoints(this.setDrawColor);
            }
          },

          getPolygonAreaCenter(points, name) {
            let sum_x = 0;
            let sum_y = 0;
            let sum_area = 0;
            let p1 = points[1];
            for (var i = 2; i < points.length; i++) {
              let p2 = points[i];
              let area = this.Area(points[0], p1, p2);
              sum_area += area;
              sum_x += (points[0].x + p1.x + p2.x) * area;
              sum_y += (points[0].y + p1.y + p2.y) * area;
              p1 = p2;
            }
            name = name?.split(" ");
            let maxWidth = 0;
            name.forEach((item) => {
              const textMetrics = this.ctx.measureText(item);
              const textWidth = textMetrics.width;
              if (textWidth > maxWidth) {
                maxWidth = textWidth;
              }
            });
            // const textMetrics = this.ctx.measureText(name[0])
            // const textWidth = textMetrics.width
            const textHeight = parseInt(this.ctx.font);
            return {
              x: sum_x / sum_area / 3 - maxWidth / 2,
              y: sum_y / sum_area / 2.9 - textHeight / 2,
            };
          },
          Area(p0, p1, p2) {
            let area = 0.0;
            area =
              p0.x * p1.y +
              p1.x * p2.y +
              p2.x * p0.y -
              p1.x * p0.y -
              p2.x * p1.y -
              p0.x * p2.y;
            return area / 2;
          },
          getBoundingBox(vertices) {
            return {
              x: Math.min(...vertices.map((v) => v.x)),
              y: Math.min(...vertices.map((v) => v.y)),
              width:
                Math.max(...vertices.map((v) => v.x)) -
                Math.min(...vertices.map((v) => v.x)),
              height:
                Math.max(...vertices.map((v) => v.y)) -
                Math.min(...vertices.map((v) => v.y)),
            };
          },
          setBoundingStroke(list) {
            const bounding = this.getBoundingBox(list);
            this.ctx.beginPath();
            this.ctx.strokeStyle = "rgba(255,0,0,1)";
            this.ctx.strokeRect(
              bounding.x,
              bounding.y,
              bounding.width,
              bounding.height
            );
            this.ctx.closePath();
          },
          // 判断点击的哪个多边形内
          isPointInPolygon(x, y, points) {
            const n = points.length;
            let inside = false;
            const ray = { x: x + 1000, y }; // 射线长度为1000，向右发射

            for (let i = 0; i < n; i++) {
              const j = (i + 1) % n;
              const xi = points[i].x;
              const yi = points[i].y;
              const xj = points[j].x;
              const yj = points[j].y;

              // 检查射线与多边形边的交点
              if (
                yi > y !== yj > y &&
                x < ((xj - xi) * (y - yi)) / (yj - yi) + xi
              ) {
                inside = !inside;
              }
            }

            return inside;
          },
        },
      });
    </script>
  </body>
</html>
范同学wx
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas 绘制简单多边形
m0_61801872的博客
08-16 1496
canva绘制多边形
canvas 鼠标绘制任意多边形形状
weixin_36878452的博客
01-18 6414
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; pad...
canvas绘制直线、折线、矩形与多边形
热门推荐
zhang_cherry的博客
01-09 1万+
1、canvas的width和height属性与style中的width和height的区别 canvas是html5新增的绘图工具。通过canvas标签创建画布后，它有三个基本要素：id、宽度和高度。 特别注意的是：canvas的宽度和高度不能在style里面设置，因为此时设置的是div的宽度和高度，canvas会使用默认的宽度（300px），高度（150px）。 <canvas id="canvas" width="200px" height="200px" style="border: #138
Canvas绘制任意多边形
yuanbo_520的博客
03-20 371
【代码】Canvas绘制任意多边形。
h5 Canvas正多边形绘制
suwu150
03-23 2491
在之前文章中,我们使用线段进行绘制过矩形,使用arc,arcTo绘制过圆弧和圆形,但是Canvas还能够进行绘制其他图形,比如三角形、六边形、八边形等.这篇文章主要就是说明如何绘制多边形. JS 效果如下: 上述代码,我们进行绘制了一组根据时间进行变化的生成的多边形,通过方法drawHorizontalAxis绘制横向坐标轴,方法drawVerticalAxis绘制纵向坐标轴,通过方法getPolygonPoints进行计算获取多边形中所有的点,进行为后面连线时连接点作准备工作,通过createPo
canvas鼠标绘制多边形
08-18
使用canvas 鼠标事件绘制多边形，鼠标按下事件，移动事件绘制，双击事件结束绘制。原生js，使用添加事件监听，移除事件监听方法来进行绘制开始和结束。简单小demo
canvas绘制多边形
08-31
本文将深入讲解如何使用`canvas`来绘制多边形，通过示例代码详细解析绘制过程。 首先，我们需要在HTML页面中创建一个`canvas`元素，指定其宽度和高度，以便为绘图提供足够的空间： ```html <canvas id="myCanvas" ...
Canvas多边形绘制
09-24
"Canvas多边形绘制"这个主题涉及到如何使用JavaScript在Canvas上绘制任意角度的正多边形。下面将详细阐述相关知识点。 首先，Canvas API提供了`canvas.getContext('2d')`方法，返回一个2D渲染上下文，这是在Canvas...
canvas里面如何基于随机点绘制一个多边形的方法
09-27
本篇文章主要探讨了如何在Canvas上基于随机点绘制一个多边形。首先，我们需要理解Canvas的基本绘图概念，它是一个二维绘图上下文，允许我们通过JavaScript进行像素级别的操作。 随机点的生成是关键步骤之一。在描述...
键盘是如何使用中断机制的？当打印一串字符到显示屏上时发生了什么？？？
weixin_62518305的博客
07-23 464
当打印完后需要响应一次中断，之后CPU还需要将内存的打印字符再送到打印机的寄存器中，会极大浪费cpu的开销。此时加入一个DMA机制来缓解CPU的的开销，将数据移动的任务交给DMA，只需要在所有打印任务完成之后触发一次中断，最后恢复应用程序1的后续操作即可。
【VUE】封装一个追随鼠标的漂浮组件框架
galaxyJING的博客
07-23 363
红色箭头代表鼠标位置，蓝色区域跟随鼠标出现，鼠标进行其他操作的时候，蓝色区域隐藏。
AHK是让任何软件都支持 Shift + 鼠标滚轮 实现界面水平滚动
键盘爱好者
07-25 395
是一款功能强大的自动化脚本语言和工具，主要用于Windows操作系统。它允许用户通过编写简单的脚本来控制键盘和鼠标，从而实现各种自动化任务，提高工作效率和用户体验。AHK 特别适合于需要重复性操作的场景，如数据录入、文件管理、窗口操作等。
在没有源程序的情况时，如何通过控制鼠标按钮控制电脑exe程序？
星河队长
07-23 314
有时候想控制第三方软件，但是没有源程序，可以控制鼠标键盘自动操作软件达到我们想要的目的。首先建一个功能类包含窗口控制，鼠标控制和输入控制等。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1118
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 162
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 126
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 588
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
KenkoTech的博客
07-24 693
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
爬虫基本原理入门
RHeng的博客
07-25 1039
爬虫（Web Crawler），又称为网络爬虫或网页蜘蛛，是一种按照一定的规则，自动地抓取万维网信息的程序或者脚本。它们可以模拟浏览器行为，遍历网页并抓取网页中的信息，如文本、图片、链接等。接下来，我们会尝试使用Python等编程语言，结合相关库和工具，动手编写自己的爬虫程序，探索更多关于爬虫技术的奥秘。
canvas绘制正交多边形
04-29
4. 使用canvas绘制多边形。 下面是一个示例代码： ```javascript // 定义多边形的边数和边长 const sides = 6; // 六边形 const length = 50; // 边长为50 // 定义多边形的中心点坐标 const centerX = 100; const...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值