Javascript 在mozilla画布中拖放

我想在mozilla画布中实现一个绘图窗格（类似于visio为流程图提供的版本，但更小）

有人支持吗

到目前为止，我一直使用jQuery来创建矩形并移动它们。虽然这在这里很容易，但是创建线（对象之间的连接）是一件非常痛苦的事情。我正在使用一些粗糙的方法在javascript中逐像素着色，它既不好看也不可伸缩，而且我还需要构建许多函数来使连接粘附到一组对象等

有人知道那里的画布和可用功能是否会让我的生活更轻松吗

在这种情况下，任何指向更好解决方案的指针。（我希望不是这样）

提前感谢。

请点击此链接：

如果有帮助的话，请滚开

以下步骤可能会有所帮助：
1.创建画布并将其添加到DOM:

var myCanvas=document.createElement（'canvas'）；document.body.appendChild（myCanvas）

2.设置画布的宽度和高度：

myCanvas.width=200；
myCanvas.height=200

3.获取画布的上下文并开始在其上绘图：

var gc=myCanvas.getContext（'2d'）

4.绘制矩形的代码：

gc.strokeRect（50,50,50,50）

5.在此之后，在画布上添加鼠标手柄（mousedown、mousemove、mouseup）/touchhandlers（触地、触地移动、触地），并相应地处理移动
 是的，你可以用画布来做。绘制简单的形状并缩放它们非常简单

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

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

另一种选择可能是fabrics.js，它应该非常接近您的需要。
这些jQuery插件中的任何一个都非常适合绘制窗格：

用于绘制任何简单甚至复杂的形状

一般用于绘图

它们反应灵敏且兼容