js纯原生实现div画框+多选+框选canvas内容+跨屏选

新需求需要在canvas画布上实现框选及对框选中的数据进项操作

以下代码实现框选及多选

// main画布事件监听,框选
function mainMarqueeMousedown (e) {
    if (e.button !== 0) return
    // 判断是否多选
    if (!e.ctrlKey) {
      // 容纳marqueeDOM的盒子
      marqueeBoxDOM.innerHTML = ''
      // 储存marquee坐标数组
      marqueeAxiss = []
    }
    // 创建新div
    const marquee = this.createMarquee()
    marqueeBoxDOM.appendChild(marquee)

    if (!(e.target.id === 'mainCtxbox' || e.target.id === 'marquee')) return
    let marqueeAxis={}
    marqueeAxis.end.x = marquee.end.y = null
    marqueeAxis.starting = this.getEventPosition(e)
    marquee.style.left = marqueeAxis.starting.x + 'px'
    marquee.style.top = marqueeAxis.starting.y +'px'
    mainCanvas.onmousemove = mainMarqueeMousemove.bind(this, marquee)
    document.onmouseup = mainMarqueeMouseUp.bind(this, marquee)
    mainCanvas.onmouseleave = this.moveSelection.bind(this, marquee)
    marqueeBoxDOM.style.pointerEvents = 'none'
    function mainMarqueeMousemove(marquee, e) {
      const end = marqueeAxis.end = this.getEventPosition(e)
      const starting = marqueeAxis.starting
      // 左上角
      if (end.x > starting.x && end.y > starting.y) {
        marquee.style.top = starting.y + 'px'
        marquee.style.left = starting.x + 'px'
        marquee.style.width = end.x - starting.x + 'px'
        marquee.style.height = end.y - starting.y + 'px'

        // 右下角
      } else if (end.x < starting.x && end.y < starting.y) {
        const x = starting.x - end.x
        const y = starting.y - end.y
        marquee.style.top = starting.y - y + 'px'
        marquee.style.left = starting.x - x + 'px'
        marquee.style.width = x + 'px'
        marquee.style.height = y + 'px'

        // 左下角
      } else if (end.x > starting.x && end.y < starting.y) {
        const y = starting.y - end.y
        marquee.style.top = starting.y - y + 'px'
        marquee.style.left = starting.x + 'px'
        marquee.style.width = end.x - starting.x + 'px'
        marquee.style.height = y + 'px'
        // 右上角
      } else if (end.x < starting.x && end.y > starting.y) {
        const x = starting.x - end.x
        marquee.style.left = starting.x - x + 'px'
        marquee.style.top = starting.y  + 'px'
        marquee.style.width = x + 'px'
        marquee.style.height = end.y - starting.y + 'px'
      }
    }
    function mainMarqueeMouseUp(marquee, e) {
      const end = marqueeAxis.end
      const starting = marqueeAxis.starting
      this.destroy()
      this.boxsDom.marquee.style.pointerEvents = 'auto'
      if (end.y === null || end.x === null) {
        end.y = starting.y + 1
        end.x = starting.x + 1
      }
      // 左上角
      if (end.x > starting.x && end.y > starting.y) {
        marquee.style.width = end.x - starting.x + 'px'
        marquee.style.height = end.y - starting.y + 'px'
        // 右下角
      } else if (end.x < starting.x && end.y < starting.y) {
        marquee.style.top = end.y + 'px'
        marquee.style.left = end.x + 'px'
        marquee.style.width = starting.x - end.x + 'px'
        marquee.style.height = starting.y - end.y + 'px'

        // 左下角
      } else if (end.x > starting.x && end.y < starting.y) {
        marquee.style.top = end.y  + 'px'
        marquee.style.width = end.x - starting.x + 'px'
        marquee.style.height = starting.y - end.y + 'px'

        // 右上角
      } else if (end.x < starting.x && end.y > starting.y) {
        marquee.style.left = end.x + 'px'
        marquee.style.width = starting.x - end.x + 'px'
        marquee.style.height = end.y - starting.y + 'px'
      }
      marqueeAxiss.push(JSON.parse(JSON.stringify(marqueeAxis)))
    }
  }

  // 获取坐标信息
  function getEventPosition(e) {
    let x, y
    if (e.layerX || e.layerX === 0) {
      x = e.layerX
      y = e.layerY
    } else if (e.offsetX || e.offsetX === 0) {
      x = e.offsetX
      y = e.offsetY
    }
    return { x, y }
  }

  // 创建框选div
  function createMarquee() {
    const marquee = document.createElement('div')
    marquee.style.position = 'absolute'
    marquee.style.background = '#034175'
    marquee.style.border = '1px solid #0976d4'
    return marquee
  },

以上代码可以实现画多个框+获取坐标
剩下的框选内容无非就是用坐标和对应的数据计算出所选中的数据
跨屏选无非就是监听鼠标移出事件，然后设置setInterval 每100ms 增加减少scrollTop或scrollLeft的值
欢迎讨论拍砖