说明
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)
}
