vue 实现图片以鼠标为中心放大，并可以随意在div内拖动-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 实现图片以鼠标为中心放大，并可以随意在div内拖动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求：前端接收后端传过来图片渲染，并且可以直接在渲染的地方，以鼠标滚轮为中心放大图片，还可以随意拖动图片

调研：目前有很多现成的插件都是，点击图片，然后弹出遮罩层，在遮罩层里面操作，由于不符合需求，就只能自己写了。

开始使用了css3 的scale ,但是发现自由拖动有bug ,在放大后会导致左侧和上方的图片拖动不下来，类似于溢出隐藏（此出具体不做具体说明）

实现原理：

1：在img 外层套一个div ,此div 宽高固定，用来放放大的img，然后产生滚动条。

2：计算鼠标相对于图片的位置（注意，此处有坑，不能直接用offsetX,offsetY,因为连续滚动，会导致 offsetX,offsetY 发生变化，导致计算出错）

3：放大缩小原理就是找到鼠标相对于图片的x ,y 轴的距离然后乘以倍数，动态设置图片的宽高，div 的scrollerLeft ,scrollerTop，使图片相对于div 的位置不变，从而实现效果。

4:鼠标在图片上随意拖动图片，原来就是动态的计算鼠标移动的x,y 轴的距离，然后动态的设置滚动条的位置

一：拖动组件：文章来源地址https://www.toymoban.com/news/detail-498488.html

const dragscroll = (el) => {
    el.onmousedown = ev => {
        const disX = ev.clientX;
        const disY = ev.clientY; // 需要上下移动可以加
        const originalScrollLeft = el.scrollLeft;
        const originalScrollTop = el.scrollTop; // 需要上下移动可以加
        const originalScrollBehavior = el.style['scroll-behavior'];
        const originalPointerEvents = el.style['pointer-events'];
        el.style['scroll-behavior'] = 'auto';
        // 鼠标移动事件是监听的整个document，这样可以使鼠标能够在元素外部移动的时候也能实现拖动
        document.onmousemove = dv => {
            dv.preventDefault();
            const distanceX = dv.clientX - disX;

到了这里，关于vue 实现图片以鼠标为中心放大，并可以随意在div内拖动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！