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

最新推荐文章于 2024-05-22 15:51:54 发布
最新推荐文章于 2024-05-22 15:51:54 发布
阅读量87 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000018341896
版权

看见项目里用了一个裁图插件，看一了这么一个效果，故此模拟一下
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();
weixin_34352449
关注
div盒子八角拖拽以及相关实现
冷故事的博客
03-30 571
之前一直没有系统的使用过js封装的拖拽代码，所以这次经过自己的研究，总算是封装了一个还算可以的拖拽工具吧，话不多说，上图 盒子的八个角可以按照各自对应的方向进行拖拽，盒子灰色部分拖拽整体，多用于编辑相关组件的封装使用，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
【八方位云台控制器】
qq_45433503的博客
04-15 2994
css绘制八方位云台控制器实现效果图代码
以鼠标中心放大或缩小目标盒子（图片），盒子（图片）跟随鼠标移动，原理以及代码，原生js完成
weixin_53399156的博客
12-30 1894
核心原理就是推算出放大或者缩小后，鼠标位置相对于原本位置的偏移量
原生javascript实现上下左右中间八个点控制元素大小、旋转角度、拖拽位置功能
CodingNoob
08-14 2612
最近在接触一个简单的图形编辑器，要求是要实现web页面加载图标元素并可以通过上下左右中间八个点鼠标控制元素大小。拖拽功能比较简单，一般都比较容易实现，主要是旋转和八个点控制元素的大小，旋转是相对难理解一点，需要到一些数学问题，关于坐标系的知识。 整个demo源码下载地址：点击下载源码 通过 Math.atan可以计算出反正切的值，从而推算出鼠标移动到哪个象限的时候的角度。四个点的拖拉也这...
mousemove()使用方法详解
热门推荐
cg20的专栏
09-15 2万+
mouse鼠标，move移动，合起来就是鼠标移动。 因此mousemove就是当鼠标在元素上移动时，将会触发此事件。 mousemove实例1 $(document).ready(function(){ $(document).mousemove(function(e){ $("span").text("X坐标："+e.pageX + ",
使用v-drag实现div盒子拖拽放大缩小
????鱼干～
03-02 1921
使用v-drag实现div盒子拖拽放大缩小
鼠标单击 会出现八角调整大小的矩形框.zip
03-19
在这个上下文中，用户可以通过GUI中的鼠标操作来控制对象的大小和位置。 4. **源代码文件**：在提供的文件列表中，我们看到一些C++源代码文件，如`BmpShow.cpp`, `TestDlg.cpp`, `RectTrackerEx.cpp`等。这些文件...
八角星
02-14
标题中的“八角星”可能是指一种特定的编程或算法问题，与八边形的星形图案有关。在计算机图形学中，八角星可以通过使用循环和条件语句来绘制。由于标签是“Python”，我们可以推测这是一个使用Python编程语言来实现...
DIV手工打造云台控制组件，适用场景广泛。八方向云台控制，近焦远焦控制，放大缩小控制html5 CSS.zip
10-19
此外，描述中还提到了“近焦远焦控制”和“放大缩小控制”，这意味着这个组件还能调节摄像头的焦距，以适应不同的观察需求。 在Java编程领域，这样的组件可能被用作一个客户端应用的一部分，或者作为Web服务的一...
行业文档-设计装置-八角毛笔.zip
08-22
4. 功能特点：八角毛笔的独特之处可能在于它的多面形状如何改善控制力，或者它在不同书法风格或绘画技巧中的表现。 5. 应用场景：文档可能会列举适合使用八角毛笔的不同场合，如教学、创作、艺术展览等。 6. 维护...
flex实现鼠标滚动放大缩小（以鼠标的位置为中心放大缩小）
05-06
flex实现鼠标滚动放大缩小（以鼠标的位置为中心放大缩小）源码奉上
实现鼠标长按某一区域可上下改变盒子高度大小
最新发布
weixin_50236973的博客
05-22 98
实现鼠标长按某一区域可上下改变盒子高度大小
CSS学习笔记（三）
wykkk1的博客
01-15 327
一、CSS浮动 1.1 传统网页布局的三种方式 网页布局的本质：用CSS来摆放盒子，把盒子摆放到相应位置。 CSS提供了三种传统布局方式（简单说，就是盒子如何进行排列顺序）： 普通流（标准流） 浮动 定位 1.2 标准流（普通流/文档流） 所谓的标准流，就是标签按照规定好默认方式排列。 块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。 .
vue项目，自定义指令实现鼠标拖拽更改窗口大小
sinat_42684420的博客
02-23 1141
vue项目，自定义指令实现鼠标拖拽更改窗口大小vue自定义指令 vue自定义指令 dom元素部分 <template> <div class="dragModalWrap" :style="{ width: width + 'px',height: height + 'px', }"> <div class="tuolaBtn" v-drag="{ set: changeWH }" :style="{top:tuoTop +'px',left:tuoLeft + 'px'
前端页面实现拖拽调整div盒子宽度
weixin_46028831的博客
04-11 3940
js实现拖拽调整div盒子宽度，拖拉修改宽度div 通过监听鼠标按下，移动，事件来计算 移动的宽度，动态给盒子设置宽度，即可实现拖拽调整div盒子的宽度 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor
浏览器页面中实现动态调整盒子大小
m0_50540239的博客
12-28 1338
像windows的窗口一样，在页面中调整盒子大小
vue实现点击地图放大缩小
Xinacridine的博客
12-08 1472
<template> <div class="operating-btn"> <div class="add-box"> <img src="../../public/static/img/add.png" alt="" @click="toBChange" /> </div> <div class="sub-box"> <img src="../../publi
turtle绘制八角星
05-26
可以使用turtle库中的函数来绘制八角星，代码如下： ```python import turtle # 创建画布和画笔 canvas = turtle.Screen() canvas.setup(400, 400) pen = turtle.Turtle() # 设置画笔的颜色和粗细 pen.color('red...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值