javascript - 在 mozilla canvas 中拖放

Question

我想在 mozilla canvas 中实现一个绘图 Pane (与 visio 为流程图提供的类似但更小的版本)。

这有什么支持吗？

到目前为止，我一直使用 jQuery 来创建矩形并四处移动它们。虽然这在这里很容易..创建线(对象之间的连接)是一个真正的痛苦。我正在使用一些粗略的方法在 javascript 中逐个像素地着色，它既不好看也不可扩展，而且我需要构建很多函数来使连接粘附到一组对象等。

有谁知道 Canvas 和那里可用的功能是否会让我的生活更轻松。

任何指向在这种情况下更好的解决方案的指针。 (我希望它不是小程序)

提前致谢。

Answer 1

是的，您可以为此使用 Canvas 。绘制简单的形状并缩放它们非常简单。

但是如果你需要在绘制完形状后进行编辑，你将不得不投入更多的工作。 Canvas 以所谓的“即时模式”进行绘制，这意味着它在您绘制之后并不知道您绘制了什么。它不跟踪绘制的形状。如果您需要，则必须自己实现。

我使用 isPointInPath() 函数完成了此操作，该函数可用于测试用户是否单击了特定点。我使用 MVC 模式(模型- View - Controller )跟踪绘制的对象，以便我可以找出单击了哪个形状。

另一种选择可能是 fabrics.js，它应该非常接近您的需要。