Vue3图片打点自定义标记颜色形状(完整教程可直接复制项目)

最新推荐文章于 2024-11-01 10:40:14 发布

我不是长安

最新推荐文章于 2024-11-01 10:40:14 发布

阅读量2.7k

点赞数 1

分类专栏： vue 原创 vue3 文章标签： vue.js elementui javascript vue

本文链接：https://blog.csdn.net/IAmNotChangAn/article/details/126504884

版权

本文提供一个Vue3项目中的实战教程，详细讲解如何在图片上标记点位、添加文字以及绘制自定义形状。通过定义图片区域，渲染数组到页面，并实现点击固定点位的功能。

摘要由CSDN通过智能技术生成

在项目中我们总能遇到一些奇怪的需求。比如如标题描述一样在图片标记点位、文字、和自定义的形状？

1.先定义一块图片的区域~

    <div class="mapContainer" id="mapContainer" ref="mapContainer">
      <img
        id="myBiaoZhu"
        src="bg.jpg"
        alt=""
        style="height: 400px; width: 600px"
      />
      <el-button type="text" @click="startBiaoZhu">开始标注</el-button>
      <el-button type="text" @click="endBiaoZhu">标注完成</el-button>
    </div>

如图：

首先定义我们展示到页面的对象

const state = reactive({
  banMa: [
    {
      id: 1,
      x: 240,
      y: 302,
    },
  ], //斑马线的数组
  canBiaoZhu: false, //是否可以进行标注
  pointColor: "