有一张根据鼠标滚轮实现放大缩小也可拖拽的图片，如何在这张图片上面根据后端返的四点坐标生成一个矩形标注框，图片是用img标签去展示的，放大缩小功能也已经实现了，如何在它上面生成矩形框

有一张根据鼠标滚轮实现放大缩小也可拖拽的图片，如何在这张图片上面根据后端返的四点坐标生成一个矩形标注框，图片是用img标签去展示的，放大缩小功能也已经实现了，如何在它上面生成矩形框

在 Vue.js 中，可以使用 HTML5 的 canvas 标签来生成矩形标注框。下面是一种基本的实现方法:

1. 为图片容器添加一个 canvas 标签。

2. 在 mounted 钩子函数中，获取 canvas 的 2D 绘图环境。

3. 在后端获取到四点坐标后，计算出矩形的坐标位置。

4. 使用 canvas 绘图环境的 rect() 函数，在 canvas 上绘制矩形。

5. 根据放大缩小倍数来进行缩放.

下面是一个简单的示例，这里没有包括缩放功能：

<template>
  <div>
    <img ref="img" :src="imageUrl"  @load="onImageLoaded" alt="">
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "",
      width: 0,
      height: 0,
      x: 0,
      y: 0,
      width_:0,
      height_:0
    };
  },
  methods: {
    onImageLoaded(event) {
      this.width = event.target.width;
      this.height = event.target.height;
      this.render();
    },
    render() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext("2d");
      canvas.width = this.width;
      canvas.height = this.height;
      ctx.clearRect(0, 0, this.width, this.height);
      ctx.strokeRect(this.x, this.y, this.width_, this.height_);
    }
  },
  created(){
     // some way to get the points
     this.x = point1.x
     this.y = point1.y
     this.width_ = point2.x - point1.x
     this.height_ = point3.y - point1.y
  },
  mounted() {
    this.render();
  }
};
</script>

你好，我刚好做过类似的需求，你看你用这个插件能不能满足你的需求:

https://github.com/kirillmurashov/vue-drag-resize

挺好用的，使用也简单