Tag: kineticjs

动力学js拖放，resize和旋转图像

我试图结合拖放resize的图像和旋转图像触摸 ，我的行为是奇怪的http://jsfiddle.net/littlechad/Kuaxn/ 我的代码如下： function update (activeAnchor) { var group = activeAnchor.getParent(); var topLeft = group.get('.topLeft')[0]; var topRight = group.get('.topRight')[0]; var bottomRight = group.get('.bottomRight')[0]; var bottomLeft = group.get('.bottomLeft')[0]; var image = group.get('.image')[0]; var stage = group.getStage(); var anchorX = activeAnchor.getX(); var anchorY = activeAnchor.getY(); // update anchor positions switch (activeAnchor.getName()) { case 'topLeft': topRight.setY(anchorY); bottomLeft.setX(anchorX); break; […]

快速响应的交互式图表/graphics：SVG，Canvas，其他？

我正在尝试select正确的技术来更新一个基本上呈现可缩放，可移动graphics中的数千个点的项目。 目前使用Protovis的实施效果不佳。 看看这里： http://www.planethunters.org/classify 完全缩小大约有2000点。 尝试使用底部的手柄放大一点，并拖动它平移。 你会发现它是非常不稳定的，你的CPU使用率可能会在一个内核上达到100％，除非你有一台非常快的计算机。 对焦点区域的每一个改变都会调用protovis来重绘，这相当慢，而且在绘制更多的点时会变得更糟。 我想对界面进行一些更新，并将底层的可视化技术更改为对animation和交互更加敏感。 从下面的文章中，似乎可以select另一种基于SVG的库或基于canvas的库： How to Choose Between Canvas and SVG 从Protovis发展而来的d3.js是基于SVG的， 在渲染animation方面应该更好 。 不过，我很怀疑它的性能上限是多less。 出于这个原因，我还在考虑使用像KineticJS这样的基于canvas的库进行更彻底的检修。 然而，在我使用这种或那种方法过度使用之前，我想听听有人用这么多的数据完成了一个类似的Web应用程序，并得到他们的意见。 最重要的是性能，次要的重点是易于添加其他交互function和编程animation。 一次可能不会超过2000点，每个点都有小错误。 放大，缩小和平移需要平滑。 如果最近的SVG库在这方面比较体面，那么使用d3的难易程度可能会超过KineticJS的增加设置等。但是如果使用canvas有很大的性能优势，特别是对于电脑速度较慢的用户，那么我肯定会喜欢这样。 由使用SVG的NYTime制作的应用程序示例，但仍可以stream畅地animation： http ://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html 。 如果我可以得到这样的性能，而不必编写自己的canvas代码，那么我可能会selectSVG。 我注意到一些用户已经使用了与canvas渲染相结合的d3.js混合操作 。 不过，我无法在网上find很多关于这个post的文档，也没有联系到这个post的OP。 如果任何人有任何这样的DOM到canvas（ 演示 ， 代码 ）实现的经验，我想也听到你的。 这似乎是能够操纵数据和自定义控制如何呈现它（以及因此性能）的一个很好的混合体，但是我想知道是否必须将所有内容加载到DOM仍然会减慢速度。 我知道有一些类似于这个问题的现存问题，但是他们中的任何一个都没有问过同样的问题。 谢谢你的帮助。 后续 ：我最终使用的实现是在https://github.com/zooniverse/LightCurves