VUE3 实现前台图片标注添加矩形框、图片放大、缩小、鼠标滚轮缩放

VUE3 实现前台图片标注
功能包括：
鼠标左键拖动添加矩形框标记区域，鼠标点击已绘制的矩形； 选中矩形，并绘制不同选中效果； 鼠标在已绘制的矩形中按住左键拖动，选中并移动矩形；选中矩形后鼠标在选中矩形四个角按住拖动，可缩放矩形；选中矩形后点击键盘删除按键，可删除矩形；获取矩形框位置坐标大小；图片缩放功能、鼠标滚轮缩放

效果如图：

<template>
    <div id="content" >
        <div id="imgContent" @mousewheel="rollImg()">
            <img id="bigImg" src="../assets/goManage/testing.png" />
            <canvas id="canvas" ref="markCanvasRef"></canvas>
        </div>
    </div>

    <el-button type="primary"   style="margin: 20px;" @click="saveData">保存数据</el-button>
    <el-button type="primary"   style="margin: 20px;" @click="scaleLarge">放大</el-button>
    <el-button type="primary"   style="margin: 20px;" @click="scaleSmall">缩小</el-button>
</template>
<script lang="ts" setup>
    import {
   
   draw} from "../utils/draw"; // 矩形绘制方法
    import {
   
   ref,reactive,onMounted,nextTick} from 'vue'

    onMounted(()=>{
   
   
        initCanvas(); // 画布初始化
    })

    // 标记内容数组
    const  markList = ref([
            // {
   
    x: 151, y: 384, w: 320, h: 86}
    ])
    const markCanvasRef = ref(null);
    const bigImgRef = ref(null);
    //画布初始化
    const initCanvas = ()=> {
   
   
        setTimeout(()=>{
   
   
            nextTick(() => {
   
   
                // 初始化canvas宽高
                let cav = markCanvasRef.value;
                console.log(document.getElementById('imgContent').clientHeight);
                cav.width = document.getElementById('imgContent').offsetWidth;
                cav.height = document.getElementById('imgContent').offsetHeight;
                console.log(cav);
                let ctx = cav.getContext('2d');
                ctx.strokeStyle = 'blue';
                cav.style.cursor = 'crosshair';

                // 计算使用变量
                let list = markList.value; // 画框数据集合, 用于服务端返回的数据显示和绘制的矩形保存
                // // 若服务端保存的为百分比则此处需计算实际座标, 直接使用实际座标可省略
                // list.forEach(function (value, index, array) {
   
   
                //     let newValue = {
   
   
                //         x: value.x * cav.width,
                //         y: value.y * cav.height,
                //         w: value.w * cav.width,
                //         h: value.h * cav.height,
                //     }
                //     list.splice(index, 1, newValue)
                // })

                // 若list长度不为0, 则显示已标记框
                if (list.length !== 0) {
   
   
                    list.forEach(function (value, index, array) {
   
   
                        // 遍历绘制所有标记框
                        ctx.rect(value.x, value.y, value.w, value.h);
                        ctx.stroke();
                    });
                }

                // 调用封装的绘制方法
                draw(cav, list);
            })
        },1000)

    }
    const saveData =()=>{
   
   
        console.log("矩形数据",markList.value);
    }

    //放大（TODO：未实现放大后再画矩形鼠标位置发生变化）
    const scaleLarge = ()=>{
   
   
        var zoom = parseInt(document.getElementById('bigImg').style.zoom) || 100;
        zoom += 10;
        document.getElementById('bigImg').style.zoom = zoom + '%';
    }

    //缩小（TODO：未实现缩小后再画矩形鼠标位置发生变化）
    const scaleSmall = ()=>{
   
   
        var zoom = parseInt(document.getElementById('bigImg').style.zoom) || 100;
        zoom -= 10;
        document.getElementById('bigImg').style.zoom = zoom + '%';
    }

    //滚轮缩放（TODO：未实现缩放后再画矩形鼠标位置发生变化）
    const rollImg = ()=>{
   
   
        /* 获取当前页面的缩放比
           若未设置zoom缩放比，则为默认100%，即1，原图大小
       */
        console.log(document.getElementById