最近一直在使用Flex技术展示数据关系。使用的是Flex开源组件Birdeye中的关系型图表(Ravis),制作graph visualization。
在使用过程中逐渐了解了Flex,这是一种使用编程的形式来制作一些动画效果的方法。比较适合我这种对flash构图能力有限,但能写写代码的用户。
因为Birdeye是开源的,可以修改源代码满足应用需求的需要。使用过程中总结出一下几点:
1. 中文支持
源代码中的例子中,默认情况下输入中文是不显示的。原因是Ravis的例子中的内嵌了字体库MyriadWebPro.ttf和 MyriadWebPro-Bold.ttf,并通过style/main.css文件将这个字体库构造字体作为工程的默认字体,但是这个库没有包含中文 字体。
网上有方法描述如何使用包含中文字体的字库作为默认字体库,参考如下
http://kevincao.com/2009/06/font-converter-update/
http://kevincao.com/2009/06/flash-font-4/
内嵌中文字体的最大问题是生成swf文件非常大,内嵌入网页很不合适。
现在的解决方法是,去掉字体的设置。不清楚后面的原理,猜测是使用系统自带的字体,估计在一些非中文操作系统上是不能显示中文的,但那有怎样呢,呵呵。
2. 可视点的设定
考虑到性能的原因,Birdeye ravis中默认设置是部分显示graph的顶点。可以通过设置VisualGrap的属性来调整:
maxVisibleDistance:int
Limit the currently visible nodes to those in a limited distance (in terms of degrees of separation) from the current root node. If showHistory is enabled, the previous root nodes will be shown regardless of this limit.
visibilityLimitActive:Boolean
Specifies if any visibility limits should be active or not. If not active, always all nodes are visible. If you have many nodes, this could have a severe impact on your performance so handle with care.
This property can be used as the source for data binding.
3. Xml输入文件中包含html格式文本来控制显示
使用<![CDATA[ 需要处理的内容]]>方式来包含html格式的内容作为xml节点的内容,而不是作为节点的属性,这样可以避免一些xml的编码问题和xml解析错误。
4. 控制graph顶点的双击效果
默认情况下,双击顶点后将以被双击的顶点为root,调用layouter算法重新布局。可以在VisualGraph中将此功能注释掉。
5. 顶点和边的标签都可以重新render ,顶点的绘制可以在primitive中重新设定
edgeLabelRenderer:IFactory
Allow to provide an EdgeLabelRenderer in order to display edge labels. The created instances must be UIComponents.
itemRenderer:IFactory
Allow the provision of an ItemRenderer (which is more precisely an IFactory). This is important to allow the Drawing of the items in a customised way. Note that any ItemRenderer will have to be a UIComponent.
然后使用vgraph.XxxRenderer = new ClassFactory(XxxRenderer);注入VisualGraph。
6. 边的绘制
IEdgeRenderer
Allow the provision of an EdgeRenderer to allow drawing of edges in a customised way. The edgeRenderer has to implement the IEdgeRenderer interface.
Ravis中提供了几种边的绘制类,也可以自己编写类似的构造边的类。