如何在画布中选择并拖动线？

Question

我现在正在开发一个绘画应用程序。它使用html画布。用户可以在画布上绘制形状。

现在我遇到了一个问题。我想选择我在画布上画的线。当它被选中时，我可以拖动或删除它。我如何实现它？有什么好主意吗？

Answer 1

这可能值得你花点时间来看看https://github.com/canvimation/canvimation.github.com，它包含了使用canvas的绘图应用程序的源代码。

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

基本上，为每个绘制的形状创建一个shape对象，其中包括关于该形状的所有数据，包括路径数据和给出该形状周围的矩形边界的数据。当单击“cursor”div时，将调用函数checkBoundary，并传递有关Shift键和光标位置的数据。然后，对于每个形状，第一个检查是查看光标是否在形状的边界内，如果是，则执行更精细的检查。对于闭合形状，检查光标是否位于形状内部；对于打开形状，检查光标是否靠近路径。

根据是否按下shift键以及形状属于哪个组，还会有更多的复杂情况。然而，基础知识已经存在了。

检出的函数

在index.html中

shiftdown

getPosition

在scripts/drawboundary.js中

checkBoundary

isIn

isOn

在scripts/shape.js中

形状

该应用程序的在线工作版本在http://canvimation.github.com/上，但它使用了主分支中的较旧代码，并且存在一些错误，但它将使您对应用程序的功能有一些了解。

希望这能对你有所帮助

Answer 2

有一个名为kinetic.js的库，您可以使用它跟踪您使用选择功能在画布上绘制的形状。

这是链接：https://github.com/ericdrowell/KineticJS