js实现定点缩放元素

这里的关键一点在于，比如，当元素宽度放大0.1倍时，如何计算元素的left值来保证鼠标相对元素位置不变？

代码：// 为了方便用了jquery

export default function(el) {

  function zoom(e) {
    e.preventDefault();
    // 获取鼠标所在位置    
    let { clientX, clientY } = e;
    // 获取元素距离屏幕边界左边和上边距离
    let offsetX = el.offset().left;
    let offsetY = el.offset().top;
    // 获取鼠标距离当前元素边界左边和上边距离
    let mouseToBorderX = clientX - offsetX;
    let mouseToBorderY = clientY - offsetY;

    // 获取元素width,height,left,top;注意元素为relative或absolute定位
    let width = el.width();
    let height = el.height();
    let left = parseFloat(el.css('left'));
    let top = parseFloat(el.css('top'));
    // 设置一下缩放幅度 ,值越大缩放的越快
    let ratio = e.originalEvent.deltaY < 0 ? 0.1 : -0.1;
    // 设置缩放后的宽高
    width = width * (1 + ratio);
    height = height * (1 + ratio);

    // 这里是关键一步
    // 可以想象,当元素宽度增加0.1倍,如果此时元素left值不变化，那么元素是会向右变大的，那么鼠标相 
    // 对元素左上角的距离与最开始的距离相比就变了，变化量为mouseToBorderX*ratio，那么让元素left 
    //  减去变化量即可保证鼠标相对元素不动
    left = left - mouseToBorderX * ratio;
    top = top - mouseToBorderY * ratio;
    
    el.css({
      width: width + 'px',
      height: height + 'px',
      left: left + 'px',
      top: top + 'px',
    })
  }
    // el 为你要绑定缩放的元素
  el.bind('mousewheel',zoom)
}