使用canvas绘制区域，微调即可

canvas 绘制区域

项目中使用canvas绘制区域的地方用的少，科技类项目，工业类项目用的偏多，大家尝试用用，收获多多，以下内容可以直接拿去用，微调即可

<template>
  <div class="btn">
    <van-button type="primary" @click="clearCanvas" style="z-index: 999">清除</van-button>
    <van-button type="primary" @click="submitCanvas" class="btn-r" style="z-index: 999">确定</van-button>
  </div>
  <div class="drawer">
    <canvas ref="canvas" :width="canvasWidth" :height="canvasHeight"
            @touchstart="handleTouchStart"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted,inject } from 'vue';
const bgImage = ref(null);
bgImage.value = joinBase64Fragment( dataJson);
const $toast = inject('$toast')

const canvas = ref(null);
let ctx = null;
let points = []; // 存储所有触摸点
const canvasWidth = 350; // 根据需要调整宽度
const canvasHeight = 500; // 根据需要调整高度

onMounted(() => {
  const canvasEl = canvas.value;
  console.log('canvas',canvasEl)
  ctx = canvasEl.getContext('2d');
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  // 加载图片到canvas
  const img = new Image();
  img.src = '图片地址'; // 替换为你的图片路径
  img.onload = () => {
    ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
  };

  // 设置画布样式
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';
  ctx.lineJoin = 'round';
  // 清除画布并重置状态
  clearCanvas();
});

// 处理触摸开始事件
const handleTouchStart = (event) => {
  event.preventDefault(); // 阻止默认行为
  const [x, y] = getTouchPosition(event);
  points.push({ x, y });

  // 绘制最新的点
  drawPoint(points);

  // // 如果至少有两个点，绘制线段
  // if (points.length > 1) {
  //   drawLine(points[points.length - 2], points[points.length - 1]);
  // }

  // 如果至少有三个点，绘制闭合区域
  if (points.length >= 2) {
    drawRegion(points);
  }
};

// 获取触摸位置
const getTouchPosition = (event) => {
  const rect = canvas.value.getBoundingClientRect();
  const touch = event.touches[0];
  return [
    touch.clientX - rect.left,
    touch.clientY - rect.top
  ];
};

// 绘制点
const drawPoint = (points) => {
  points.forEach((point) => {
    ctx.beginPath();
    ctx.arc(point.x, point.y, 3, 0, 2 * Math.PI);
    ctx.fillStyle = 'red';
    ctx.closePath();
    ctx.fill();
  });
};

// 绘制线段
const drawLine = (p1, p2) => {
  ctx.beginPath();
  ctx.moveTo(p1.x, p1.y);
  ctx.lineTo(p2.x, p2.y);
  ctx.stroke();
};

// 绘制闭合区域
const drawRegion = (points) => {
  // ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  // 加载图片到canvas

  ctx.strokeStyle = 'red';
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);

  for (let i = 1; i < points.length; i++) {
    ctx.lineTo(points[i].x, points[i].y);
  }

  ctx.fillStyle = 'rgba(94, 159, 255, 0.35)';
  ctx.fill();
  ctx.closePath();
  ctx.stroke();

};

const clearCanvas = () => {
  points = []
  const canvasEl = canvas.value;
  const img = new Image();
  img.src = '图片地址'; // 替换为你的图片路径
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  img.onload = () => {
    ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
  };
};
// 提交画布数据
const submitCanvas = () => {
  if (points.length < 3) return $toast('至少绘制3个点！');
  console.log('提交画布数据:', points);
  // 这里可以添加提交逻辑
};
</script>

<style lang="less" scoped>
.btn{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  .btn-r{
    margin-left: 10px;
  }
}
.drawer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>