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'
from How to calculate distance of x, y, width, height between three rectangle
No comments:
Post a Comment