跳到主要内容

@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代码检查