纯 js 图片裁剪 - 添加小细节

在使用大佬 纯js实现图片裁剪工具 的过程中发现的一些小问题，然后添加了一些小细节。

1. 控制框缩小之后不能还原，可以考虑使用下面的逻辑代码：

   handleMouseMove(e) { 
       if (!this.pos) return
   
       const initRect = this.initRect
       const originRect = this.originRect
       const { x, y } = this.initPoint
       const { pageX, pageY } = e
   
       let dx = 0
       let dy = 0
       let dw = 0
       let dh = 0 
   
       if (this.pos.includes('top')) {
         dy = pageY - y
         dy = Math.min(initRect.height, Math.max(originRect.y - initRect.y, dy))
         dh = -dy
       }
   
       if (this.pos.includes('bottom')) {
         dh = pageY - y
         const offsetHeight = originRect.height - initRect.height
         const offsetY = initRect.y - originRect.y
         dh = Math.min(offsetHeight, Math.min(offsetHeight - offsetY, dh))
       }
   
       if (this.pos.includes('left')) {
         dx = pageX - x
         dx = Math.min(initRect.width, Math.max(originRect.x - initRect.x, dx))
         dw = -dx
       }
   
       if (this.pos.includes('right')) {
         dw = pageX - x
         const offsetWidth = originRect.width - initRect.width
         const offsetX = initRect.x - originRect.x
         dw = Math.min(offsetWidth, Math.min(offsetWidth - offsetX, dw))
       }
   
       if (this.pos === 'move') {
         dw = 0
         dh = 0
   
         dx = pageX - x
         const offsetWidth = originRect.width - initRect.width
         const offsetX = initRect.x - originRect.x
         dx = Math.min(offsetWidth - offsetX, Math.max(-offsetX, dx))
   
         dy = pageY - y
         const offsetHeight = originRect.height - initRect.height
         const offsetY = initRect.y - originRect.y
         dy = Math.min(offsetHeight - offsetY, Math.max(-offsetY, dy))
       }
   
       this.rect = {
           x: initRect.x + dx,
           y: initRect.y + dy,
           width: initRect.width + dw,
           height: initRect.height + dh
       }
   
       this.updateRect()
       this.updateRectMask()
    }
   

2. 拖动选框

   只需要在 renderRect 方法中，添加：

   const container = document.createElement('div')
   // ...
   container.setAttribute('data-pos', 'move')
   container.addEventListener('mousedown', this.handleMouseDown)
   

3. 阴影遮罩

   添加两个函数实现遮罩功能 createRectMask 和 updateRectMask:

   createRectMask(rect) {
       const { x, y, width, height } = rect
       this.rectMaskDom = document.createElement('div')
       const style = `
           position: absolute;
           left: ${x}px;
           top: ${y}px;
           width: ${width}px;
           height: ${height}px;
           background-color: transparent;
           border: solid 0 rgba(0, 0, 0, .5);
           box-sizing: border-box;
           user-select: none;
           pointer-events: none;
       `
       this.rectMaskDom.setAttribute('style', style)
    }
   
   updateRectMask() {
       if (!this.rectMaskDom) return
       const { x, y, width, height } = this.rect
       const originRect = this.originRect
       const borderTopWidth = y - originRect.y
       const borderLeftWidth = x - originRect.x
       const borderRightWidth = originRect.width - borderLeftWidth - width
       const borderBottomWidth = originRect.height - borderTopWidth - height
       this.rectMaskDom.style.borderTopWidth = borderTopWidth + 'px' 
       this.rectMaskDom.style.borderRightWidth = borderRightWidth + 'px' 
       this.rectMaskDom.style.borderBottomWidth = borderBottomWidth + 'px' 
       this.rectMaskDom.style.borderLeftWidth = borderLeftWidth + 'px'
   }
   

   遮罩效果：