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

資訊專欄INFORMATION COLUMN

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

Caicloud / 2960人閱讀

摘要：此時可以想到目標都有同樣的效果，因此我實現了一個類，來減少代碼量。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/53765.html

相關文章

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

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

    lastSeries 評論0 收藏0

  • CSS的使用方法

    摘要：如內可以包含塊級元素與塊級元素并列內聯元素與內聯元素并列。錯誤的屬性選擇器匹配所有具有屬性的元素，不考慮它的值。一、CSS的四種引入方式1.行內式　　行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用（與鏈接式或者導入式同時控制同一標簽時，行內式優先顯示）。2.嵌入式　　嵌入式是將CSS樣式集中寫在網頁的標簽對的標簽對中。格式如下：　　　　　　　　注意...

    番茄西紅柿 評論0 收藏0

  • 前端基礎入門二（CSS）

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

    Lorry_Lu 評論0 收藏0

  • CSS

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

    番茄西紅柿 評論0 收藏0

  • CSS基礎知識整理

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

    Edison 評論0 收藏0

發表評論

0條評論

Caicloud

男|高級講師

TA的文章

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