• 【JS】原生js实现矩形框的绘制/拖动/缩放

    【林大大哟年度推荐功能】

    已在多项目中使用，最小改动实现完全通用！

    【线上预览地址】lveRectangleJs

    林大大将矩形框单独封装成类了噢~仓库地址为LveRectangleJs

     1、功能描述

    1.1、矩形框的绘制

    1.2、矩形框的缩放

    1.3、矩形框的拖动

    1.4、矩形框的键盘移动方向

    1.5、矩形框的截图及导出图片

    编辑绘制核心逻辑：通过js监听mouse事件来实现矩形框的绘制，再通过区分点击的是边角还是其他位置来实现矩形框的缩放和拖动，并且在拖动和缩放时，都做了边界限制，当缩放或拖动 到边界时，就不能继续拉缩放拖动了。当然在相关开发时，还是需要你对一些常规的offsetLeft,offsetX等的dom属性了解哟~

    截图核心逻辑：获取到矩形框相对坐标及宽高，通过canvas的drawImage来绘制截图，然后将截图导出成图片

    2、效果图展示

    3、矩形框原理讲解

    3.0、矩形类构造器讲解

    第一参数为 最外层大盒子dom

    第二参数为 矩形框dom

    矩形框，其实矩形框并不是凭空绘制出来的，只是先将其宽高置为0，并且定位到负无限处，所以在页面上看不到，在绘制时，通过控制矩形框的定位及宽高来进行展示，这也是我进行绘制/拖动/缩放的核心思想

    第三参数为 自定义配置，如果没有配置，将使用默认设置，设置了的话，以用户设置为主

    1.   constructor(target = '', childTarget = '', options = {}) {
    2.     if (!target || typeof target !== 'string') {
    3.       throw new Error('请传入正确的参数')
    4.     }
    5.     const {
    6.       rect,
    7.       dot,
    8.       events
    9.     } = clone(true, defaultOptions, options) // clone为深拷贝的方法，在仓库utils里有
    10.     this.rect = rect
    11.     this.dot = dot
    12.     this.events = events
    13.     this.target = document.querySelector(target) // 绑定父级dom
    14.     this.childTarget = document.querySelector(childTarget) // 绑定矩形框dom
    15.     this.img = {
    16.       target: null,
    17.       width: 0,
    18.       height: 0,
    19.       scale: 1
    20.     };
    21.     this.origin = this.target.getBoundingClientRect()
    22.     this.supportEvent = ['draging', 'dragend']
    23.     this.customEvent = new Event() // 事件类也在仓库里有
    24.     this.defaultEvent() // 默认事件配置，这些都在仓库，可以自行观看
    25.   }

    3.1、矩形类初始化

    实例化写法： 

    1. const rect = new Rectangle('#out-box', '#rect', {
    2.   rect: {
    3.     border: {
    4.       width: 1
    5.     }
    6.   },
    7.   dot: {
    8.     width: 4
    9.   },
    10.   events: {
    11.     contextmenu: {
    12.       disabled: true
    13.     },
    14.     draggable: {
    15.       disabled: false
    16.     },
    17.     clip: {
    18.       disabled: false
    19.     }
    20.   }
    21. })
    22.  
    24. /** 默认配置 */
    25. const defaultOptions = {
    26.   /** 矩形框配置 */
    27.   rect: {
    28.     left: -9999, // 矩形框左上角x坐标
    29.     top: 0, // 矩形框左上角y坐标
    30.     width: 0, // 矩形框宽度
    31.     height: 0, // 矩形框高度
    32.     border: { // 矩形框的边框样式
    33.       color: '#fa9120',
    34.       width: 1
    35.     },
    36.     style: null
    37.   },
    38.   /** 矩形框周围小球配置 */
    39.   dot: {
    40.     width: 6, // 小球宽度
    41.     dotNum: 8 // 小球数量，4|8
    42.   },
    43.   /** 相关事件 */
    44.   events: {
    45.     contextmenu: { // 右键事件
    46.       disabled: false // 是否禁用
    47.     },
    48.     draggable: { // 拖动事件 
    49.       disabled: false // 是否禁用
    50.     },
    51.     clip: { // 截图操作(7个快捷键功能)
    52.       /**
    53.        * 开始截图：alt + w
    54.        * 保存当前截图：ctrl + s
    55.        * 关闭当前截图：ctrl + q
    56.        * 键盘向左方向键操作
    57.        * 键盘向上方向键操作
    58.        * 键盘向右方向键操作
    59.        * 键盘向下方向键操作
    60.        */
    61.       disabled: false // 是否禁用
    62.     }
    63.   }
    64. }

    3.2、绘制方法及监听事件

    1. /** 清屏 */
    2. rect.clearPaint()
    3.  
    4. /** 开始绘制 */
    5. rect.startPaint()
    6.  
    7. /** 监听矩形框正在拖动/缩放/绘制 */
    8. rect.on('draging', e => {
    9.   console.log('draging', e);
    10. })
    11.  
    12. /** 监听矩形框操作完成 */
    13. rect.on('dragend', e => {
    14.   console.log('dragend', e);
    15. })

    3.3、判断当前是拖动还是缩放讲解

    当点击矩形框边角附近时，你肯定是想要缩放矩形框，当点击其他位置时，你肯定想要拖动矩形框。

    在矩形框内部点击，就可以使用offset相关属性，你所点击的位置，就是offsetX,offsetY,这俩属性是相对于当前dom内部的点击位置的，而offsetWidth,offsetHeight是当前dom的宽高，difference是模糊距离，有时候你得设置一个点击的范围，只要点击点在那个范围内，就是缩放，反之亦然。当然这个范围你可以自己设置，我设置的是 矩形框border宽度的2倍，因为根据实践来看，这个范围是恰到好处的。

    当点击的对象不是矩形框时，则代表当前的要对矩形框进行缩放，否则则是要对矩形框进行拖拽

    1.     let flag = 0 // 点击的是除边角以外的其他部分 代表着拖动操作
    2.     let left = e.offsetX
    3.     let top = e.offsetY
    4.     let width = e.target.offsetWidth
    5.     let height = e.target.offsetHeight
    6.     // 点击的是dot，非rect， 代表着拉伸操作
    7.     if (e.target !== rect) {
    8.       flag = 1
    9.       const parent = e.target.offsetParent.getBoundingClientRect()
    10.       const child = e.target.getBoundingClientRect()
    11.       left = child.x - parent.x
    12.       top = child.y - parent.y
    13.       width = e.target.offsetParent.offsetWidth
    14.       height = e.target.offsetParent.offsetHeight
    15.     }
    16.     const difference = this.get('dot.width') * 2; // 点击dot周边 get('dot.width') * 2 + px范围为拉伸，其他为拖动

     当然，最好的方式就是有八个缩放点，除了这八个缩放点，其余位置都是被拖拽的地方，下面方法就是判断是哪个拉伸点的（这个也蛮好理解，不信你打开你的截图软件，是不是有8个能被缩放的小方块），除去这八个点以外，其他都是返回[-1, -1],以来标识拖动

    1.     const resultRange = {
    2.       x: 0,
    3.       y: 0
    4.     }
    5.     resultRange.x = 0 // 0 => left, 1 => middle, 2 => right, -1 => 点击的位置不能被拖动
    6.     resultRange.y = 0 // 0 => top, 1 => middle, 2 => bottom, -1 => 点击的位置不能被拖动
    7.     if (left < difference) { // 点击的位置为矩形左侧
    8.       resultRange.x = 0
    9.     } else if (left > (width / 2 - difference) && left < (width / 2 + difference)) { // 点击的位置为矩形中间 width/2 - this.get('dot.width') ~ width/2 + this.get('dot.width')
    10.       resultRange.x = 1
    11.     } else if (left < width && left > (width - difference)){ // 点击的位置为矩形右侧 width - 6px ~ width
    12.       resultRange.x = 2
    13.     } else {
    14.       resultRange.x = -1
    15.     }
    16.     if (top < difference) { // 点击的位置为矩形上侧
    17.       resultRange.y = 0
    18.     } else if (top > (height / 2 - difference) && top < (height / 2 + difference)) { // 点击的位置为矩形中间 height/2 - this.get('dot.width') ~ height/2 + this.get('dot.width')
    19.       resultRange.y = 1
    20.     } else if (top < height && top > (height - difference)){ // 点击的位置为矩形下侧 height - this.get('dot.width') ~ height
    21.       resultRange.y = 2
    22.     } else {
    23.       resultRange.y = -1
    24.     }
    25.     if (resultRange.x === -1 || resultRange.y === -1 || (resultRange.x === 1 && resultRange.y === 1)) {
    26.       return [-1, -1]
    27.     }
    28.     return [resultRange.x, resultRange.y] // 只会有八个位置能被准确返回，其余都是返回[-1, -1]

    3.4、实现拖动和缩放的方法详解 

     拖动还是缩放？

    当3.3知识点中返回的是[-1, -1]时，那就说明是拖动，拖动的话，只需要改变矩形框的left，top定位即可。

    if (e.target !== this.childTarget && e.target.className.indexOf('dot') === -1) return; // 类名中包含被放行的dot除外

     当返回值不是[-1, -1]时，例如[2, 2],那就说明是向右下角缩放，目前八个方向已经全部实现了噢~

    1.   this.childTarget.onmousedown = e => {
    2.       if (e.target !== this.childTarget && e.target.className.indexOf('dot') === -1) return; // 类名中包含被放行的dot除外
    3.       const flag = this.mousedownHandle(e);
    4.       let left = e.clientX;
    5.       let top = e.clientY;
    6.       const width = this.childTarget.offsetWidth;
    7.       const height = this.childTarget.offsetHeight;
    8.       const [dragX, dragY] = flag;
    9.       // 拖动
    10.       if (dragX === -1 && dragY === -1) {
    11.         left -= this.childTarget.offsetLeft; // 要保持之前矩形框的坐标值
    12.         top -= this.childTarget.offsetTop;
    13.       }
    14.       const child = e.target.getBoundingClientRect();
    15.       document.onmousemove = e => {
    16.         // 取消浏览器因回流导致的默认事件及冒泡事件
    17.         e.preventDefault();
    18.         if (e.stopPropagation) {
    19.           e.stopPropagation();
    20.         } else {
    21.           e.cancelable = true;
    22.         }
    23.         if (dragX === -1 && dragY === -1) {
    24.           this.setStyle(this.childTarget, 'cursor', 'move');
    25.           // 将最外层父边框宽度减去
    26.           const rightArea = this.target.offsetWidth - this.childTarget.offsetWidth - 2 * getComputedStyle(this.target).borderWidth.replace(/px/, ''); // 右边界
    27.           const bottomArea = this.target.offsetHeight - this.childTarget.offsetHeight - 2 * getComputedStyle(this.target).borderWidth.replace(/px/, ''); // 下边界
    28.           const leftArea = 0 // 左边界
    29.           const topArea = 0 // 上边界
    30.           this.rect.left = e.clientX - left > rightArea ? rightArea : (e.clientX - left< leftArea ? leftArea : e.clientX - left);
    31.           this.rect.top = e.clientY - top > bottomArea ? bottomArea : (e.clientY - top < topArea ? topArea : e.clientY - top);
    32.           this.childTarget.style.left = this.rect.left + 'px';
    33.           this.childTarget.style.top = this.rect.top + 'px';
    34.         } else if (dragX === 0 && dragY === 0) { // 左上角拉伸
    35.           this.rect.left = e.clientX > this.origin.x ? ((e.clientX > (left + width)) ? left + width - this.origin.x : e.clientX - this.origin.x) : 0;
    36.           this.rect.top = e.clientY > this.origin.y ? ((e.clientY > (top + height)) ? top + height - this.origin.y : e.clientY - this.origin.y) : 0;
    37.           this.rect.width = e.clientX > this.origin.x ? ((e.clientX > (left + width)) ? 0 : width + (left - e.clientX)) : width + (left - this.origin.x);
    38.           this.rect.height = e.clientY > this.origin.y ? ((e.clientY > (top + height)) ? 0 : height + (top - e.clientY)) : height + (top - this.origin.y);
    39.           this.childTarget.style.left = this.rect.left + 'px';
    40.           this.childTarget.style.top = this.rect.top + 'px';
    41.           this.childTarget.style.width = this.rect.width + 'px';
    42.           this.childTarget.style.height = this.rect.height + 'px';
    43.         } else if (dragX === 1 && dragY === 0) { // 中上拉伸
    44.           this.rect.top = e.clientY > this.origin.y ? ((e.clientY > (top + height)) ? top + height - this.origin.y : e.clientY - this.origin.y) : 0;
    45.           this.rect.height = e.clientY > this.origin.y ? ((e.clientY > (top + height)) ? 0 : height + (top - e.clientY)) : height + (top - this.origin.y);
    46.           this.childTarget.style.top = this.rect.top + 'px';
    47.           this.childTarget.style.height = this.rect.height + 'px';
    48.         } else if (dragX === 2 && dragY === 0) { // 右上角拉伸
    49.           this.rect.top = e.clientY > this.origin.y ? ((e.clientY > (top + height)) ? top + height - this.origin.y : e.clientY - this.origin.y) : 0;
    50.           this.rect.width = (e.clientX - left + width > this.target.offsetWidth - this.childTarget.offsetLeft ? this.target.offsetWidth - this.childTarget.offsetLeft : e.clientX - left + width);
    51.           this.rect.height = e.clientY > this.origin.y ? ((e.clientY > (top + height)) ? 0 : height + (top - e.clientY)) : height + (top - this.origin.y);
    52.           this.childTarget.style.top = this.rect.top + 'px';
    53.           this.childTarget.style.width = this.rect.width + 'px';
    54.           this.childTarget.style.height = this.rect.height + 'px';
    55.         } else if (dragX === 2 && dragY === 1) { // 右中拉伸
    56.           this.rect.width = (e.clientX - left + width > this.target.offsetWidth - this.childTarget.offsetLeft ? this.target.offsetWidth - this.childTarget.offsetLeft : e.clientX - left + width);
    57.           this.childTarget.style.width = this.rect.width + 'px';
    58.         }else if (dragX === 2 && dragY === 2) { // 右下角拉伸
    59.           this.rect.width = (e.clientX - left + width > this.target.offsetWidth - this.childTarget.offsetLeft ? this.target.offsetWidth - this.childTarget.offsetLeft : e.clientX - left + width);
    60.           this.rect.height = (e.clientY- top + height > this.target.offsetHeight - this.childTarget.offsetTop ? this.target.offsetHeight - this.childTarget.offsetTop : e.clientY- top + height);
    61.           this.childTarget.style.width = this.rect.width + 'px';
    62.           this.childTarget.style.height = this.rect.height + 'px';
    63.         } else if (dragX === 1 && dragY === 2) { // 中下拉伸
    64.           this.rect.height = (e.clientY- top + height > this.target.offsetHeight - this.childTarget.offsetTop ? this.target.offsetHeight - this.childTarget.offsetTop : e.clientY- top + height);
    65.           this.childTarget.style.height = this.rect.height + 'px';
    66.         } else if (dragX === 0 && dragY === 2) { // 左下角拉伸
    67.           this.rect.left = e.clientX > this.origin.x ? ((e.clientX > (left + width)) ? left + width - this.origin.x : e.clientX - this.origin.x) : 0;
    68.           this.rect.width = e.clientX > this.origin.x ? ((e.clientX > (left + width)) ? 0 : width + (left - e.clientX)) : width + (left - this.origin.x);
    69.           this.rect.height = (e.clientY- top + height > this.target.offsetHeight - this.childTarget.offsetTop ? this.target.offsetHeight - this.childTarget.offsetTop : e.clientY- top + height);
    70.           this.childTarget.style.left = this.rect.left + 'px';
    71.           this.childTarget.style.width = this.rect.width + 'px';
    72.           this.childTarget.style.height = this.rect.height + 'px';
    73.         } else if (dragX === 0 && dragY === 1) { // 左中拉伸
    74.           this.rect.left = e.clientX > this.origin.x ? ((e.clientX > (left + width)) ? left + width - this.origin.x : e.clientX - this.origin.x) : 0;
    75.           this.rect.width = e.clientX > this.origin.x ? ((e.clientX > (left + width)) ? 0 : width + (left - e.clientX)) : width + (left - this.origin.x);
    76.           this.childTarget.style.left = this.rect.left + 'px';
    77.           this.childTarget.style.width = this.rect.width + 'px';
    78.         }
    79.         this.customEvent.trigger('draging', this.getRect());
    80.       }
    81.       document.onmouseup = e => {
    82.         this.customEvent.trigger('dragend', this.getRect());
    83.         document.onmousemove = null;
    84.         document.onmouseup = null;
    85.         this.setStyle(this.childTarget, 'cursor', 'move');
    86.       }
    87.     }

    4、矩形框快捷键及截图原理讲解

    注意：当插入有图片，才会进行截图噢~这也是必然的，所以截图功能是本矩形框额外提供的功能！

     首选是矩形框快捷键，这个毋庸置疑，监听键盘事件就好了，然后updateRect更新矩形框坐标，

    截图呢，就是获取矩形框的xywh，然后调用canvas的drawImage绘制成图片，最后toDataURL('jpeg', 1)导出成图片，当然从canvas到图片有很多种方式，这个可以你自己来选择~

    1. /** 默认事件执行 */
    2.   defaultEvent() {
    3.     // 右键是佛禁用
    4.     if (this.events.contextmenu.disabled) {
    5.       this.target.addEventListener('contextmenu', (e) => {
    6.         e.preventDefault();
    7.       })
    8.     }
    9.     // 截图功能提供
    10.     if (!this.events.clip.disabled) {
    11.       document.addEventListener('keydown', (e) => this.screensEvent(e, this))
    12.     }
    13.   }
    14.   /**
    15.    * 截图快捷键
    16.    * @param {*} e
    17.    */
    18.   screensEvent(e, comp) {
    19.     // 截图
    20.     // 键入键盘ascll码时必须要先加在下面这行代码里，不要忘记了喔
    21.     if ((e.altKey || e.ctrlKey) && [81, 83, 87].includes(e.keyCode)) {
    22.       e.preventDefault();
    23.       let typeCode = ''
    24.       if (e.altKey && e.keyCode === 87) typeCode = 0 // 开始截图：alt + w
    25.       else if (e.ctrlKey && e.keyCode === 83) typeCode = 1 // 保存当前截图：ctrl + s
    26.       else if (e.ctrlKey && e.keyCode === 81) typeCode = 2 // 关闭当前截图：ctrl + q
    27.       if (typeCode || typeCode === 0) comp.clipPhoto(typeCode)
    28.     }
    29.     // 切图
    30.     // 键入键盘ascll码时必须要先加在下面这行代码里，不要忘记了喔
    31.     if ([37, 38, 39, 40].includes(e.keyCode)) {
    32.       // e.preventDefault(); // 这一行放开 就会把键盘原本事件覆盖掉
    33.       let typeCode = ''
    34.       if (e.keyCode === 37) typeCode = 0 // 键盘向左方向键操作
    35.       else if (e.keyCode === 38) typeCode = 1 // 键盘向上方向键操作
    36.       else if (e.keyCode === 39) typeCode = 2 // 键盘向右方向键操作
    37.       else if (e.keyCode === 40) typeCode = 3 // 键盘向下方向键操作
    38.       comp.cutPhoto(typeCode)
    39.     }
    40.     // if (e.ctrlKey) {
    41.     //   this.mouseCtrl = true
    42.     // }
    43.     return false
    44.   }
    45.   /**
    46.    * 截图操作 0 => 开始截图 1 => 保存截图 2 => 退出截图
    47.    * @param {*} type
    48.    */
    49.   clipPhoto(type) {
    50.     switch (type) {
    51.       case 0:
    52.         this.startClip();
    53.         break;
    54.       case 1:
    55.         this.saveClip();
    56.         break;
    57.       case 2:
    58.         this.closeClip();
    59.         break;
    60.     }
    61.   }
    62.   /** 开始截图 */
    63.   startClip() {
    64.     this.startPaint();
    65.   }
    66.   /** 保存截图 */
    67.   saveClip() {
    68.     // 有图片才允许保存截图
    69.     if (this.img) {
    70.       this.getClip()
    71.     }
    72.   }
    73.   /** 退出截图 */
    74.   closeClip() {
    75.     this.clearPaint();
    76.   }
    77.   /**
    78.    * 切图快捷键操作
    79.    * @param {*} type
    80.    */
    81.   cutPhoto(type) {
    82.     switch (type) {
    83.       case 0:
    84.         this.cutFrameMove('left');
    85.         break
    86.       case 1:
    87.         this.cutFrameMove('top');
    88.         break
    89.       case 2:
    90.         this.cutFrameMove('right');
    91.         break
    92.       case 3:
    93.         this.cutFrameMove('bottom');
    94.         break
    95.     }
    96.   }
    97.   /**
    98.    * 切图框键盘控制移动（增加了移动边界限制，当抵达边界时，则无法再向外侧移动）
    99.    * @param {*} type
    100.    */
    101.   cutFrameMove(type) {
    102.     if (this.childTarget) { // 只有聚焦状态的单框才能被移动, 附属移动边界限制
    103.       const leftArea = 0; // 左边界
    104.       const topArea = 0; // 上边界
    105.       // 将最外层父边框宽度减去
    106.       const rightArea = this.target.offsetWidth - this.childTarget.offsetWidth - 2 * getComputedStyle(this.target).borderWidth.replace(/px/, ''); // 右边界
    107.       const bottomArea = this.target.offsetHeight - this.childTarget.offsetHeight - 2 * getComputedStyle(this.target).borderWidth.replace(/px/, ''); // 下边界
    108.       if (type === 'left') {
    109.         this.rect.left = this.rect.left - 5 <= leftArea ? leftArea : this.rect.left - 5;
    110.       } else if (type === 'top') {
    111.         this.rect.top = this.rect.top - 5 <= topArea ? topArea : this.rect.top - 5;
    112.       } else if (type === 'right') {
    113.         this.rect.left = Number(this.rect.left) + 5 >= rightArea ? rightArea : Number(this.rect.left) + 5;
    114.       } else {
    115.         this.rect.top = Number(this.rect.top)  + 5 >= bottomArea ? bottomArea : Number(this.rect.top) + 5;
    116.       }
    117.       this.updateRect();
    118.     }
    119.   }
    120. /**
    121.    * 插入图片
    122.    * @param {*} url 图片链接
    123.    * @param {*} mode 图片模式
    124.    */ 
    125.   insertImage(url, mode = 'standard') {
    126.     const image = new Image()
    127.     image.crossOrigin='anonymous'
    128.     image.src = url
    129.     this.img.target = image
    130.     image.onload = (e) => {
    131.       if (mode === 'standard') {
    132.         this.img.width = image.width;
    133.         this.img.height = image.height;
    134.         this.img.target.style.width = image.width + 'px'
    135.         this.img.target.style.height = image.height + 'px'
    136.       } else {
    137.         if (Object.prototype.toString.call(mode) === '[object Object]') {
    138.           this.img.width = mode.width;
    139.           this.img.height = mode.height;
    140.           this.img.target.style.width = mode.width + 'px'
    141.           this.img.target.style.height = mode.height + 'px'
    142.         }
    143.       }
    144.     }
    145.     if (!this.target.querySelector('img')) {
    146.       this.target.appendChild(this.img.target)
    147.     }
    148.   }
    149.   /**
    150.    * 获取截图canvas, 方便自己转化
    151.    * @returns canvas
    152.    */
    153.   getClipCanvas() {
    154.     const canvas = document.createElement('canvas');
    155.     canvas.width = this.getRect().width
    156.     canvas.height = this.getRect().height
    157.     const context = canvas.getContext('2d');
    158.     context.drawImage(
    159.       this.img.target, // 规定要使用的图像、画布或视频。
    160.       this.getRect().left, this.getRect().top,
    161.       this.getRect().width, this.getRect().height,
    162.       0, 0,
    163.       canvas.width, canvas.height
    164.     )
    165.     return canvas
    166.   }
    167.   /**
    168.    * 获取截图
    169.    */
    170.   getClip() {
    171.     const outputClip = this.getClipCanvas().toDataURL('jpeg', 1)
    172.     console.log(outputClip);
    173.     return outputClip
    174.   }

    5、问题答疑？

    1、在onmousedown里为啥要加上 if (e.target !== dom) return 这行代码呢？

    1. this.target.onmousedown = e => {
    2.       if (e.target !== this.target) return;
    3. }

    因为我在多次写的时候发现呀，很多时候矩形框的下面就会有类似截图软件下的涂鸦功能，当你点击涂鸦按钮时，其实这个时候你也是点击dom的（可理解为事件穿透），但是我们写逻辑的时候不想要涂鸦按钮和dom一起绑定住想区分开，所以这个时候判断onmousedown的对象和dom是否一致，不一致的话，就不执行后续操作。

    2、在onmousemove里为啥要加 e.preventDefault() ... 这段代码呢？

    1.     document.onmousemove = e => {
    2.           e.preventDefault()
    3.           if (e.stopPropagation) {
    4.             e.stopPropagation()
    5.           } else {
    6.             e.cancelable = true
    7.           }
    8.     }

    注意哦，只在绑定对象为document才加这一段代码，其他的不加~

    加上这段代码是因为在mousemove来回移动到当前矩形框时，会出现浏览器的黑色拒绝符号并会卡顿，导致操作不流畅，所以加上这段代码可以取消浏览器因回流导致的默认事件及冒泡事件

    3、 矩形框周围的黑色半透明蒙层是如何实现的？

    box-shadow: 0 0 0 1999px rgba(0, 0, 0, .4);

    是通过这行样式实现的喔，其中1999px基本满足大部分屏幕的要求，当然也可以根据你的需求来设置哦，但是一定要切记，外层盒子要设置overflow，不然矩形框的阴影将会溢出去

    overflow: hidden;

    4、绘制矩形框时的边界范围限制？

    其实可以看到，绘制时，矩形框的left和top都是已经确定好的，只是在mousemove时候改变宽高，但是宽高不能超过外层盒子的范围呀，所以就是在你mousemove时，将计算出来的宽高与父级offsetWidth，offsetHeight进行比较（记住为了更好看，我这里是将边框宽度也一起计算进来的喔，如果你不想计算的话，影响也不大~）（内部变量找不到的可以到上面源码里查看全部喔~）

    1.         // 宽高边界限制
    2.         const widthArea = e.clientX - this.origin.x > this.target.offsetWidth ? this.target.offsetWidth : e.clientX - this.origin.x
    3.         const heightArea = e.clientY - this.origin.y > this.target.offsetHeight ? this.target.offsetHeight : e.clientY - this.origin.y
    4.         this.childTarget.style.width = widthArea - left + 'px'
    5.         this.childTarget.style.height = heightArea - top + 'px'

    5、拖动矩形框时的边界范围限制？

    这里给出了上下左右四个边界范围限制，当移动left，top超过这个范围时，都将给予处理，使矩形框不会超过外层盒子的边界范围（内部变量找不到的可以到上面源码里查看全部喔~）

    1.           const rightArea = this.target.offsetWidth - this.childTarget.offsetWidth - 2 * getComputedStyle(this.target).borderWidth.replace(/px/, ''); // 右边界
    2.           const bottomArea = this.target.offsetHeight - this.childTarget.offsetHeight - 2 * getComputedStyle(this.target).borderWidth.replace(/px/, ''); // 下边界
    3.           const leftArea = 0 // 左边界
    4.           const topArea = 0 // 上边界
    5.           this.rect.left = e.clientX - left > rightArea ? rightArea : (e.clientX - left< leftArea ? leftArea : e.clientX - left);
    6.           this.rect.top = e.clientY - top > bottomArea ? bottomArea : (e.clientY - top < topArea ? topArea : e.clientY - top);
    7.           this.childTarget.style.left = this.rect.left + 'px';
    8.           this.childTarget.style.top = this.rect.top + 'px';

    6、缩放矩形框时的边界范围限制？

    缩放的时候，其实矩形框的left，top，width和height都可能需要改变，不过具体要看你缩放的是哪个边角，下面我代码里是缩放的右下角，所以只需要改变矩形框宽高即可。当宽高的长度等于或超过外层盒子的offsetWidth，offsetHeight减去矩形框的offsetLeft，offsetTop时，就说明已经到范围边界了，这个长度不能再被增加了。（内部变量找不到的可以到上面源码里查看全部喔~）

    下述是往右下角方向拉伸噢~

    1.           this.rect.width = (e.clientX - left + width > this.target.offsetWidth - this.childTarget.offsetLeft ? this.target.offsetWidth - this.childTarget.offsetLeft : e.clientX - left + width);
    2.           this.rect.height = (e.clientY- top + height > this.target.offsetHeight - this.childTarget.offsetTop ? this.target.offsetHeight - this.childTarget.offsetTop : e.clientY- top + height);
    3.           this.childTarget.style.width = this.rect.width + 'px';
    4.           this.childTarget.style.height = this.rect.height + 'px';

    ---喜欢的请点赞收藏吧，欢迎评论---

  • 相关阅读:
    SpringCould微服务保护01——Sentinel组件下载并使用
    深度学习应用篇-计算机视觉-图像分类[3]：ResNeXt、Res2Net、Swin Transformer、Vision Transformer等模型结构、实现、模型特点详细介绍
    “蔚来杯“2022牛客暑期多校训练营6 F题: Hash
    Tomcat以及UDP
    给出含有n个整数的数组s，找出s中和加起来的和最接近给定的目标值的三个整数。返回这三个整数的和。你可以假设每个输入都只有唯一解。
    java 线索二叉树的构建
    SuperBuilder的用法，此时不要用Builder
    OpenCV入门5：色彩空间及色彩变换
    实验11 SQL互联网业务查询-2
    如何制作HTML网页设计【体育运动主题网站——中国篮球NBA】
  • 原文地址：https://blog.csdn.net/qq_39404437/article/details/127957601