新需求需要在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的值
欢迎讨论拍砖