瞥见项目里用了一个裁图插件，看一了这么一个结果，故此模仿一下
github L6zt
项目地点：
https://github.com/L6zt/captu…
step 1: npm install && npm run dev
step 2 浏览器接见 http://localhost:7001/
完成结果：

/代码思绪/
1.页面的坐标系是以左上角 为(0,0)点,
2.依鼠标拖动的坐标位置，和 刚开始 坐标位置举行 比较， 算出 差值等于当前 拖动间隔，依托这个间隔掌握 元素的 大小 或 位置。
3.该结果有 9个掌握点，被掌握的元素 + 8 个圆形蓝色掌握点。 都是应用上面的道理，来做。此时能够想到 9 目的 都有 一样的结果，因而我完成了一个 CaptureMouse类， 来削减代码量。
详细代码构造：
mian.js 完成 CaptureMouse；

详细部份代码引见

/*
*
*
*
*
*/
/*
*  事宜列表 mousedown mouseup mousemove touchstart touchmove touchend
*
*/
import {on, off, once} from './utils/dom';
import {checkIsPc} from './utils/browser';
import JcEvent from './common/event';
const global = window;
const doc = global.document;
const body = doc.body;
/*
*  _x _y 初始坐标
* _dx _dy 坐标增量
*
*
*/
class CaptureMouse{
  constructor (elem, options) {
    this.elem = elem;
    this._isPc = this.checkInPc();
    this._defaultOptions = {};
    this.options = Object.assign({}, this._defaultOptions, options || {});
    this._x = 0;
    this._y = 0;
    this._mvX = 0;
    this._mvY = 0;
    this._dx = 0;
    this._dy = 0;
    // 天生事宜 trigger on 事宜流
    this.actionEvent = new JcEvent();
    this.captureMouseStart = this.captureMouseStart.bind(this);
    this.captureMouseMove = this.captureMouseMove.bind(this);
    this.captureMouseEnd = this.captureMouseEnd.bind(this);
    this.findMouseLc = this.findMouseLc.bind(this);
    this.init();
  }
  checkInPc () {
    const {isPc} = checkIsPc();
    return isPc
  }
  // 输出参数转换
  findMouseLc (e) {
      const {pageX, pageY} = e;
      const {_x, _y} = this;
      const dx = pageX - _x;
      const dy = pageY - _y;
      this._dx = dx;
      this._dy = dy;
      this._mvX = pageX;
      this._mvY = pageY;
      const playLoad = {
          dx,
          dy,
          mvX: pageX,
          mvY: pageY,
          x: this._x,
          y: this._y
      };
      return playLoad
  }
    //鼠标按下事宜
  captureMouseStart (e) {
      const {captureMouseMove, captureMouseEnd} = this;
      const elem = body;
      const {pageX, pageY} = e;
      this._x = this._mvX = pageX;
      this._y = this._mvY= pageY;
    e.stopPropagation();
    // 绑定鼠标挪动事宜
    on({
          elem,
          type: 'mousemove',
          fn: captureMouseMove
      });
       // 绑定鼠标左键抬起事宜
      on({
          elem,
          type: 'mouseup',
          fn: captureMouseEnd
      });
  }
  captureMouseMove (e) {
    const playLoad = this.findMouseLc(e);
    e.preventDefault();
    e.stopPropagation();
    this.actionEvent.trigger({
      type: 'state:change',
      playLoad
    })
  }
    //操纵完毕
  captureMouseEnd (e) {
      const {captureMouseMove, captureMouseEnd} = this;
      const playLoad = this.findMouseLc(e);
      const elem = body;
    // e.stopPropagation();
    // 烧毁 绑定的 鼠标挪动事宜
    off({
      elem,
      type: 'mousemove',
      fn: captureMouseMove
    });
    // 烧毁 绑定的 鼠标抬起事宜
      off({
      elem,
      type: 'mouseup',
      fn: captureMouseEnd
    });
      this.actionEvent.trigger({
      type: 'state:end',
      playLoad
    })
  }
   //表面函数捕获 鼠标 事宜运动 完毕
  captureStateEnd(fn) {
    const self = this;
    this.actionEvent.on({
      type: 'state:end',
      fn: fn.bind(self)
    })
  }
  //表面函数 捕获 鼠标 变化信息
  captureStateChange(fn) {
    const self = this;
    this.actionEvent.on({
      type: 'state:change',
      fn: fn.bind(self)
    })
  }
  // 写法有误
  offCaptureStateChange (fn) {
    const self = this;
    this.actionEvent.off({
      type: 'state:change',
      fn: fn.bind(self)
    })
  }
  init () {
    const {_isPc, elem, captureMouseStart} = this;
    if (_isPc) {
      on({
        elem,
        type: 'mousedown',
        fn: captureMouseStart
      })
    } else {
    
    }
  }
  destroy () {
    const {_isPc, captureMouseStart, elem} = this;
    if (_isPc) {
      off({
        elem,
        type: 'mouseup',
        fn: captureMouseStart
      })
    }
  }
};
export default CaptureMouse

// index.js 初始化 全部结果的主文件

import './css/main.scss'
import CaptureMouse from './main';
import {getElement, sgElemCss, createdElem} from './utils/dom';
const global = window;
const doc = global.document;
// 天生掌握点
const insertControlDot = (fartherNone) => {
  const childNodeList = [
    {
      tag: 'span',
      classNames: 'control-content-lc jc-capture-lt'
    }, {
      tag: 'span',
      classNames: 'control-content-lc jc-capture-lm'
    },
    {
      tag: 'span',
      classNames: 'control-content-lc jc-capture-rt'
    }, {
      tag: 'span',
      classNames: 'control-content-lc jc-capture-rm'
    }, {
      tag: 'span',
      classNames: 'control-content-lc jc-capture-lb'
    }, {
      tag: 'span',
      classNames: 'control-content-lc jc-capture-rb'
    }, {
      tag: 'span',
      classNames: 'control-content-lc jc-capture-bm'
    }, {
      tag: 'span',
      classNames: 'control-content-lc jc-capture-tm'
    }
  ];
  const xmlRoot = doc.createDocumentFragment();
  childNodeList.forEach(nodeDesc => {
    xmlRoot.appendChild(createdElem(nodeDesc))
  });
  fartherNone.appendChild(xmlRoot);
};
// 初始化绑定事宜
const init= () => {
  const controlView = getElement('.mouse-handle-view');
  insertControlDot(controlView);
  const rbElem = getElement('.jc-capture-rb');
  const tmElem = getElement('.jc-capture-bm');
  const bmElem = getElement('.jc-capture-tm');
  const lmElem = getElement('.jc-capture-lm');
  const rmElem = getElement('.jc-capture-rm');
  const rtElem = getElement('.jc-capture-rt');
  const ltElem = getElement('.jc-capture-lt');
  const lbElem = getElement('.jc-capture-lb');
  const captureControlView = new CaptureMouse(controlView);
  let left = sgElemCss(controlView, 'left');
  let top = sgElemCss(controlView, 'top');
  let width = sgElemCss(controlView, 'width');
  let height = sgElemCss(controlView, 'height');
  const initCaptureRb = () => {
    const captureRbElem = new CaptureMouse(rbElem);
    captureRbElem.captureStateChange(function (playLoad) {
      const {dx, dy} = playLoad;
      let curWidth = width + dx;
      let curHeight = height + dy;
      if (curWidth < 24) curWidth = 24;
      if (curHeight < 24) curHeight = 24;
      sgElemCss(controlView, {
        width: `${curWidth}px`,
        height: `${curHeight}px`
      });
    });
    captureRbElem.captureStateEnd(function () {
      const {_dx, _dy} = this;
      width = width + _dx;
      height = height + _dy;
      if (width < 24) width = 24;
      if (height < 24) height = 24;
      sgElemCss(controlView, {
        width: `${width}px`,
        height: `${height}px`
      })
    });
  };
  const intCaptureMainTree = () => {
    const captureRbElem = new CaptureMouse(rbElem);
  
    captureControlView.captureStateChange(function (playLoad) {
      const {dx, dy} = playLoad;
      let curLeft = left + dx;
      let curTop = top + dy;
      sgElemCss(controlView, {
        left: `${curLeft}px`,
        top: `${curTop}px`
      })
    });
    captureControlView.captureStateEnd(function (playLoad) {
      const {_dx, _dy} = this;
      left = left + _dx;
      top = top + _dy;
      console.log('end', left, top);
      sgElemCss(controlView, {
        left: `${left}px`,
        top: `${top}px`
      })
    })
  };
  const initCaptureTm = () => {
    const captureTmElem = new CaptureMouse(tmElem);
    captureTmElem.captureStateChange(function (playLoad) {
      const {dx, dy} = playLoad;
      let curHeight = height - dy;
      let curTop = top + dy;
      if (curHeight < 24) curHeight = 24;
      sgElemCss(controlView, {
        height: `${curHeight}px`,
        top: `${curTop}px`
      });
    });
    captureTmElem.captureStateEnd(function () {
      const {_dx, _dy} = this;
      height = height - _dy;
      top = top + _dy;
      if (height < 24) height = 24;
      sgElemCss(controlView, {
        height: `${height}px`,
        top: `${top}px`
      })
    });
  };
  const initCaptureBm = () => {
    const captureBmElem = new CaptureMouse(bmElem);
    captureBmElem.captureStateChange(function (playLoad) {
      const {dx, dy} = playLoad;
      let curHeight = height + dy;
      if (curHeight < 24) curHeight = 24;
      sgElemCss(controlView, {
        height: `${curHeight}px`
      });
    });
    captureBmElem.captureStateEnd(function () {
      const {_dx, _dy} = this;
      height = height + _dy;
      if (width < 24) width = 24;
      if (height < 24) height = 24;
      sgElemCss(controlView, {
        height: `${height}px`
      })
    });
  };
  const initCaptureRm = () => {
    const captureRmElem = new CaptureMouse(rmElem);
    captureRmElem.captureStateChange(function (playLoad) {
      const {dx, dy} = playLoad;
      let curWidth = width + dx;
      if (curWidth < 24) curWidth = 24;
      sgElemCss(controlView, {
        width: `${curWidth}px`
      });
    });
    captureRmElem.captureStateEnd(function () {
      const {_dx, _dy} = this;
      width = width + _dx;
      if (width < 24) width = 24;
      sgElemCss(controlView, {
        width: `${width}px`
      })
    });
  };
  const initCaptureLm = () => {
    const captureLmElem = new CaptureMouse(lmElem);
    captureLmElem.captureStateChange(function (playLoad) {
      const {dx, dy} = playLoad;
      let curWidth = width - dx;
      let curLeft = left + dx;
      if (curWidth < 24) curWidth = 24;
      sgElemCss(controlView, {
        width: `${curWidth}px`,
        left: `${curLeft}px`
      });
    });
    captureLmElem.captureStateEnd(function () {
      const {_dx, _dy} = this;
      width = width - _dx;
      left = left + _dx;
      if (width < 24) width = 24;
      sgElemCss(controlView, {
        width: `${width}px`,
        left: `${left}px`
      })
    });
  };
  const initCaptureRt = () => {
    const captureLmElem = new CaptureMouse(rtElem);
    captureLmElem.captureStateChange(function (playLoad) {
      const {dx, dy} = playLoad;
      let curWidth = width + dx;
      let curHeight = height - dy;
      let curTop = top + dy;
      if (curWidth < 24) curWidth = 24;
      if (curHeight < 24) curHeight = 24;
      sgElemCss(controlView, {
        width: `${curWidth}px`,
        height: `${curHeight}px`,
        top: `${curTop}px`
      });
    });
    captureLmElem.captureStateEnd(function () {
      const {_dx, _dy} = this;
      width = width + _dx;
      height = height - _dy;
      top = top + _dy;
      if (width < 24) width = 24;
      if (height < 24) height = 24;
      sgElemCss(controlView, {
        width: `${width}px`,
        height: `${height}px`,
        top: `${top}px`
      })
    });
  };
  const initCaptureLb = () => {
    const captureLbElem = new CaptureMouse(lbElem);
    captureLbElem.captureStateChange(function (playLoad) {
      const {dx, dy} = playLoad;
      let curWidth = width - dx;
      let curHeight = height + dy;
      if (curWidth < 24) curWidth = 24;
      if (curHeight < 24) curHeight = 24;
      sgElemCss(controlView, {
        width: `${curWidth}px`,
        height: `${curHeight}px`,
      });
    });
    captureLbElem.captureStateEnd(function () {
      const {_dx, _dy} = this;
      width = width - _dx;
      height = height + _dy;
      if (width < 24) width = 24;
      if (height < 24) height = 24;
      sgElemCss(controlView, {
        width: `${width}px`,
        height: `${height}px`,
      })
    });
  };
  const initCaptureLt = () => {
    const captureLtElem = new CaptureMouse(ltElem);
    captureLtElem.captureStateChange(function (playLoad) {
      const {dx, dy} = playLoad;
      let curWidth = width - dx;
      let curHeight = height - dy;
      let curTop = top + dy;
      let curLeft = left + dx;
      if (curWidth < 24) curWidth = 24;
      if (curHeight < 24) curHeight = 24;
      sgElemCss(controlView, {
        width: `${curWidth}px`,
        height: `${curHeight}px`,
        top: `${curTop}px`,
        left: `${curLeft}px`
      });
    });
    captureLtElem.captureStateEnd(function () {
      const {_dx, _dy} = this;
      width = width - _dx;
      height = height - _dy;
      top = top + _dy;
      left = left + _dx;
      if (width < 24) width = 24;
      if (height < 24) height = 24;
      sgElemCss(controlView, {
        width: `${width}px`,
        height: `${height}px`,
        top: `${top}px`,
        left: `${left}px`
      })
    });
  };
  initCaptureRb();
  initCaptureTm();
  initCaptureBm();
  initCaptureRm();
  initCaptureLm();
  initCaptureRt();
  initCaptureLb();
  initCaptureLt();
  intCaptureMainTree();
}
init();