Wednesday, 23 November 2022

How to calculate distance of x, y, width, height between three rectangle

I'm working on a canvas that allows dragging shapes like Figma. I want to draw a guideline (x, y) when shapes intersect each other, just like below.

I already handled when shapes are snapped, so we don't need to calculate when they snap each other, basically, we know when should draw the lines. Just couldn't figure out the calculation of lines. Also, we already know the rect values when the shapes are snapped.

"firstRect":{ "x": 827, "y": 282, "width": 95, "height": 43, "right": 923,
            "bottom": 325,
            "top": 282,
            "left": 827,
        }
    
        "secondRect": { "x": 745, "y": 365, "width": 82, "height": 42, "right": 827,
            "bottom": 407,
            "top": 365,
            "left": 745,
        }
    
    {
        "currentRect": { "x": 938, "y": 369, "width": 134, "height": 80, "top": 369,
            "right": 1073,
            "bottom": 449,
            "left": 938
        }
    }

According to these values, I want to apply styles something like this:

  guideLineX.style.left = `.. px`
  guideLineX.style.top = `..px`
  guideLineX.style.width = '1px'
  guideLineX.style.height = `..px`

  guideLineY.style.left = `..px`
  guideLineY.style.top = `..px`
  guideLineY.style.width = `...px`
  guideLineY.style.height = '1px'

enter image description here



from How to calculate distance of x, y, width, height between three rectangle

No comments:

Post a Comment