您的位置：首页 > 其它

使用图形滤镜来扩展基本的组件

2008-04-28 14:36 351 查看

使用图形滤镜来扩展基本的组件

AndrewTrice
April23,2008|Permalink|Comments(0)

在前面的帖子中我曾经讲到过如何使用图形滤镜，这篇博文中我将介绍如何使用这些滤镜来增强基本组件的能力，在本示例中我将展示如何使用滤镜来改变基本的TREE组件的外观
我曾经无数次的碰到过这个问题，那就是如何通过TREE图标来表示其当前的TREE展开状态

我总是在寻找将数据可视化的方法，这里有一个非常简单的方来来扩展一个基本的TREE组件的图标所蕴含的意味，我见过无数种的实现方式，但是我认为下面的是其中最简单的一种方法，它使用了ColorMatrixFilter来改变TREE文件夹的颜色，你可以使用这项技巧将一些文件夹分组到一起，采用特定的颜色来表示树的不同层次，根据文件夹或者是数据来改变树图标的现实状态，当然还有更多

下面就是：

varso=newSWFObject("http://www.tricedesigns.com/portfolio/colorfolders/TreeColors.swf","TreeColors","425","260","8","#FFFFFF"); so.write("treecolo

下面我就展示它是如何实现的，它使用了一个定制的ITEMRENDER，该render扩展了TREEITEMRENDER类，在commitProperties方法中，应用了ColorMatrixFilter过滤当前文件夹的图标，就是这么简单，而没有什么更换图标或者是替代之类的。

overrideprotectedfunctioncommitProperties():void

...{

super.commitProperties();

if(icon)

...{

varmatrix:Array=newArray();

switch(TreeListData(listData).depth)

...{

case1:

matrix=matrix.concat([1,0,0,0,0]);//red

matrix=matrix.concat([0,.25,0,0,0]);//green

matrix=matrix.concat([0,0,.25,0,0]);//blue

matrix=matrix.concat([0,0,0,1,0]);//alpha

icon.filters=[newColorMatrixFilter(matrix)]

break;

case2:

matrix=matrix.concat([.25,0,0,0,0]);//red

matrix=matrix.concat([0,1,0,0,0]);//green

matrix=matrix.concat([0,0,.25,0,0]);//blue

matrix=matrix.concat([0,0,0,1,0]);//alpha

icon.filters=[newColorMatrixFilter(matrix)]

break;

case3:

matrix=matrix.concat([.25,0,0,0,0]);//red

matrix=matrix.concat([0,.25,0,0,0]);//green

matrix=matrix.concat([0,0,1,0,0]);//blue

matrix=matrix.concat([0,0,0,1,0]);//alpha

icon.filters=[newColorMatrixFilter(matrix)]

break;

default:

icon.filters=[];

break;

}

}

}

当然这些代码在定制的TREE图标上也可以工作

varso=newSWFObject("http://www.tricedesigns.com/portfolio/colorfolders/CustomFolderTreeColors.swf","CustomFolderTreeColors","425","260","8","#FFFFFF"); so.write("CustomFolderTreeColors");
源代码链接：
http://www.tricedesigns.com/portfolio/colorfolders/srcview/index.html

http://www.tricedesigns.com/portfolio/colorfolders/srcview/TreeColors.zip.html

Note:Thereare2separatefilesinthere"TreeColors.mxml"and"CustomFolderTreeColors".Theonlydifferencebetweenthesetwoarethespecificationofcustomfoldericons.

UsingGraphicsFilterstoExtendBasicComponents

AndrewTrice
April23,2008|Permalink|Comments(0)

I'vediscussedgraphicsfilterspreviously,andhere'satricktousethemtoextendthecapabilitiesofbasicFlexcontrols.Inthisexample,graphicsfilterswillbeusedtoaltertheappearanceofabasictreecontrol.I'verunintothisscenarionumeroustimes...Howcanyouchangetheappearanceoftreefoldericonstoimplymeaningtothebranchesofthetree?

I'malwayslookingforwaystovisualizedata,andthisisaveryeasywaytoextendabasictreecontroltoaddmeaningtoit.I'veseendifferentimplementations,butIthinkthisistheeasiestsofar.ThistechniqueusesaColorMatrixFiltertochangethecolorsofthetreefolders.Youcouldusethistechniquetovisuallygroupspecificfolderstogether,showspecifictreelevelsinspecificcolors,changecolordependinguponfoldercontentsordata,etc...Therearealotofapplicationsforthis.

Hereitis:

varso=newSWFObject("http://www.tricedesigns.com/portfolio/colorfolders/TreeColors.swf","TreeColors","425","260","8","#FFFFFF"); so.write("treecolors");

Now,here'showitworks.ItusesacustomitemrendererthatextendstheTreeItemRendererclass.WithinthecommitPropertiesmethod,aColorMatrixFilterisappliedtotheexistingfoldericon(the"icon"property).It'sthatsimple...Thereisnocustomdrawingorimagesubstitutionnecessary.

overrideprotectedfunctioncommitProperties():void
{
	super.commitProperties();
	
	if(icon)
	{
		varmatrix:Array=newArray();
		
		switch(TreeListData(listData).depth)
		{
			case1:
				matrix=matrix.concat([1,0,0,0,0]);//red
				matrix=matrix.concat([0,.25,0,0,0]);//green
				matrix=matrix.concat([0,0,.25,0,0]);//blue
				matrix=matrix.concat([0,0,0,1,0]);	//alpha
				icon.filters=[newColorMatrixFilter(matrix)]
				break;
			case2:
				matrix=matrix.concat([.25,0,0,0,0]);//red
				matrix=matrix.concat([0,1,0,0,0]);//green
				matrix=matrix.concat([0,0,.25,0,0]);//blue
				matrix=matrix.concat([0,0,0,1,0]);	//alpha
				icon.filters=[newColorMatrixFilter(matrix)]
				break;
			case3:
				matrix=matrix.concat([.25,0,0,0,0]);//red
				matrix=matrix.concat([0,.25,0,0,0]);//green
				matrix=matrix.concat([0,0,1,0,0]);//blue
				matrix=matrix.concat([0,0,0,1,0]);	//alpha
				icon.filters=[newColorMatrixFilter(matrix)]
				break;
			default:
				icon.filters=[];
				break;
		}
	}
}

Thiswillalsoworkontopofcustomfoldericons,asyoucanseehere:

varso=newSWFObject("http://www.tricedesigns.com/portfolio/colorfolders/CustomFolderTreeColors.swf","CustomFolderTreeColors","425","260","8","#FFFFFF"); so.write("CustomFolderTreeColors");

Youcanviewthefullsourcecodehere:
http://www.tricedesigns.com/portfolio/colorfolders/srcview/index.html

Youcandownloadtheapplicationsourcecodehere:
http://www.tricedesigns.com/portfolio/colorfolders/srcview/TreeColors.zip.html

Note:Thereare2separatefilesinthere"TreeColors.mxml"and"CustomFolderTreeColors".Theonlydifferencebetweenthesetwoarethespecificationofcustomfoldericons.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航