在 mozilla 中拖放 canvas

Question

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

对此有任何支持吗？

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

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

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

提前致谢。

Answer 1

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

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

我使用isPointInPath() function 完成了这项工作，它可用于测试用户是否单击特定点。 我使用 MVC 模式（模型-视图-控制器）跟踪我绘制的对象，以便找出单击了哪个形状。

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

Answer 2

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

LMK 如果有帮助！

以下步骤可能会有所帮助：
1. 创建 canvas 并将其添加到 DOM：
var myCanvas = document.createElement('canvas'); document.body.appendChild(myCanvas);
2、设置canvas的宽高：
myCanvas.width=200; myCanvas.height=200;
3. 获取 canvas 的上下文并开始在上面绘图：
var gc = myCanvas.getContext('2d');
4.绘制矩形的代码：
gc.strokeRect(50,50,50,50);
5. 在此之后，在 canvas 上添加 mousehandlers(mousedown,mousemove,mouseup)/touchhandlers(touchdown,touchmove,touchup) 并相应地处理移动。

Answer 3

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

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

sketch.js用于一般绘图。

它们既响应又兼容。