拖放mozilla画布

Question

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

这有什么支持吗？

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

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

在这种情况下,指向什么是更好的解决方案.(我希望它不是小程序)

提前致谢.

Answer 1

请点击此链接： 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. 之后为此，在画布上添加 mousehandlers(mousedown,mousemove,mouseup)/touchhandlers(touchdown,touchmove,touchup) 并相应地处理移动。