固定框内图片拖动&缩放效果

接上一个文章，因为图片太大，所以加了个图片抓取移动，鼠标滚轮放大的效果
大概效果就是在固定框里面，可以鼠标拖拽这个图片，滚轮缩放

大概用到了这些方法：鼠标按下，鼠标移动，鼠标松起，鼠标移出
前提是都是position: absolute;
template代码：

@mousedown="svgMousedown"
                                @mousewheel="mousewheel"
                                @mouseup="svgMouseup"
                                @mousemove="svgMousemove"
                                @mouseleave="svgMouseup"
                                :style="`width: ${imgInfo.width}px; height: ${imgInfo.height}px; left: ${moveInfo.left}; top: ${moveInfo.top}; transform: scale(${scale}, ${scale})`"

const svgMousemove = (e) => {
    if (moving.value) {
        moveInfo.value.left = +moveInfo.value.left.toString().replace('px', '') + e.pageX - moveInfo.value.start.x + 'px';
        moveInfo.value.top = +moveInfo.value.top.toString().replace('px', '') + e.pageY - moveInfo.value.start.y + 'px';
        moveInfo.value.start.x = e.pageX;
        moveInfo.value.start.y = e.pageY;
    }
};
const svgMousedown = (e: any) => {
    moveInfo.value.start.x = e.pageX;
    moveInfo.value.start.y = e.pageY;
    moving.value = true;
};
const svgMouseup = (e) => {
    moving.value = false;
    // moveInfo.value.start.x = e.pageX;
    // moveInfo.value.start.y = e.pageY;
};

代码在上面，大概的想法就是，获取一个x轴位置和y轴位置，移动了多少就相应加多少，还有鼠标放大缩小效果：

const slider = ref({
    max: 3,
    min: 0.1,
    step: 0.1,
});
const scale = ref(1);
const mousewheel = (e: any) => {
    let newVal = scale.value;
    if (e.deltaY < 0) {
        newVal += slider.value.step;
    } else {
        newVal -= slider.value.step;
    }
    if (newVal >= slider.value.max) {
        newVal = slider.value.max;
    } else if (newVal <= slider.value.min) {
        newVal = slider.value.min;
    }
    scale.value = newVal;
};

贴上去就完了

补充一下，因为图片太大，所以一开始就设置了scale，以下是在onMounted

scale.value = 0.3;
    let sclwidth = (imgInfo.value.width - imgInfo.value.width * 0.3) / 2;
    moveInfo.value.left = '-' + sclwidth + 'px';
    let sclheight = (imgInfo.value.height - imgInfo.value.height * 0.3) / 2;
    moveInfo.value.top = '-' + sclheight + 'px';

稍微居中了下，不然图片找不到。。