如何使用Fabric.js 选中重叠图形。

前言

以下仅记录个人开发过程中的解决方案，并不是最佳方案，欢迎评论区友善留言交流

因为公司有个数据标注的需求，目前只是单纯的画框。但是现在产品提出想在重叠画框。

demo链接

实现选中重叠标注框整体思路

因为我没有找到对应的API所以只能用最笨的方法来实现。

1. 在鼠标按下时，获取当前鼠标点位和所有标注框数据。
2. 判断点位是否在当前标注框内。
3. 根据width和height相乘计算最小面积。
4. 所有层级都先将为0级。
5. 先取消选中效果。
6. 抬高一级当前最小面积标注框层级。
7. 手动为最小面积标注框选中效果。

最终实现效果

鼠标可以选中重叠在一起的标注框。

具体核心代码

      /**   在当前重叠面积中 寻找最小的区域  */
      const searchMinArea = (opt)=>  {
        /**   1.当前标注点位  */
        let { x: curX, y: curY } = opt.pointer;
        let minArea = null;
        /**   2.所有标注数据  */
        const objList = this.canvas.getObjects();
        objList.forEach((item) => {
             /**  3.判断点位是否在当前标注框内。 */
            if (
              curX > item.left &&
              curX < item.left + item.width &&
              curY > item.top &&
              curY < item.top + item.height
            ) {
              if (minArea) {
                /**   4.根据width和height相乘计算最小面积  */
                if (minArea.width * minArea.height > item.width * item.height) {
                  minArea = item;
                }
              } else {
                minArea = item;
              }
              /**   5.先所有的都降为 0 层  */
              item.moveTo(0);
            }
        });
        return minArea;
      };
      let minArea = searchMinArea(e);
      /**  存在最小区域 && 选中状态  */
      if (minArea && this.drawType === '') {
        /**   6. 先取消选中效果，要不然无法选中底下的  */
        this.canvas.discardActiveObject();
        /**   7. 抬高一层  */
        minArea.moveTo(1);
        /**   8.手动设置选中效果。  */
        this.canvas.setActiveObject(minArea);x
        minArea.set({
          hasControls: true,
        });
      }