开发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)
}
}