找出在html5 Canvas上单击了哪个对象

Dri*_*bel 8 html javascript frameworks canvas dom-events

假设我有一个html5/canvas应用程序,我可以在其中放置绘图画布上的对象.某种图编辑器,比如Visio(但更简单)

有没有一个框架可以帮助我找到被点击/拖动的对象?

一个选项是捕获click事件并迭代我的所有对象(以半智能的方式)并检查它是否被点击/拖动,我讨厌重新发明轮子:)

Sim*_*ris 5

简短的版本是Canvas本身没有跟踪这些.

如果您不想重新发明轮子,请从教程"在HTML5画布上制作和移动可选形状:一个简单示例"中的示例代码开始.它为点击和拖动提供了一个很好的介绍和平台.


Jua*_*des 1

不幸的是,没有用于渲染到画布中的内容的对象模型。您需要跟踪您绘制的所有内容,并在检测到单击、鼠标向上、鼠标向下、拖动时触发单独的事件。这意味着为所有上下文方法创建一个包装器,将线条/图像及其属性存储到 COM(画布对象模型:) 中,并为每个线条/图像触发事件

我还没有看到任何东西可以做到这一点。这可能需要大量工作,每次需要向画布添加交互性时,我都会编写自定义代码