@correctness/image-interpolation-check
在使用Image组件interpolation接口时,建议不要使用最邻近插值,避免出现明显锯齿问题。
规则配置
// code-linter.json5
{
"rules": {
"@correctness/image-interpolation-check": "warn"
}
}
选项
该规则无需配置额外选项。
正例
const ADAPTIVE_SCALE = 1.5;
@Component
export struct AppIcon {
@State icon: string | PixelMap = '';
@Prop iconSize: number = 1;
private mInterpolation: ImageInterpolation = ImageInterpolation.None;
aboutToAppear(): void {
this.mInterpolation = ImageInterpolation.Medium;
}
@Builder
overlayIcon() {
Image(this.icon)
.height(this.iconSize * ADAPTIVE_SCALE)
.width(this.iconSize * ADAPTIVE_SCALE)
.interpolation(ImageInterpolation.Medium)
}
@Builder
overlayIcon1() {
Image(this.icon)
.height(this.iconSize * ADAPTIVE_SCALE)
.width(this.iconSize * ADAPTIVE_SCALE)
.interpolation(this.mInterpolation)
}
build() {
Column() {
this.overlayIcon();
this.overlayIcon1();
Image($r('app.media.pause'))
.draggable(false)
.interpolation(ImageInterpolation.Medium)
}
}
}
反例
const ADAPTIVE_SCALE = 1.5;
@Component
export struct AppIcon {
@State icon: string | PixelMap = '';
@Prop iconSize: number = 1;
private mInterpolation: ImageInterpolation = ImageInterpolation.Medium;
aboutToAppear(): void {
this.mInterpolation = ImageInterpolation.None;
}
@Builder
overlayIcon() {
Image(this.icon)
.height(this.iconSize * ADAPTIVE_SCALE)
.width(this.iconSize * ADAPTIVE_SCALE)
// warning
.interpolation(ImageInterpolation.None)
}
@Builder
overlayIcon1() {
Image(this.icon)
.height(this.iconSize * ADAPTIVE_SCALE)
.width(this.iconSize * ADAPTIVE_SCALE)
// warning
.interpolation(this.mInterpolation)
}
build() {
Column() {
this.overlayIcon();
this.overlayIcon1();
Image($r('app.media.pause'))
.draggable(false)
// warning
.interpolation(ImageInterpolation.None)
}
}
}
规则集
plugin:@correctness/all
Code Linter代码检查规则的配置指导请参考Code Linter代码检查。