鼠標 控制 盒子大小 、位置（八角控制流）

---

看見項目裏用了一個裁圖插件，看一了這麼一個效果，故此模擬一下
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();