拓扑图弹力布局呈现Flickr图片搜索结果

阅读更多

十年前有值得分享的图片我都存在Flickr上，可惜yahoo收购了Flickr之后堕落​好多年，最近yahoo在梅姐带领下Flickr团队终于恢复了生机，个人免费存储空间扩充到了1T，界面用户体验也有了很大改进，图片归类及设置Tag比以前易用很多，不过我还是不满意传统改良的Web方式操作图片，我还是喜欢更有交互感的图片操作体验，借助hightopo的HT for Web的拓扑图组件写了个自己满意的搜查Flickr图片例子。

 

http://v.youku.com/v_show/id_XNjg5MjMwMTYw.html

 

Flickr提供了OpenAPI的搜索方式，到网页输入http://api.flickr.com/services/feeds/photos_public.gne?tags=hightopo&format=json的链接，基本原理就一目了然，通过修改url的tags=内容，即可实现搜索不同tag图片的结果。这个url返回的是个jsonp的函数回调jsonFlickrFeed({…})，关于jsonp主要就是用来解决跨域访问的安全问题，我们只需要实现处理数据jsonFlickrFeed等着flickr服务器下发回调即可，jsonp的文章已经很多再次不再详述。

输入框每次输入关键字后我构建了个document.createElement(‘script’)，同时避免DOM无限制增长删除了上次查询的结果，当然也不删也问题不大，只不过对我这种有代码洁癖者，看到DOM上有没用的元素我就很不爽。

                searchJS = document.createElement('script');                
                searchJS.setAttribute('src', 'http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tag + '&format=json');
                document.getElementsByTagName('head')[0].appendChild(searchJS);

剩下就很简单了,在jsonFlickrFeed函数里面遍历Flickr返回的图片数组信息，每个元素的title就是图片名称，media.m就是图片路径，根据这些信息创建每个相应的图元，然后通过new ht.layout.ForceLayout(g2d).start()构建一个弹力布局器去自动布局就完事了。

这个视频搜索了hightopo、girl和cr7关键字的效果，再有两个小时西甲的重头戏皇马和巴萨就要开展了，明天还要工作我只能洗洗睡吧，在此祝我喜欢的CR7能进球。

以下为本例子的所有js代码

function init(){ input = ht.Default.createElement('input', null, null, 'hightopo'); input.onkeypress = function(e){ if (e.keyCode === 13){ search(); } }; items = [ { element: input }, { label: 'Clear', action: function(){ dataModel.clear(); } } ]; dataModel = new ht.DataModel(); g2d = new ht.graph.GraphView(dataModel); toolbar = new ht.widget.Toolbar(items); borderPane = new ht.widget.BorderPane(); borderPane.setTopView(toolbar); borderPane.setCenterView(g2d); view = borderPane.getView(); view.className = 'main'; document.body.appendChild(view); window.addEventListener('resize', function (e) { borderPane.invalidate(); }, false); forceLayout = new ht.layout.ForceLayout(g2d); forceLayout.start(); } function search() { if (window.searchJS) { document.getElementsByTagName('head')[0].removeChild(searchJS); } var tag = input.value; searchJS = document.createElement('script'); searchJS.setAttribute('src', 'http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tag + '&format=json'); document.getElementsByTagName('head')[0].appendChild(searchJS); root = new ht.Node(); root.s({ 'shape': 'circle', 'shape.gradient': 'radial.center', 'shape.background': '#E74C3C', 'label': tag, 'label.background': 'yellow', 'select.width': 0 }); root.setSize(30, 30); dataModel.add(root); return root; } function jsonFlickrFeed(datas) { datas.items.forEach(function(item){ var node = new ht.Node(); node.a(item); node.setName(item.title); node.s({ 'label.background': 'yellow' }); node.setImage(item.media.m); dataModel.add(node); var edge = new ht.Edge(root, node); edge.s({ 'edge.3d': true, 'edge.width': 4, 'edge.color': '#1ABC9C' }); dataModel.add(edge); }); }