国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

鼠標(biāo) 控制 盒子大小 、位置（八角控制流）

lastSeries / 1104人閱讀

摘要：此時(shí)可以想到目標(biāo)都有同樣的效果，因此我實(shí)現(xiàn)了一個(gè)類，來減少代碼量。

看見項(xiàng)目里用了一個(gè)裁圖插件，看一了這么一個(gè)效果，故此模擬一下
github L6zt
項(xiàng)目地址：
https://github.com/L6zt/captu...
step 1: npm install && npm run dev
step 2 瀏覽器訪問 http://localhost:7001/
實(shí)現(xiàn)效果：

/代碼思路/
1.頁面的坐標(biāo)系是以左上角 為(0,0)點(diǎn),
2.依鼠標(biāo)拖動的坐標(biāo)位置，和 剛開始 坐標(biāo)位置進(jìn)行 比較， 算出 差值即是當(dāng)前 拖動距離，依靠這個(gè)距離控制 元素的 大小 或 位置。
3.該效果有 9個(gè)控制點(diǎn)，被控制的元素 + 8 個(gè)圓形藍(lán)色控制點(diǎn)。 都是利用上面的原理，來做。此時(shí)可以想到 9 目標(biāo) 都有 同樣的效果，因此我實(shí)現(xiàn)了一個(gè) CaptureMouse類， 來減少代碼量。
具體代碼結(jié)構(gòu)：
mian.js 實(shí)現(xiàn) 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 初始坐標(biāo)
* _dx _dy 坐標(biāo)增量
*
*
*/
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
  }
  // 輸出參數(shù)轉(zhuǎn)換
  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
  }
    //鼠標(biāo)按下事件
  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();
    // 綁定鼠標(biāo)移動事件
    on({
          elem,
          type: "mousemove",
          fn: captureMouseMove
      });
       // 綁定鼠標(biāo)左鍵抬起事件
      on({
          elem,
          type: "mouseup",
          fn: captureMouseEnd
      });
  }
  captureMouseMove (e) {
    const playLoad = this.findMouseLc(e);
    e.preventDefault();
    e.stopPropagation();
    this.actionEvent.trigger({
      type: "state:change",
      playLoad
    })
  }
    //操作結(jié)束
  captureMouseEnd (e) {
      const {captureMouseMove, captureMouseEnd} = this;
      const playLoad = this.findMouseLc(e);
      const elem = body;
    // e.stopPropagation();
    // 銷毀 綁定的 鼠標(biāo)移動事件
    off({
      elem,
      type: "mousemove",
      fn: captureMouseMove
    });
    // 銷毀 綁定的 鼠標(biāo)抬起事件
      off({
      elem,
      type: "mouseup",
      fn: captureMouseEnd
    });
      this.actionEvent.trigger({
      type: "state:end",
      playLoad
    })
  }
   //外面函數(shù)捕捉 鼠標(biāo) 事件活動 結(jié)束
  captureStateEnd(fn) {
    const self = this;
    this.actionEvent.on({
      type: "state:end",
      fn: fn.bind(self)
    })
  }
  //外面函數(shù) 捕捉 鼠標(biāo) 變化信息
  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 初始化 整個(gè)效果的主文件

import "./css/main.scss"
import CaptureMouse from "./main";
import {getElement, sgElemCss, createdElem} from "./utils/dom";
const global = window;
const doc = global.document;
// 生成控制點(diǎn)
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();

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102233.html

相關(guān)文章

  • 鼠標(biāo) 控制 盒子大小 、位置（八角控制流）

    摘要：此時(shí)可以想到目標(biāo)都有同樣的效果，因此我實(shí)現(xiàn)了一個(gè)類，來減少代碼量。 看見項(xiàng)目里用了一個(gè)裁圖插件，看一了這么一個(gè)效果，故此模擬一下github L6zt項(xiàng)目地址：https://github.com/L6zt/captu...step 1: npm install && npm run devstep 2 瀏覽器訪問 http://localhost:7001/實(shí)現(xiàn)效果：showImg...

    Caicloud 評論0 收藏0

  • CSS的使用方法

    摘要：如內(nèi)可以包含塊級元素與塊級元素并列內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。錯(cuò)誤的屬性選擇器匹配所有具有屬性的元素，不考慮它的值。一、CSS的四種引入方式1.行內(nèi)式　　行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢，不推薦使用（與鏈接式或者導(dǎo)入式同時(shí)控制同一標(biāo)簽時(shí)，行內(nèi)式優(yōu)先顯示）。2.嵌入式　　嵌入式是將CSS樣式集中寫在網(wǎng)頁的標(biāo)簽對的標(biāo)簽對中。格式如下：　　　　　　　　注意...

    番茄西紅柿 評論0 收藏0

  • 前端基礎(chǔ)入門二（CSS）

    摘要：輸入的時(shí)候少按一個(gè)鍵瀏覽器兼容問題比如使用的選擇器命名，在是無效的能良好區(qū)分變量命名變量命名是用不要純數(shù)字中文等命名，盡量使用英文字母來表示。選擇器和類選擇器最大的不同在于使用次數(shù)上。當(dāng)需要設(shè)置英文字體時(shí)，英文字體名必須位于中文字體名之前。 回顧上一節(jié)HTML 思維導(dǎo)圖 showImg(https://segmentfault.com/img/bVbno3O?w=1378&h=1178...

    Lorry_Lu 評論0 收藏0

  • CSS

    摘要：如內(nèi)可以包含塊級元素與塊級元素并列內(nèi)聯(lián)元素與內(nèi)聯(lián)元素并列。相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。另外，對象脫離正常文檔流，使用，，，等屬性進(jìn)行絕對定位。1、CSS概述CSS是 Coscoding Style Sheets 的簡稱，中文稱為層疊樣式表，用來控制網(wǎng)頁數(shù)據(jù)的表現(xiàn)，可以使網(wǎng)頁的表現(xiàn)與數(shù)據(jù)內(nèi)容分離。2、CSS的四種引入方式2.1 行內(nèi)式 --> 行...

    番茄西紅柿 評論0 收藏0

  • CSS基礎(chǔ)知識整理

    摘要：語法基礎(chǔ)語法規(guī)則由兩個(gè)主要部分構(gòu)成選擇器以及一條或多條聲明。語法名屬性屬性值屬性屬性值屬性屬性值選擇器選擇器用于描述一組元素的樣式，也叫做類選擇器。后代選則器又稱為包含選擇器，以空格分隔，子元素選擇器只能選擇作為某元素子元素的元素。 1 什么是CSS？ CSS通常稱為CSS樣式表或?qū)盈B樣式表（級聯(lián)樣式表），主要用于設(shè)置HTML頁面中的文本內(nèi)容（字體、大小、對齊方式等）、圖片的外形（寬高...

    Edison 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<