Apr 27

Flex中利用ColorMatrixFilter将图片转换为黑白图片的例子

FlexAdd comments

在编写相册等一些图片应用的时候，将彩色照片转化为黑白的是一个必不可少的功能。接下来这个例子演示了如何利用ColorMatrixFilter将图片转换为黑白图片。这其实是Flash文档的“Learning ActionScript 2.0″这本书中一个例子(click here)。这里只不过是将其在Flex中实现。更多的相关信息，可以看ColorMatrixFilter - Flex 3 Language Reference。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" backgroundColor="white"> 
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             private var rLum:Number = 0.2225;
  7.             private var gLum:Number = 0.7169;
  8.             private var bLum:Number = 0.0606; 
  9.  
  10.             [Bindable]
  11.             private var bwMatrix:Array = [rLum, gLum, bLum, 0, 0,
  12.                             rLum, gLum, bLum, 0, 0,
  13.                             rLum, gLum, bLum, 0, 0,
  14.                             0, 0, 0, 1, 0]; 
  15.  
  16.             [Bindable]
  17.             [Embed('assets/image2.jpg')]
  18.             private var image2:Class; 
  19.  
  20.         ]]>
  21.     </mx:Script> 
  22.  
  23.     <mx:ColorMatrixFilter id="cmf" matrix="{bwMatrix}" /> 
  24.  
  25.     <mx:VBox>
  26.         <mx:Label text="Black and white" />
  27.         <mx:Image source="{image2}" filters="{[cmf]}" scaleX="0.5" scaleY="0.5" />
  28.     </mx:VBox> 
  29.  
  30.     <mx:VBox>
  31.         <mx:Label text="Original" />
  32.         <mx:Image source="{image2}" scaleX="0.5" scaleY="0.5" />
  33.     </mx:VBox>     
  34.  
  35. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

Leave a Reply