From dcf18a3ce73dc8698df6a2e339ce8883c7c21b97 Mon Sep 17 00:00:00 2001 From: liangdazhi Date: Tue, 2 Jan 2024 11:27:20 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8A=9B=E5=87=BA=E6=98=AF=E5=90=A6=E5=BC=80?= =?UTF-8?q?=E5=90=AF=E6=8A=97=E9=94=AF=E9=BD=BF=E5=B1=9E=E6=80=A7=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liangdazhi --- CHANGELOG.md | 5 +- README.md | 53 ++++++++++--------- .../pages/testImageAntiAliasingWithPage.ets | 11 +++- .../imageknife/ImageKnifeComponent.ets | 5 +- 4 files changed, 44 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cfaa264..bc31e01 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,9 @@ +## 2.1.2-rc.4 +- canvas新增抗锯齿 + + ## 2.1.2-rc.3 - svg图片解码改为imageSource解码 -- canvas新增抗锯齿 ## 2.1.2-rc.2 diff --git a/README.md b/README.md index 7571282..24dea47 100644 --- a/README.md +++ b/README.md @@ -107,32 +107,33 @@ imageKnifeOption = { ### ImageKnifeOption参数列表 -| 参数名称 | 入参内容 | 功能简介 | -| ---------------------------- | ------------------------------------------------------------ | ----------------------------------- | -| loadSrc | string\|PixelMap\|Resource | 图片数据源 | -| mainScaleType | ScaleType | 设置主图展示样式（可选） | -| strategy | DiskStrategy | 设置磁盘缓存策略（可选） | -| dontAnimateFlag | boolean | gif加载展示一帧（可选） | -| placeholderSrc | PixelMap\|Resource | 占位图数据源 | -| placeholderScaleType | ScaleType | 设置占位图展示样式（可选） | -| errorholderSrc | PixelMap\|Resource | 错误占位图数据源 | -| errorholderSrcScaleType | ScaleType | 设置失败占位图展示样式（可选） | -| retryholderSrc | PixelMap\|Resource | 重试占位图数据源 | -| retryholderScaleType | ScaleType | 设置重试占位图展示样式（可选） | -| thumbSizeMultiplier | number 范围(0,1] | 设置缩略图占比（可选） | -| thumbSizeDelay | number | 设置缩略图展示时间（可选） | -| thumbSizeMultiplierScaleType | ScaleType | 设置缩略图展示样式（可选） | -| displayProgress | boolean | 设置是否展示下载进度条（可选） | -| canRetryClick | boolean | 设置重试图层是否点击重试（可选） | -| onlyRetrieveFromCache | boolean | 仅使用缓存加载数据（可选） | -| isCacheable | boolean | 是否开启一级内存缓存（可选） | -| gif | {
// 返回一周期动画gif消耗的时间
loopFinish?: (loopTime?) => void
// gif播放速率相关
speedFactory?: number
// 直接展示gif第几帧数据
seekTo?: number
} | GIF播放控制能力（可选） | -| transformation | BaseTransform | 单个变换（可选） | -| transformations | Array> | 多个变换,目前仅支持单个变换（可选） | -| allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息（可选） | -| signature | ObjectKey | 自定key（可选） | -| **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** | -| imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 | +| 参数名称 | 入参内容 | 功能简介 | +| ---------------------------- | ------------------------------------------------------------ |-----------------------------------------------| +| loadSrc | string\| PixelMap\ |Resource | 图片数据源 | +| mainScaleType | ScaleType | 设置主图展示样式（可选） | +| strategy | DiskStrategy | 设置磁盘缓存策略（可选） | +| dontAnimateFlag | boolean | gif加载展示一帧（可选） | +| placeholderSrc | PixelMap\| Resource | 占位图数据源 | +| placeholderScaleType | ScaleType | 设置占位图展示样式（可选） | +| errorholderSrc | PixelMap\| Resource | 错误占位图数据源 | +| errorholderSrcScaleType | ScaleType | 设置失败占位图展示样式（可选） | +| retryholderSrc | PixelMap\| Resource | 重试占位图数据源 | +| retryholderScaleType | ScaleType | 设置重试占位图展示样式（可选） | +| thumbSizeMultiplier | number 范围(0,1] | 设置缩略图占比（可选） | +| thumbSizeDelay | number | 设置缩略图展示时间（可选） | +| thumbSizeMultiplierScaleType | ScaleType | 设置缩略图展示样式（可选） | +| displayProgress | boolean | 设置是否展示下载进度条（可选） | +| canRetryClick | boolean | 设置重试图层是否点击重试（可选） | +| onlyRetrieveFromCache | boolean | 仅使用缓存加载数据（可选） | +| isCacheable | boolean | 是否开启一级内存缓存（可选） | +| gif | {
// 返回一周期动画gif消耗的时间
loopFinish?: (loopTime?) => void
// gif播放速率相关
speedFactory?: number
// 直接展示gif第几帧数据
seekTo?: number
} | GIF播放控制能力（可选） | +| transformation | BaseTransform | 单个变换（可选） | +| transformations | Array> | 多个变换,目前仅支持单个变换（可选） | +| allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息（可选） | +| signature | ObjectKey | 自定key（可选） | +| **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** | +| imageSmoothingEnabled | boolean | 抗锯齿是否开启属性配置，设置为false时，imageSmoothingQuality失效 | +| imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 | 其他参数只需要在ImageKnifeOption对象上按需添加即可。 diff --git a/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets b/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets index b75f619..182dd1e 100644 --- a/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets +++ b/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets @@ -37,8 +37,17 @@ struct TestImageAntiAliasingWithPage { .margin(15) .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) .interpolation(ImageInterpolation.High) + Text("ImageKnife开启抗锯齿且设置为中等").fontSize(15) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingQuality: AntiAliasing.FIT_MEDIUM }).width(600).height(600) + Text("Image开启抗锯齿且设置为中等").fontSize(15) + Image($r('app.media.icon_failed')) + .width(600) + .height(600) + .margin(15) + .overlay('png', { align: Alignment.Bottom, offset: { x: 0, y: 20 } }) + .interpolation(ImageInterpolation.Medium) Text("ImageKnife未开启抗锯齿").fontSize(15) - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(600).height(600) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingEnabled: false }).width(600).height(600) Text("Image未开启抗锯齿").fontSize(15) Image($r('app.media.icon_failed')) .width(600) diff --git a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets index b5a3c7f..b263ada 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -42,7 +42,8 @@ export struct ImageKnifeComponent { private startGifLoopTime: number = 0 private endGifLoopTime: number = 0 // 抗锯齿属性 - private imageSmoothingQuality: ImageSmoothingQuality = 'low' + private imageSmoothingQuality: ImageSmoothingQuality = 'low'; + private imageSmoothingEnabled: boolean = true; defaultLifeCycle: IDrawLifeCycle = { // 展示占位图 @@ -118,7 +119,7 @@ export struct ImageKnifeComponent { }) .onReady(() => { let ctx = this.context; - ctx.imageSmoothingEnabled = true; + ctx.imageSmoothingEnabled = this.imageSmoothingEnabled; ctx.imageSmoothingQuality = this.imageSmoothingQuality; this.canvasHasReady = true; if (this.onReadyNext) {