Canvas判断多个矩线框是否重叠

有时候 为了我们的数据更加的精确,所以我们会有一起需求,那就是我们画的矩形不能重叠,比如以下的样子

但是 有的时候,别人就是要画成重叠的样子,那么 我们改如何的进行判断的呢

		 // 这个就可以 很方便的获取到矩形框鼠标点击的当前位置
		 //startx = e.clientX - canvasRect.getBoundingClientRect().left;
         //starty = e.clientY - canvasRect.getBoundingClientRect().top;
         
        let isSuccess = true;
        let formatLayers = [];
        // layers 就是你装几个 矩形框位置的数据
        // const layers=[
        //     {
        //         x1: 100, 
        //         y1: 200, 
        //         width: 50, 
        //         height: 100
        //     },
        //     {
        //         x1: 200, 
        //         y1: 300, 
        //         width: 100, 
        //         height: 200
        //     }, 
        // ];
        for(let i=0,j=layers.length; i< j; i++) {
            formatLayers.push({
            	// x 和 y 就是矩形框 左上角的位置的点
                x:layers[i].x1 + layers[i].width /2,
                y:layers[i].y1 + layers[i].height/2,
                width: layers[i].width,
                height: layers[i].height
            });
        }

        for(let i=0; i< formatLayers.length; i++) {
            for(let j=i+1; j<formatLayers.length; j++) {
                if(i>=0 && i<formatLayers.length -1) {
                    if(intersects(formatLayers[i], formatLayers[j])) {
                        isSuccess = false;
                        
                        // 走到这里 就说明 已经有交叉的线框了, 你可以做错误的提示了
                        ...
                        return;
                    }
                }
            }
        }

        //判断是否有交叉的矩形框
        function intersects(first, second) {
            if(Math.abs(first.x - second.x) < first.width/2 + second.width/2 && Math.abs(first.y - second.y) < first.height/2 + second.height/2 ){
                return true;
            }
            return false;
        }