原生JS缩放控件

zoomUtil.js

export default class ZoomUtil {
    constructor(hottarget,target){
        this.hottarget = hottarget
        this.target = target
        this.scale = 1
        this.wheelfunc = (event)=>{
            this.onwheel(event)
        }
        this.hottarget.addEventListener('wheel', this.wheelfunc)
        this.zoomCentre = null
        this.targetWidth = this.target.offsetWidth
        this.targetHeight = this.target.offsetHeight
        this.zoomRatio = 0.05//缩放率
    }

    onwheel(event){
        event.preventDefault();
        event = event || window.event;
        if(Math.abs(event.deltaY) === 0){
            return
        }
        const zr = -Math.abs(event.deltaY)/event.deltaY*this.zoomRatio
        let sc = this.scale
        this.scale = this.scale+this.scale*zr;
        this.scale = Math.min(Math.max(.8, this.scale), 4)
        if(sc === this.scale)return
        let tw = this.target.offsetWidth
        let th = this.target.offsetHeight
        let centre = {x:this.target.offsetLeft+tw/2,y:this.target.offsetTop+th/2}
        let mx = event.clientX 
        let my = event.clientY
        const p  = this.target.parentNode 
        if(this.zoomCentre == 'mouse'){
            const x = mx - p.offsetLeft
            const y = my - p.offsetTop
            centre = {x,y}
        }else if(this.zoomCentre == 'parent'){
            const x = p.offsetWidth/2
            const y = p.offsetHeight/2
            centre = {x,y}
        }
        const sc2 = this.scale/sc

        const lx = centre.x+(this.target.offsetLeft-centre.x)*sc2
        const ly = centre.y+(this.target.offsetTop-centre.y)*sc2

        const lw = tw*sc2
        const lh = th*sc2

        this.target.style.left = lx+'px'
        this.target.style.top = ly+'px'

        this.target.style.width = lw+'px'
        this.target.style.height = lh+'px'
    }
}

使用：

const zoomUtil = new ZoomUtil(parentContainer,child)
 zoomUtil.zoomCentre = 'parent'