6
假设我有一个html5/canvas应用程序，我可以在其中将对象放置在绘图画布上。某种图表编辑器，类似Visio（但更简单）找出在html5 Canvas上点击了哪个对象
是否有框架帮助我找到哪个对象被点击/拖拽？
一种选择是捕捉到的点击事件，并遍历所有的对象（在一个半智能的方式），并检查它是否点击/ draged，但我不想推倒重来:)
A
回答
0
不幸的是，没有对象渲染到画布中的对象模型。您需要跟踪所绘制的所有内容，并在检测到点击，鼠标移动，拖动，拖动时触发单独的事件。这意味着要为所有上下文方法创建一个包装，将行/图像及其属性存储到COM（Canvas Object Model :)中，并为每个行/图像触发事件。那就是它。这可以是一个lot的工作，我已经采取了编写自定义代码，每次我需要添加交互到画布
1
对于Visio样式的应用程序或任何与绘制对象的交互性是重要的，用SVG重新打好。已经有some open source projects，您可以使用它作为起点。 SVG的问题在于，与任何DOM重的东西一样，一旦有大量对象需要操作，性能就会急剧下降。
5
简短的版本是Canvas本身没有跟踪任何。
如果您不想重新发明轮子，请从本教程的示例代码开始"Making and Moving Selectable Shapes on an HTML5 Canvas: A Simple Example."它为点击和拖动提供了一个很好的介绍和平台。
0
KineticJS是你的朋友：http://www.kineticjs.com
看看如何轻松是这样的：http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/
相关问题
- 1. 确定屏幕上的哪个对象在html5 canvas javascript中被点击？
- 2. 使用HTML5 Canvas和Javascript点击对象？
- 3. HTML5 Canvas对象
- 4. Dojo - 找出提交表单时点击了哪个按钮
- 5. 找出使用javascript/jQuery点击了哪个图像
- 6. 如何找出asp：AsynPostBackTrigger中点击了哪个按钮？
- 7. Javascript成为获得一个对象的属性，点击存储在对象内阵列的图像，HTML5的Canvas
- 8. 点击了哪个按钮？
- 9. 发生事件时点击了哪个对象？
- 10. HTML5上的多个对象CANVAS，只绘制第一项
- 11. 查找HTML5中的曲线上的点2d Canvas上下文
- 12. 试图检测在scenekit上点击了哪个节点
- 13. HTML5 Javascript对象已被点击
- 14. 在Java中点击了哪个按钮？
- 15. QT - SvgDisplayWidget - 点击了哪个ID？
- 16. Canvas HTML5在多个图像上单击事件
- 17. 找到在DOM中点击了哪个元素
- 18. 查找在Gridview ASP.Net中点击了哪个按钮c＃
- 19. 在HTML5 Canvas上绘图
- 20. 如何找出哪些网格行被点击了contextmenu？
- 21. 我点击了哪个TD？ jQuery的
- 22. 哪个控件被点击了？
- 23. 如何知道在C＃中单击了哪个对象？
- 24. Jquery验证点击了哪个图像
- 25. 检查Page_Load在ResultsRepeater上点击了哪个项目
- 26. 找出哪个链接被点击在其onClickTopics
- 27. 哪个对象对应于点击标记？ Mapbox onInfoWindowClick
- 28. CheckedTextView的哪个部分被点击了？
- 29. jQuery的地址找到点击了哪个元素
- 30. 在Lua中，如何找出对象存储在哪个关键点
什么是 '大量'？ 100？ 10.000？ – Dribbel 2010-10-20 18:42:59
当使用excanvas绘制超过10,000点的积分时，我会表现呆滞 – 2010-10-20 20:53:19
@Dribbel如果您的目标是具有现代浏览器的桌面，则超过10,000，如果您使用手机，则可能会更加类似，这取决于浏览器和计算机规格1000，如果你想用VML在IE中工作，也许有几百个。 – robertc 2010-10-20 21:46:23