Flex图片处理问题抛砖引玉！

Flex中裁剪图片图标

最新推荐文章于 2024-08-21 20:33:49 发布

最新推荐文章于 2024-08-21 20:33:49 发布 · 127 阅读

文章标签：

#Flex #CSS #XML

本文介绍了一种在Flex中从复合图片资源中提取单个图标的方法，通过使用自定义Image组件并结合ActionScript实现图片区域裁剪。

最近碰到个很郁闷的问题！

问题如下：
图片为
[img]http://dl.iteye.com/upload/attachment/169178/701ff92d-245e-3265-952e-e6a6ab44f280.png[/img]

我想要取出其中的一个图标！
css 当中可以这样做
.panel{
background: transparent url('images/frame1.png') no-repeat 0px -25px;
}
但Flex似乎好像不可以，找了好久，也没找到解决方案！

这个方案想了好久才出来，但不知道好不好，效率怎样！
没办法，刚来flex。菜鸟一个！


<?xml version="1.0" encoding="utf-8"?>
<mx:Image xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			public var loaded:Loader;

			[Bindable]
			public var imageURL:String;
			[Bindable]
			public var mywidth:Number=0;
			[Bindable]
			public var myheight:Number=0;
			[Bindable]
			public var myLeft:Number=0;
			[Bindable]
			public var myTop:Number=0;
			[Bindable]
			public var overLeft:Number=0;
			[Bindable]
			public var overTop:Number=0;

			private var bit:Bitmap;
			private var bmd1:BitmapData;
			private var bmd2:BitmapData;
			private var pt:Point;
			private var rect:Rectangle;
			public function init():void
			{
				loaded=new Loader();
				loaded.load(new URLRequest(imageURL));
				loaded.contentLoaderInfo.addEventListener(Event.COMPLETE,onload);
				if(overLeft>0 || overTop>0){
					this.addEventListener(MouseEvent.MOUSE_OVER,onover);
					this.addEventListener(MouseEvent.MOUSE_OUT,onout);
				}
			}

			public function onload(event:Event):void{
				bit=Bitmap(loaded.content);
			 	bmd1=bit.bitmapData;
				bmd2=new BitmapData(mywidth, myheight, true);
				rect=new Rectangle(myLeft, myTop, mywidth,myheight);
			 	pt=new Point(0, 0);
				bmd2.copyPixels(bmd1, rect, pt);
				var bm2:Bitmap=new Bitmap(bmd2);
				bm2.smoothing=true;
				this.addChild(bm2);
			}

			public function onover(event:MouseEvent):void{
				rect=new Rectangle(overLeft, overTop, mywidth,myheight);
				pt=new Point(0, 0);
				bmd2.copyPixels(bmd1, rect, pt);
				var bm2:Bitmap=new Bitmap(bmd2);
				bm2.smoothing=true;
				this.addChild(bm2);
			}

			public function onout(event:MouseEvent):void{
				rect=new Rectangle(myLeft, myTop, mywidth,myheight);
			 	pt=new Point(0, 0);
				bmd2.copyPixels(bmd1, rect, pt);
				var bm2:Bitmap=new Bitmap(bmd2);
				bm2.smoothing=true;
				this.addChild(bm2);
			}
		]]>
	</mx:Script>
</mx:Image>


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  xmlns:components="components.*" creationComplete="init()">
<components:image overTop="118" buttonMode="true" myLeft="0" myTop="10" mywidth="54" myheight="50" imageURL="assets/ico/start_button.png"/>
</mx:Application>

请大家看看，看有没更好的方案！