开发UI时,当我们的原图分辨率较低并且需要放大显示时,图片会模糊并出现锯齿。如下图所示
这时可以使用interpolation()方法对图片进行插值,使图片显示得更清晰。该方法的参数为ImageInterpolation枚举类型,可选的值有:
ImageInterpolation.None
: 不使用图片插值。
ImageInterpolation.High
: 高质量插值,可能会影响图片渲染的速度。
ImageInterpolation.Medium
: 中等质量插值。
ImageInterpolation.Low
: 低等质量插值。
各选项效果如下图所示
具体案例
@Entry
@Component
struct ImageInterpolationPage {build() {Column({ space: 50 }) {Row({ space: 20 }) {Column() {Image($r('app.media.img_flower')).width('500px').height('500px').interpolation(ImageInterpolation.None)Text('None')}Column() {Image($r('app.media.img_flower')).width('500px').height('500px').interpolation(ImageInterpolation.Low)Text('Low')}}Row({ space: 20 }) {Column() {Image($r('app.media.img_flower')).width('500px').height('500px').interpolation(ImageInterpolation.Medium)Text('Medium')}Column() {Image($r('app.media.img_flower')).width('500px').height('500px').interpolation(ImageInterpolation.High)Text('High')}}}.width('100%').height('100%').justifyContent(FlexAlign.Center)}
}