鼠标控制盒子大小、位置（八角控制流）-白红宇

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

阅读量：7098 次

发布时间：2019-06-28

本文共 11897 字，大约阅读时间需要 39 分钟。

看见项目里用了一个裁图插件，看一了这么一个效果，故此模拟一下

github L6zt

项目地址：

step 1: npm install && npm run dev

step 2 浏览器访问 :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();

转载地址：http://xyeql.baihongyu.com/

你可能感兴趣的文章