十年前有值得分享的图片我都存在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); }); }
相关推荐
针对现有网络拓扑图布局算法多以节点分布均匀为目标,没有考虑边的布局,可能会导致生成的拓扑图中边布局不清晰,...仿真结果表明,扩展力学模型生成的拓扑图节点分布均匀,节点和边之间距离合理,布局效果得到提高。
echart拓扑图单节点拖拽.zip
网络拓扑自动布局算法几篇比较实用的算法论文,写的还可以,自己留做备份
阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云网络拓扑图阿里云...
网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络系统拓扑图网络...
用wpf绘制的从左到右布局的网络拓扑图,支持动态生成,支持缩放拉动,可以把它嵌套到winform里面,是自己辛苦找到的一个资源改变而来的.反正不吭人.
校园参考拓扑图校园参考拓扑图校园参考拓扑图校园参考拓扑图校园参考拓扑图校园参考拓扑图
电厂 MIS 功能图 拓扑图 电厂 MIS 功能图 拓扑图 电厂 MIS 功能图 拓扑图
echarts升级版关系图,网络拓扑图,资源关系图,可添加,搜索(支持高亮显示),排序,删除
等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 拓扑图+设备套餐+详解.pdf等保2.0 三级 ...
如何绘制拓扑图,如何绘制拓扑图.如何绘制拓扑图
现代化,信息化,网络化的图书馆网络拓扑图。。。
网络拓扑图动态线条实现
大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图大型网站拓扑图
网络拓扑绘图 网络拓扑绘图 网络拓扑绘图 网络拓扑绘图
思科实验拓扑图思科实验拓扑图思科实验拓扑图思科实验拓扑图思科实验拓扑图
等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+详解 (2).docx等保2.0 三级 拓扑图+设备套餐+...
Java网络拓扑图,控件自定义 (管理),控件属性显示,支持单双箭头。拓扑图编辑管理
C#实现拓扑图的绘制,利用GDI绘图逻辑实现
利用QGraphicsView、QGraphicsPixmapItem、QGraphicsLineItem实现多层子网网络拓扑图