可拖动、可调整大小的网站矩形

Question

我想制作一个非常基本的布局设计器网站，用户可以将矩形拖放到规划区域上，然后可以在其中调整矩形的大小。这些矩形需要是某种对象，因为我想在其中存储信息，以便用户单击某个对象时可以看到这些信息。它们也应该发生碰撞，这样它们就不能相互重叠。我不确定使用什么资源来实现这一目标，如有任何建议，我们将不胜感激。

我尝试了 HTML 画布，但无法调整大小，并且不知道如何将每个矩形作为对象，而不仅仅是 html 标签。 SVG 有点类似，但请记住我以前从未使用过这些。

Answer 1

Html Canvas 内部不包含 SVG 对象。 想象一下，它就像一个空的

<img/>

元素，您可以在其中绘制任何您想要的内容。 但是，如果您需要使其动态化，即可以移动物体，则必须每帧清除并绘制画布。

此外，由于画布只是动态绘图，因此您无法直接选择内容，它们只是像素。

您需要有一种算法来确定在绘图中单击了哪个对象，并检查画布上的单击位置。

如果你想要一种更友好的开发方式，也许你应该使用 svg，但 canvas 更快。