我正在尝试选择合适的技术来更新项目,该项目基本上可以在可缩放的可缩放图形中渲染数千个点.使用Protovis的当前实现表现不佳.看看这里:
http://www.planethunters.org/classify
完全缩小时大约有2000个点.尝试使用底部的手柄放大一点,然后拖动它以平移.除非你有一台真正快速的计算机,否则你会发现它非常不稳定,你的CPU使用率可能在一个核心上达到100%.对焦点区域的每次更改都会调用重绘为protovis,这种方法非常慢,并且绘制的点数越多越差.
我想对界面进行一些更新,以及更改底层可视化技术,以便更灵敏地进行动画和交互.从下面的文章看,似乎是在另一个基于SVG的库或基于画布的库之间进行选择:
http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/
d3.js,源自Protovis,基于SVG,应该更好地渲染动画.但是,我怀疑它有多好,它的性能上限是多少.出于这个原因,我也在考虑使用像KineticJS这样的基于画布的库进行更彻底的改造.然而,在我使用一种或另一种方法之前,我想听听那些使用这么多数据做过类似Web应用程序并得到他们意见的人.
最重要的是性能,第二个重点是易于添加其他交互功能和编程动画.一次可能不会超过2000个点,每个点上的误差小.放大,缩小和平移需要顺利进行.如果最新的SVG库在这方面还不错,那么使用d3的方便性可能会超过KineticJS的增加设置等.但是如果使用画布有巨大的性能优势,特别是对于计算机速度较慢的人来说,那么我肯定会喜欢这样.
使用SVG的纽约时报制作的应用程序示例,但仍然可以顺利地动画:http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html .如果我可以获得该性能而不必编写自己的画布绘图代码,我可能会选择SVG.
我注意到一些用户使用了混合的d3.js操作和画布渲染.但是,我无法在网上找到很多关于此的文档或与该帖子的OP联系.如果有人有任何使用DOM-to-Canvas(演示,代码)实现的经验,我也想听听你的意见.它似乎是一个很好的混合体,能够操纵数据和自定义控制如何渲染它(以及因此性能),但我想知道是否必须将所有内容加载到DOM仍然会减慢速度.
我知道有一些类似于这个问题的现有问题,但它们都没有提出同样的问题.谢谢你的帮助.
后续行动:我最终使用的实现是https://github.com/zooniverse/LightCurves
我试图结合拖放调整大小图像和触摸旋转图像,我的表现很奇怪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;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
image.setPosition(topLeft.getPosition());
var height = bottomLeft.attrs.y …我已经尝试过使用kinetic.js和下面的代码,但是当我在IE11中尝试这个时,它每次滚动都会一直跳到顶部:
$("html").kinetic();
我想让平板电脑和IE10和11上的页面可滚动,这样用户就可以像往常一样向上滚动页面向下滚动.
如果没有它跳到顶端,我怎么能在纯JS或jQuery中做到这一点？
除了缩放画布外,我让我的KineticJS游戏在CocoonJS中运行得非常好.我有1024x768的画布,非常适合iPad 2.但对于iPad 4,由于视网膜屏幕,游戏只占屏幕的1/4.
CocoonJS说这个缩放:
CocoonJS automatically scales your main canvas to fill the whole screen while you still
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:
idtkScale
'ScaleToFill' // Default
'ScaleAspectFit'
'ScaleAspectFill'
canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of
the ones listed above.
我试过这个添加这个:
layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';
但它没有用.知道如何让KineticJS在CocoonJS中创建Canvases吗？
我有一些图书馆代码在我身上无休止地骑自行车.
我不清楚如何在javascript中最好地执行循环检测和避免.也就是说,没有程序化的方法来检查一个物体是否来自"这个"参考,是吗？
这是代码.谢谢!
setAttrs: function(config) {
var go = Kinetic.GlobalObject;
var that = this;
// set properties from config
if(config !== undefined) {
function setAttrs(obj, c) {
for(var key in c) {
var val = c[key];
/*
* if property is an object, then add an empty object
* to the node and then traverse
*/
if(go._isObject(val) && !go._isArray(val) && !go._isElement(val)) {
if(obj[key] === undefined) {
obj[key] = {};
}
setAttrs(obj[key], val); // <--- offending code;
// one of my …我目前正在开展涉及KineticJS的项目.
我必须不断地动态创建和删除形状,但似乎无法弄清楚如何做后者.我一直在努力做到:
$ myLayer.remove(myShape)
因为这是大多数帖子似乎推荐的.但是,文档说这会从舞台上移除图层而不是图层中的形状.当我在项目中尝试这个时,它实际上从舞台中移除了该层.
我是做错了什么,还是有其他方法从图层中删除形状？
是什么KineticJS方法之间的区别layer.draw(),layer.drawScene()以及layer.drawHit()？
我在nodejs中安装了包Kineticjs并出现以下错误消息:
Kinetic.window = Kinetic.document.createWindow();
^
TypeError: undefined is not a function
at /kinetic/kinetic.js:608:47我正在尝试将事件监听器添加到由Kineticjs管理的Htm5-Canvas (Canvas是通过KineticJS阶段创建的).
我尝试了(使用jQuery):
$(selector).keydown(function(e){...})
使用以下选择器:
只有$(窗口)正常工作.在尝试使用简单的Html5-Canvas后,我发现,Canvas-Element内置了对键盘事件的支持.所以我认为,KineticJS正在这里做一些神奇的事情.可以排除错误的选择器使用.
我用这段代码检查了每个Selector:console.log($(selector).length)
有人可以帮忙吗？Thx提前!