如何在画布上选择并拖动一条线？

我现在正在研究一个绘画应用程序。它使用HTML画布。用户可以在画布上绘制形状。如何在画布上选择并拖动一条线？

现在出现了一个问题。我想选择我在画布上绘制的线条。当它被选中时，我可以拖动它或删除它。我怎样才能实现它？任何好主意？

来源

2012-07-04 Shieffan

有一个名为kinetic.js的库，通过它你可以跟踪在选择特征的画布上绘制的形状。

下面是一个例子：http://www.html5canvastutorials.com/kineticjs/html5-canvas-select-shapes-by-name-with-kineticjs/

来源

2012-07-04 08:10:12 rpabon

Thanx，我已经搜索并找到库之前。我浏览了文档，发现它不适合我正在使用的应用程序。现在我决定自己实施一个图书馆。所以，我只想知道实现这个功能的方式或指南。 – Shieffan

这可能是值得你看看这https://github.com/canvimation/canvimation.github.com包含了使用帆布绘图应用程序的源代码。

您应该注意，此应用程序正在重新编码，但目前还没有工作版本正在使用新的代码。新的源代码位于阶段1分支。希望这个新代码比旧代码更容易理解，下面提到的代码来自stage1分支。

基本上为每个绘制的形状创建一个形状对象，其中包含所有关于形状的数据，包括路径数据和数据以及形状周围的矩形边界。当点击“boundarydrop”div时，函数checkBoundary被调用，并且关于shift键和光标位置的数据被传递。然后，对于每个形状，首先检查光标是否在形状的边界内，如果是，则进行更精确的检查。对于封闭的形状，检查是否光标在形状内，如果光标靠近路径，则检查是否为开放形状。

根据移位键是否被按下以及该形状属于哪个组，还有其他并发症。但基本知识在那里。

功能的index.html

降档
为getPosition

在脚本中检查出

/drawboundary.js

checkBoundary

ISIN

ISON

脚本/shape.js

形状

应用的一个工作网络版在http://canvimation.github.com/但使用主分支中的旧代码，并有一些错误，但它w生病让你了解应用程序的功能。

希望这是一些帮助

来源

2012-07-04 10:28:47 jing3142

如何在画布上选择并拖动一条线？

回答

相关问题