diff --git a/CHANGELOG.md b/CHANGELOG.md index 84abada..cfaa264 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## 2.1.2-rc.3 - svg图片解码改为imageSource解码 +- canvas新增抗锯齿 ## 2.1.2-rc.2 diff --git a/README.md b/README.md index d3b6908..7571282 100644 --- a/README.md +++ b/README.md @@ -132,6 +132,7 @@ imageKnifeOption = { | allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息(可选) | | signature | ObjectKey | 自定key(可选) | | **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案(可选)** | +| imageSmoothingQuality | AntiAliasing | 抗锯齿属性配置 | 其他参数只需要在ImageKnifeOption对象上按需添加即可。 @@ -342,6 +343,14 @@ request.skipMemoryCache(true) | request.diskCacheStrategy(new NONE()) | NONE | 表示不缓存任何内容 | | request.diskCacheStrategy(new RESOURCE()) | RESOURCE | 表示只缓存转换过后的图片 | +### AntiAliasing类型展示效果 + +| 使用方法 | 类型 | 策略描述 | +|-------------------------|--------|-------------| +| AntiAliasing.FIT_HIGH | String | 图像抗锯齿设置为高画质 | +| AntiAliasing.FIT_MEDIUM | String | 图像抗锯齿设置为中画质 | +| AntiAliasing.FIT_LOW | String | 图像抗锯齿设置为低画质 | + ### ScaleType类型展示效果 | 使用方法 | 类型 | 策略描述 | diff --git a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets index 77024bd..448e170 100644 --- a/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets +++ b/entry/src/main/ets/pages/imageknifeTestCaseIndex.ets @@ -286,6 +286,13 @@ struct IndexFunctionDemo { router.pushUrl({ url: "pages/testManyGifLoadWithPage" }); }).margin({ top: 5, left: 3 }) }.width('100%').height(60).backgroundColor(Color.Pink) + Text('测试图片抗锯齿').fontSize(15) + Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Button('测试图片抗锯齿') + .onClick(() => { + router.pushUrl({ url: 'pages/testImageAntiAliasingWithPage' }); + }).margin({ top: 5, left: 3 }) + }.width('100%').height(60).backgroundColor(Color.Pink) } } .width('100%') diff --git a/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets b/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets new file mode 100644 index 0000000..b75f619 --- /dev/null +++ b/entry/src/main/ets/pages/testImageAntiAliasingWithPage.ets @@ -0,0 +1,53 @@ +/* + * Copyright (C) 2021 Huawei Device Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +import { ImageKnifeComponent,AntiAliasing } from '@ohos/libraryimageknife' +import { ImageKnifeOption } from '@ohos/libraryimageknife' +import { RotateImageTransformation } from '@ohos/libraryimageknife' +import { RoundedCornersTransformation } from '@ohos/libraryimageknife' + +@Entry +@Component +struct TestImageAntiAliasingWithPage { + @State imageKnifeOption1: ImageKnifeOption = + { + loadSrc: $r('app.media.icon_failed'), + }; + + build() { + Scroll() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Text("ImageKnife开启抗锯齿").fontSize(15) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1,imageSmoothingQuality: AntiAliasing.FIT_HIGH }).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.High) + Text("ImageKnife未开启抗锯齿").fontSize(15) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).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 } }) + } + } + .width('100%') + .height('100%') + } +} \ No newline at end of file diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json index be0efeb..82b2574 100644 --- a/entry/src/main/resources/base/profile/main_pages.json +++ b/entry/src/main/resources/base/profile/main_pages.json @@ -33,6 +33,7 @@ "pages/SignatureTestPage", "pages/hspCacheTestPage", "pages/testManyNetImageLoadWithPage", - "pages/testManyGifLoadWithPage" + "pages/testManyGifLoadWithPage", + "pages/testImageAntiAliasingWithPage" ] } \ No newline at end of file diff --git a/library/index.ets b/library/index.ets index 3e714af..942b184 100644 --- a/library/index.ets +++ b/library/index.ets @@ -97,7 +97,7 @@ export { ImageKnife } from './src/main/ets/components/imageknife/ImageKnife' export { ImageKnifeGlobal } from './src/main/ets/components/imageknife/ImageKnifeGlobal' export { ObjectKey } from './src/main/ets/components/imageknife/ObjectKey' export {RequestOption,Size,DetachFromLayout} from './src/main/ets/components/imageknife/RequestOption' -export { ImageKnifeComponent, ScaleType, ScaleTypeHelper } from './src/main/ets/components/imageknife/ImageKnifeComponent' +export { ImageKnifeComponent, ScaleType, ScaleTypeHelper, AntiAliasing} from './src/main/ets/components/imageknife/ImageKnifeComponent' export { ImageKnifeDrawFactory } from './src/main/ets/components/imageknife/ImageKnifeDrawFactory' export {ImageKnifeOption,CropCircleWithBorder,Crop,GifOptions,TransformOptions} from './src/main/ets/components/imageknife/ImageKnifeOption' export { ImageKnifeData } from './src/main/ets/components/imageknife/ImageKnifeData' diff --git a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 5a55812..b5a3c7f 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -41,6 +41,8 @@ export struct ImageKnifeComponent { private gifLoopDuration: number = 0 private startGifLoopTime: number = 0 private endGifLoopTime: number = 0 + // 抗锯齿属性 + private imageSmoothingQuality: ImageSmoothingQuality = 'low' defaultLifeCycle: IDrawLifeCycle = { // 展示占位图 @@ -115,6 +117,9 @@ export struct ImageKnifeComponent { } }) .onReady(() => { + let ctx = this.context; + ctx.imageSmoothingEnabled = true; + ctx.imageSmoothingQuality = this.imageSmoothingQuality; this.canvasHasReady = true; if (this.onReadyNext) { LogUtil.log('ImageKnifeComponent onReadyNext is running!') @@ -793,6 +798,15 @@ export enum FrameDisposalType { DISPOSE_PreviousStatus = 3 } +export enum AntiAliasing { + // 抗锯齿设置为高画质 + FIT_HIGH = 'high', + // 抗锯齿设置为中画质 + FIT_MEDIUM = 'medium', + // 抗锯齿设置为低画质 + FIT_LOW = 'low' +} + export enum ScaleType { // 图像位于用户设置组件左上角显示,图像会缩放至全部展示 FIT_START = 1, diff --git a/sharedlibrary/src/main/ets/Index.ets b/sharedlibrary/src/main/ets/Index.ets index 4daa5e4..32c769e 100644 --- a/sharedlibrary/src/main/ets/Index.ets +++ b/sharedlibrary/src/main/ets/Index.ets @@ -99,7 +99,7 @@ export { ImageKnife } from '@ohos/imageknife' export { ImageKnifeGlobal } from '@ohos/imageknife' export {RequestOption,Size} from '@ohos/imageknife' export {ObjectKey} from '@ohos/imageknife' -export { ImageKnifeComponent, ScaleType, ScaleTypeHelper } from '@ohos/imageknife' +export { ImageKnifeComponent, ScaleType, ScaleTypeHelper, AntiAliasing} from '@ohos/imageknife' export { ImageKnifeDrawFactory } from '@ohos/imageknife' export {ImageKnifeOption,CropCircleWithBorder,Crop,GifOptions,TransformOptions} from '@ohos/imageknife' export { ImageKnifeData } from '@ohos/imageknife'