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

(1)比如下面样例,我们从 Image 中获取 BitmapData,再用这个 BitmapData 生成一个新的平滑的 Bitmap。最后再将这个 Bitmap 赋值给 Image,从而实现平滑图片的显示。
(2)又比如 Sprite 里面 Embed 进来的图片,可以这么做平滑处理。

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

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)