function reload() { var info = { A: parseInt($("A").value), B: parseInt($("B").value) }; reloadModel(dataModel, info); worker.postMessage(info); } function init() { dataModel = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dataModel); toolbar = new ht.widget.Toolbar(items); borderPane = new ht.widget.BorderPane(); borderPane.setTopView(toolbar); borderPane.setCenterView(g3d); g3d.mi(function(evt){ if(evt.kind === 'betweenMove'){ moveMap = {}; g3d.sm().each(function(data){ if(data instanceof ht.Node){ moveMap[data._id] = data.p3(); } }); worker.postMessage({moveMap: moveMap}); } }); worker = new Worker("worker.js"); worker.addEventListener('message', function(e) { var info = e.data; for(var id in info.result){ var data = dataModel.getDataById([id]); if(data && !g3d.isSelected(data)){ data.p3(info.result[id]); } } }); reload(); }
importScripts("ht.js"); importScripts("ht-forcelayout.js"); importScripts("util.js"); ht = self.ht; dataModel = new ht.DataModel(); forceLayout = new ht.layout.Force3dLayout(dataModel); forceLayout.onRelaxed = function(){ var result = {}; dataModel.each(function(data){ if(data instanceof ht.Node){ result[data._id] = data.p3(); } }); self.postMessage({result: result}); }; forceLayout.start(); self.addEventListener('message', function(e) { var info = e.data; if(info.moveMap){ dataModel.sm().cs(); for(var id in info.moveMap){ var data = dataModel.getDataById(id); if(data){ data.p3(info.moveMap[id]); dataModel.sm().as(data); } } } else{ reloadModel(dataModel, info); } }, false);
以下视频为在Android平板上跑3D拓扑自动布局的效果,这个例子纯粹为了玩玩Web Workers,这样折腾性能并不会提高,甚至因为来回序列化更费性能,Web Worker可以使用的场景并不太多,比较适合纯数学运算的业务逻辑,同时还需要注意跑在Worker的代码是不能操作任何界面对象,例如window和document之类的对象。
http://v.youku.com/v_show/id_XNjc1MjYzODg4.html