拖放mozilla画布

Question

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

对此有任何支持吗？

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

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

在这种情况下，指向什么是更好的解决方案。 （我希望它不是小程序）

提前致谢。

Answer 1

是的，你可以使用画布。绘制简单的形状和缩放它们非常简单。

但是如果你需要在绘制后修改形状，你将需要投入更多的工作。 Canvas以所谓的＆＃34;立即模式＆＃34;绘制，这意味着它在绘制之后就不知道你画了什么。它不跟踪绘制的形状。如果您需要，您必须自己实施。

我使用isPointInPath()函数完成了此操作，该函数可用于测试用户是否点击了某个特定点。我使用MVC模式（模型 - 视图 - 控制器）跟踪我的绘制对象，以便我可以找出已经点击了哪个Shape。

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

Answer 2

请点击此链接： https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

LMK，如果它有帮助！

以下步骤可能有所帮助：
 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（触地，touchmove，touchup）并相应地处理移动。

Answer 3

这些 jQuery插件中的任何一个都非常适合绘制窗格：

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

sketch.js一般用于绘图。

它们既响应又兼容。