昨天在PickDay上看评论.不经意间发现Blog右端有一个3D效果的标签云-Tag Cloud. 字体设置大致为西方的古典字体.很有意思. 以前在做Jquery & Ajax前端开发时常常在AjaxRain和AjaxDaddy上看到一些Jquerys平面或是利用Flash效果实现的标签云. 其实在Web2.0刚开始兴盛时.这个标签云Tag Cloud对大家而言就已经不是很陌生了.而首先使用标签云的一家高知名度的网站---照片共享网站Flickr,现在你在Filckr图片发掘中依然能够看到简单的平面[2D]标签云.
标签云的设计者是交互设计师Stewart Butterfield也就是Flickr站点创始人之一.标签云(Tag Cloud)是用以表示一个网站中的内容标签。标签的排列顺序一般依照字典排序，按照热门程度确定字体的大小和颜色。这样依照字典或者热门程度来寻找信息便成为可能。标签通常是超链接，指向具体分类页面.在Web2.0中被广泛使用.
而目前随着发展Tag Cloud也出现多种设计方案.Mark Norman Francis 发布在 24Ways 站点的文章中分别讨论了几种流行的 Tag Cloud ,并分别指出各种Tag Cloud设计上优缺点.并在最后给出了作者认为最合适的方案.当然以上都做为你对Tag Cloud一个了解.有了Silverlight 对于平面的2D通过点击量来改变样式的Tag Cloud 我们好像并不是很干兴趣. 那是因为Silverlight 能为Tag Cloud提供更多3D效果和图像润色上支持. 不然的话真有点大材小用的意味.
如下会演示一个用Silverlight来实现3D效果Tag Cloud. 当然是通用的.可能会有点粗糙.因为这里面样式和素材都是用Visual Studio 2010中设计的.没有用Express bland美化 但是基本的效果是出来: 如下
这篇文章利用业余时间写了足足有了一周时间. 可惜的是到目前为止 我用Silverlight 4 版本实现这个TagCloud效果作出只是一个半成品. 其中3D随鼠标旋转的效果一直没有成功.主要是关于一个3D层面实现滚动效果需要一个算法控制 算法中用到大量数学函数. 最后自己摸索只能是单单一个Cavon上拖动. 无果而终.
如上TagCloud效果是在请教Michael.Koenings在其Blog trivadis上实现,但是我发现Michael.Koenings TagCloud 实现 基于Silverlight 版本3的. 我就决定利用最新版本的SL 4来重新实现,从版本2 过渡来大都知道那时SL 2版本对3D支持并不是非常友好. 在SL 3中引入透视化3D 最新 SL4 中得到进一步增强.对3D改善更加细化, 由于基于SL 3建立高速3D实现,3D效果大多借助 第三方3D组件来填充. 上面Tag Cloud 借助的 . Axeleratesl3d
思索再三还是决定把这个关于TagCloud在Silverlight实现问题给抛出来. 我在3D层和鼠标触屏移动效果关联时 无法实现. 确切的说就是一直卡在这个地方.总体实现思路可以大体分为通用四个步骤.
<1>获取相关关于Tag数据并格式化处理
<2>TagCloud关于3D渲染效果实现[SL 4已经是很简单工作]
<3>Silverlight中 3D标签层与 鼠标动作关联
<4>就是通过点击次数来对TagCloud字体和颜色[当然你可以做更多属性] 进行突出显示.
SL 4对3D 强大支持依然没有让我解决这个问题. 如果你有更好的思路和方式来实现这个TagCloud.或是能够解决3D旋转的标签层于鼠标事件进行同步关联效果,或是相关替代思路 当然是版本最好基于SL 4. 这个问题足足困扰了我一周时间. 如下我会详细提供关于关于TagCloud 在Silverlight实现3D实现相关资料和思路[请参见后面链接] 和如上实现TagCloud 在SL 3版本全部源码[很珍贵,这是Michael.Koenings 本人重新修改后找到一个备份版本源码 原来是已经丢失].如有任何疑问和问题 请留言中提出 我会及时回复.
推荐关于TagCloud -Silverlight实现经典几篇文章:
Creating a 3D tagcloud in Silverlight (part 1) [提供了通用的在Silverlight中实现TagCloud具体思路和方式 写的很经典.]
Creating a 3D tagcloud in Silverlight (part 2)
Creating a Silverlight TagCloud UserControl.[一个精简版的Silverlight TagCloud实现 关注3D]
关于TagCloud实现SL 3版本源码见附件。附件：http://down.51cto.com/data/2359683
本文转自chenkaiunion 51CTO博客，原文链接:http://blog.51cto.com/chenkai/764713
