fabric ActiveSelection选择框说明,以及选择框中的元素坐标

说明

fabric 通过鼠标可以选中多个元素,也就是 选择框,继承 Group

官方:
http://fabricjs.com/docs/fabric.ActiveSelection.html

获取选择框

注意:选中多个元素时,是类似 Group 对象;如果选中一个元素,返回的是该元素对象

const chooseRect = this.canvasFab.getActiveObject()

获取选择框中的元素

注意:由于上面原因,选中多个元素时才能调用

chooseRect.getObjects()

选择框中元素的坐标(坑)

多选框中元素的坐标,不是相对 fabric Canvas 的,而是相对 多选框 中心点 的,所以很多时候,都是负数

改为相对 fabric Canvas坐标

提示:可能有bug,没算边框宽度(未验证)

// 获取选中的元素,返回数组
const selectObjects = this.canvasFab.getActiveObjects()
// 获取多选框,注意:只有选中多个元素时才行
const chooseRect = this.canvasFab.getActiveObject()
// 多选框的中心点left、top
const chooseRectCenterLeft = chooseRect.left + chooseRect.width / 2 
const chooseRectCenterTop = chooseRect.top + chooseRect.height / 2

for( let  selectObject  of  selectObjects){
    // 多选框中元素,相对fabric Canvas坐标
    const selectObjectLeft = chooseRectCenterLeft + selectObject.left
    const selectObjectTop = chooseRectCenterTop + selectObject.top
    console.log(selectObjectLeft,selectObjectTop)

}