返回 导航

Flex

hangge.com

Flex - 图片的平滑处理(解决图片有锯齿问题)

作者:hangge | 2016-11-05 09:20
有时 Flex 中显示图片(不管是从外部加载的,还是编译时就嵌进来的)。如果调整了尺寸或者进行缩放,会发现图片失真有锯齿,不够清晰。

我们只需要对图片进行平滑处理即可解决问题。这样图片就不会那么模糊粗糙了。效果图如下:


1,设置Image组件的平滑属性

(1)对于 Flex3 Image 组件,将 smoothBitmapContent 属性设置为 true 即可。
<mx:Image source="@Embed(source='humiture.png')" width="60" height="60"  smoothBitmapContent="true"/>

(2)对于 Flex4 Image 组件,将 smooth 属性设置为 true 即可。
<s:Image  source="@Embed(source='humiture.png')"  width="60" height="60" smooth="true"/>

2,对Bitmap进行平滑处理

我们除了设置 Image 属性实现平滑外,还可以对 BitmapData 进行平滑处理。
(1)比如下面样例,我们从 Image 中获取 BitmapData,再用这个 BitmapData 生成一个新的平滑的 Bitmap。最后再将这个 Bitmap 赋值给 Image,从而实现平滑图片的显示。
try{
	 //从Image中读bitmapData
	 var bitmapData:BitmapData = Bitmap(image1.content).bitmapData;  
	 //生成新的Bitmap,并做平滑处理
	 var bitmap:Bitmap = new Bitmap(bitmapData);
	 bitmap.smoothing = true; 
	 bitmap.pixelSnapping = PixelSnapping.ALWAYS;
	 //将设置好的bitmap赋值给Image实例
	 image1.source = bitmap; 
}catch(e:TypeError) {
	trace(e);
}

(2)又比如 Sprite 里面 Embed 进来的图片,可以这么做平滑处理。
package ui.largeScreen
{
	import flash.display.Bitmap;
	import flash.display.PixelSnapping;
	import flash.display.Sprite;

	public class DarkTempAndHumSprite extends Sprite
	{
		[Embed(source='assets/Leak.png')]
		private var LeakSymbol:Class;
		
		public function DarkTempAndHumSprite() {
			super();
			draw();
		}
		
		private function draw():void{
			//生成新的Bitmap,并做平滑处理
			var bitmap:Bitmap = new LeakSymbol() as Bitmap;   
			bitmap.smoothing = true;
			bitmap.pixelSnapping = PixelSnapping.ALWAYS;
			bitmap.x = -bitmap.width/2;
			bitmap.y = -bitmap.height/2;
			this.addChild(bitmap);
		}
	}
}
评论

全部评论(0)

回到顶部