`
iMzw
  • 浏览: 193929 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex中使用滤镜

    博客分类:
  • Flex
阅读更多
最近在OrgChart中加入了一个放大镜的功能,使用的是FLEX 3.2之后的一个新的功能,嵌入Pixel Bender Toolkit 写的滤镜。顺便把实现的代码贴出来大家共享一下。滤镜文件在附件。

///////////////////////////////////////////////////////////////////////////////////
			// 放大镜功能
			///////////////////////////////////////////////////////////////////////////////////
			
			private var useMagnifier:Boolean = false;
			private function magnifierTool():void{
				if(useMagnifier){
					useMagnifier = false;
					magnifier.toolTip = "打开放大镜";
					
					stage.removeEventListener( Event.ENTER_FRAME, onEnterFrame);
					orgChartContainer.filters = [];
					
					
					if(resizeEffect.isPlaying){
						resizeEffect.stop();
					}
					resizeEffect.heightTo = 0;
					resizeEffect.play([settingContainer]);
				}else{
					useMagnifier = true;
					magnifier.toolTip = "关闭放大镜";

					stage.addEventListener( Event.ENTER_FRAME, onEnterFrame, false, 0, true );
					
					if(resizeEffect.isPlaying){
						resizeEffect.stop();
					}
					resizeEffect.heightTo = 130;
					resizeEffect.play([settingContainer]);
				}
			}
			
			[Embed(source="assets/magnify.pbj", mimeType="application/octet-stream")]
			private var shaderObj:Class;

			private var shader:Shader;

			private var shaderFilter:ShaderFilter;

			/**
			 * Initialize the shader
			 */
			private function initShader():void{
				// create the shader
				shader = new Shader( new shaderObj() );
				shader.data.center.value = [orgChartContainer.width/2, orgChartContainer.height/2];
				//setShader();
			}

			/**
			 * Each frame, only reapply the filter if necessary
			 */
			private function onEnterFrame( event:Event ):void{
				setShader();
			}

			/**
			 * Update all the shader's properties, create a new ShaderFilter,
			 * and reapply it to the orgChartContainer
			 */
			private function setShader():void{
				var centerX:Number = orgChartContainer.mouseX;
				var centerY:Number = orgChartContainer.mouseY;
				if( centerX < 0 || centerY < 0 || centerX > orgChartContainer.width || centerY > orgChartContainer.height )
				{
					var currentX:Number = shader.data.center.value[0];
					var currentY:Number = shader.data.center.value[1]
					centerX = currentX + ((orgChartContainer.width / 2)-currentX) / 2;
					centerY = currentY + ((orgChartContainer.height / 2)-currentY) / 2;
				}

				shader.data.center.value = [centerX, centerY];
				shader.data.innerRadius.value = [innerRadiusSlider.value];
				shader.data.outerRadius.value = [outerRadiusSlider.value];
				shader.data.magnification.value = [magnificationSlider.value];
				shaderFilter = new ShaderFilter( shader );
				orgChartContainer.filters = [shaderFilter];
			}
1
0
分享到:
评论

相关推荐

    Flex滤镜效果

    Flex滤镜效果广泛应用于UI设计中,例如: - **闪烁效果**:在按钮或图标上添加闪烁效果,吸引用户的注意力。 - **模糊效果**:对背景图像应用模糊滤镜,使焦点集中在前景元素上。 - **颜色调整**:调整图像的颜色,...

    Flex中的各种滤镜

    在Flex这个强大的基于ActionScript 3.0的开源框架中,滤镜是为图形和文本添加视觉效果的重要工具。滤镜允许开发者创建出各种各样的视觉特效,如模糊、灰度、铅笔画等,极大地丰富了用户界面的视觉表现力。让我们深入...

    flex放大镜、flex滤镜、flex图像放大、局部图像放大

    在给定的标题和描述中,“flex放大镜”、“flex滤镜”、“flex图像放大”以及“局部图像放大”都是关于如何利用Flex来增强图像展示效果的关键概念。下面将详细解释这些知识点。 1. Flex放大镜(Magnifying Glass)...

    好看的flex滤镜 可以下载来看看了

    Flex滤镜,作为Adobe Flex框架的一部分,为开发者提供了一种强大的方式来改变和增强应用程序中的显示对象。Flex是一个开放源代码的框架,主要用于构建富互联网应用程序(RIA),它基于ActionScript和Flash Player或...

    flex滤镜实例以及源码……

    import mx.events.FlexEvent; import mx.events.ListEvent; import mx.events.NumericStepperEvent; import mx.events.SliderEvent; //聚焦模糊 [Embed(source="pbj/zoomBlur.pbj",mimeType=...

    flex的生成工具套

    滤镜是Flex中增强视觉效果的重要手段,可以应用在任何可视对象上,如图像、文本或组件。滤镜包括模糊、渐变发光、投影等,能为UI添加深度、动态感和专业性。通过Filter Explorer,开发者可以实时预览并调整滤镜参数...

    Flex样式设计工具

    滤镜是Flex中增强视觉效果的重要工具,它们可以应用于组件,实现如模糊、渐变、发光等特效。这个工具提供了一个直观的界面,让用户能够尝试不同滤镜组合,观察其在组件上的效果,从而提升Flex应用程序的视觉吸引力。...

    flex 滤镜样式在线预览

    NULL 博文链接:https://baixiaozhe.iteye.com/blog/1249597

    FLEX效果展示的SWF

    标题中的"FLEX效果展示的SWF"指的是使用Adobe Flex技术创建的SWF(Shockwave Flash)文件,这些文件用于展示Flex应用程序的各种视觉效果。Flex是一个开源的开发框架,主要用于构建富互联网应用程序(RIA),它基于...

    flex 图片操作

    在本话题中,我们将探讨“flex图片操作”,这涉及到如何使用Flex来处理和展示图片,包括调整角度和应用滤镜等视觉效果。 一、Flex中的图片显示 在Flex中,我们可以使用`mx.controls.Image`组件来显示图片。这个...

    flex_video_帮助

    Flex Video 是一种在 Adobe Flash 和 Adobe Flex 平台上使用的视频播放组件,它允许开发者将实时视频或预录视频集成到 SWF 文件中。通过使用 Flex Video,可以创建高质量的流媒体视频体验,支持 Flash Video (FLV) ...

    flex 图片编辑器

    在Flex中,可以使用BitmapData类来处理像素级别的图像数据,实现各种图像处理算法。 6. **事件驱动编程**:Flex应用是事件驱动的,用户操作会触发事件,如点击按钮、拖动滑块等。开发者需要监听并响应这些事件,...

    Flex3样式设计工具4IN1Flex3样式设计工具4in1.rar

    在Flex3中,样式设计是提升用户界面美观度和一致性的重要手段。这个"Flex3样式设计工具4in1.rar"是一个压缩包,包含了多个与Flex3样式设计相关的工具和资源,帮助开发者更有效地管理及定制应用的外观。 1. **Flex3 ...

    Flex自动生成css,框架,图片工具3合1

    总结来说,这个压缩包提供的工具集是Flex开发者探索和提升其技能的重要资源,涵盖了滤镜、基本图形以及组件样式的各个方面,对于深入理解和使用Flex框架有着极大的辅助作用。无论是初学者还是经验丰富的开发者,都...

    Flex2的几个行为动画源码

    在Flex中,可以使用Resize行为来改变组件的尺寸,例如响应用户的拖动或者随着时间的推移自动调整大小。 3. **BlurExample**: 这个例子涉及到了图形模糊效果的应用。Flex2提供了Blur滤镜,可以对任何显示对象进行...

    8个权威插件滤镜

    在图像处理领域,插件滤镜是Photoshop等专业图像编辑软件的重要组成部分,它们能够极大地扩展软件的功能,帮助...在使用过程中,理解每个滤镜的工作原理和参数调整对最终结果的影响至关重要,这需要不断实践和学习。

    Flex组件风格预览程序3in1

    Flex2FilterExplorer则专注于Flex2中的滤镜效果。滤镜是Flex中增强图形外观的重要工具,它们可以用于添加模糊、渐变、发光等视觉效果。通过此工具,用户可以直观地看到各种滤镜应用在组件上的效果,从而更好地运用到...

Global site tag (gtag.js) - Google Analytics