需求：前端接收后端傳過來圖片渲染，并且可以直接在渲染的地方，以鼠標(biāo)滾輪為中心放大圖片，還可以隨意拖動(dòng)圖片

調(diào)研：目前有很多現(xiàn)成的插件都是，點(diǎn)擊圖片，然后彈出遮罩層，在遮罩層里面操作，由于不符合需求，就只能自己寫了。

開始使用了css3 的scale ,但是發(fā)現(xiàn)自由拖動(dòng)有bug ,在放大后會(huì)導(dǎo)致左側(cè)和上方的圖片拖動(dòng)不下來，類似于溢出隱藏（此出具體不做具體說明）

實(shí)現(xiàn)原理：

1：在img 外層套一個(gè)div ,此div 寬高固定，用來放 放大的img，然后產(chǎn)生滾動(dòng)條。

2：計(jì)算鼠標(biāo)相對(duì)于圖片的位置（注意，此處有坑，不能直接用offsetX,offsetY,因?yàn)檫B續(xù)滾動(dòng)，會(huì)導(dǎo)致 offsetX,offsetY 發(fā)生變化，導(dǎo)致計(jì)算出錯(cuò)）

3：放大縮小原理就是找到鼠標(biāo)相對(duì)于圖片的x ,y 軸的距離然后乘以倍數(shù)，動(dòng)態(tài)設(shè)置圖片的寬高，div 的scrollerLeft ,scrollerTop，使圖片相對(duì)于div 的位置不變，從而實(shí)現(xiàn)效果。

4:鼠標(biāo)在圖片上隨意拖動(dòng)圖片，原來就是動(dòng)態(tài)的計(jì)算鼠標(biāo)移動(dòng)的x,y 軸的距離，然后動(dòng)態(tài)的設(shè)置滾動(dòng)條的位置

一：拖動(dòng)組件：文章來源地址http://www.zghlxwxcb.cn/news/detail-498488.html

const dragscroll = (el) => {
    el.onmousedown = ev => {
        const disX = ev.clientX;
        const disY = ev.clientY; // 需要上下移動(dòng)可以加
        const originalScrollLeft = el.scrollLeft;
        const originalScrollTop = el.scrollTop; // 需要上下移動(dòng)可以加
        const originalScrollBehavior = el.style['scroll-behavior'];
        const originalPointerEvents = el.style['pointer-events'];
        el.style['scroll-behavior'] = 'auto';
        // 鼠標(biāo)移動(dòng)事件是監(jiān)聽的整個(gè)document，這樣可以使鼠標(biāo)能夠在元素外部移動(dòng)的時(shí)候也能實(shí)現(xiàn)拖動(dòng)
        document.onmousemove = dv => {
            dv.preventDefault();
            const distanceX = dv.clientX - disX;
       

到了這里，關(guān)于vue 實(shí)現(xiàn)圖片以鼠標(biāo)為中心放大，并可以隨意在div內(nèi)拖動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！