diff --git a/README.md b/README.md index f17bd4b..1d43992 100644 --- a/README.md +++ b/README.md @@ -484,6 +484,32 @@ request.skipMemoryCache(true) +其他变换相关属性，可叠加实现组合变换效果 + +圆形裁剪变换示例 + +``` +ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: $r('app.media.jpgSample'), + mainScaleType: ScaleType.CENTER_CROP, + circleCropBorder: { cornerRadius: 150 } + } +}).width(300).height(300) +``` + +圆形裁剪带边框变换示例 + +``` +ImageKnifeComponent({ + imageKnifeOption: { + loadSrc: $r('app.media.jpgSample'), + mainScaleType: ScaleType.CENTER_CROP, + circleCropBorder: { cornerRadius: 150, colorString: Color.Red, borderWidth: 2 } + } +}).width(300).height(300) +``` + ### setLruCacheSize setLruCacheSize(size: number,memory:number): void diff --git a/entry/src/main/ets/pages/transformsPage.ets b/entry/src/main/ets/pages/transformsPage.ets index 7804142..fe61a80 100644 --- a/entry/src/main/ets/pages/transformsPage.ets +++ b/entry/src/main/ets/pages/transformsPage.ets @@ -18,14 +18,12 @@ import { ImageKnifeOption, RotateImageTransformation, SketchFilterTransformation, - CropCircleTransformation, ToonFilterTransform, VignetteFilterTransform, BaseTransform, BlurTransformation, BrightnessFilterTransformation, InvertFilterTransformation, - CropCircleWithBorderTransformation, CropSquareTransformation, CropTransformation, CropType, @@ -35,7 +33,8 @@ import { SepiaFilterTransformation, MaskTransformation, SwirlFilterTransformation, - KuwaharaFilterTransform + KuwaharaFilterTransform, + ScaleType } from '@ohos/libraryimageknife' @Entry @@ -51,9 +50,6 @@ struct transformsPage { private blurTransformation: BlurTransformation = new BlurTransformation(15, 3); private brightnessFilterTransformation: BrightnessFilterTransformation = new BrightnessFilterTransformation(0.5); private contrastFilterTransformation: ContrastFilterTransformation = new ContrastFilterTransformation(2.0); - private cropCircleTransformation: CropCircleTransformation = new CropCircleTransformation(); - private cropCircleWithBorderTransformation: CropCircleWithBorderTransformation = - new CropCircleWithBorderTransformation(16, { r_color: 100, g_color: 100, b_color: 100 }); private cropSquareTransformation: CropSquareTransformation = new CropSquareTransformation(); private cropTransformation: CropTransformation = new CropTransformation(100, 100, CropType.CENTER); private grayscaleTransformation: GrayscaleTransformation = new GrayscaleTransformation(); @@ -73,6 +69,8 @@ struct transformsPage { private kuwaharaFilterTransform: KuwaharaFilterTransform = new KuwaharaFilterTransform(10); private toonFilterTransform: ToonFilterTransform = new ToonFilterTransform(0.3, 10.0); private vignetteFilterTransform: VignetteFilterTransform = new VignetteFilterTransform([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]); + private isCropCircle: boolean = false; + private isCropCircleWithBorder: boolean = false; build() { Scroll() { @@ -139,15 +137,7 @@ struct transformsPage { .width(32) .height(32) .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.cropCircleTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.cropCircleTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } + this.isCropCircle = value; }) Text('圆形裁剪').margin({ left: 16 }) }.margin({ left: 16 }) @@ -159,15 +149,7 @@ struct transformsPage { .width(32) .height(32) .onChange((value: boolean) => { - if (value) { - this.transformations.push(this.cropCircleWithBorderTransformation); - } else { - for (let index = 0; index < this.transformations.length; index++) { - if (this.transformations[index].getClassName() == this.cropCircleWithBorderTransformation.getClassName()) { - this.transformations.splice(index, 1); - } - } - } + this.isCropCircleWithBorder = value; }) Text('圆环').margin({ left: 16 }) }.margin({ left: 16 }) @@ -440,22 +422,38 @@ struct transformsPage { }.margin({ top: 32, left: 16 }) Button("显示效果").onClick(() => { - this.imageKnifeOption = { - loadSrc: $r('app.media.jpgSample'), - placeholderSrc: $r('app.media.icon_loading'), - errorholderSrc: $r('app.media.icon_failed'), - enableGpu: true, - transformations: this.transformations - }; + this.updateImageKnifeOption(); }).margin({ left: 5 }).backgroundColor(Color.Blue) Text("下面为展示图片区域").margin({ top: 5 }) Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { - ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300) - }.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink) + ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }) + .width(300) + .height(300) + .backgroundColor(Color.Pink) + }.width(400).height(400).margin({ top: 10 }) } } .width('100%') .height('100%') } + + updateImageKnifeOption() { + this.imageKnifeOption = { + loadSrc: $r('app.media.jpgSample'), + placeholderSrc: $r('app.media.icon_loading'), + errorholderSrc: $r('app.media.icon_failed'), + enableGpu: true, + transformations: this.transformations + } + if (this.isCropCircle) { + this.imageKnifeOption.mainScaleType = ScaleType.CENTER_CROP; + this.imageKnifeOption.circleCropBorder = { cornerRadius: 150 }; + } + if (this.isCropCircleWithBorder) { + this.imageKnifeOption.mainScaleType = ScaleType.CENTER_CROP; + this.imageKnifeOption.circleCropBorder = { cornerRadius: 150, colorString: Color.Red, borderWidth: 2 }; + } + } + } diff --git a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 436ca30..69486f3 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -678,6 +678,29 @@ export struct ImageKnifeComponent { } ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); + if (imageKnifeOption.circleCropBorder) { + let borderWidth = imageKnifeOption.circleCropBorder.borderWidth ? imageKnifeOption.circleCropBorder.borderWidth : 0; + let connerRadius = imageKnifeOption.circleCropBorder.cornerRadius ? imageKnifeOption.circleCropBorder.cornerRadius : 0; + // 通过 destination-in 裁剪出圆角 + context.save(); + context.globalCompositeOperation = 'destination-in'; + ImageKnifeDrawFactory.setRect(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, + compHeight, 0, 0, borderWidth, connerRadius); + context.fill(); + context.restore(); + if (borderWidth > 0) { + // 为圆角添加边框 + context.save(); + context.strokeStyle = imageKnifeOption.circleCropBorder.colorString ? imageKnifeOption.circleCropBorder.colorString : 0; + context.lineWidth = borderWidth; + context.globalCompositeOperation = 'source-over'; + ImageKnifeDrawFactory.setRect(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, + compHeight, 0, 0, borderWidth, connerRadius); + context.stroke(); + context.restore(); + } + context.restore(); + } this.drawMainSourceSuccess = true; LogUtil.log('VISIBLE: ImageKnifeComponent default drawMainSource end!'); }) diff --git a/library/src/main/ets/components/imageknife/ImageKnifeOption.ets b/library/src/main/ets/components/imageknife/ImageKnifeOption.ets index f7a45b2..c1234be 100644 --- a/library/src/main/ets/components/imageknife/ImageKnifeOption.ets +++ b/library/src/main/ets/components/imageknife/ImageKnifeOption.ets @@ -64,6 +64,12 @@ export interface TransformOptions{ rotateImage?: number } +export interface CircleCropBorderOptions { + borderWidth?: number; + cornerRadius?: number; + colorString?: string | number | CanvasGradient | CanvasPattern; +} + export interface HeaderOptions { key: string; value: string; @@ -147,6 +153,9 @@ export class ImageKnifeOption { transformation?: BaseTransform; transformations?: Array>; + // 圆形裁剪 + circleCropBorder?: CircleCropBorderOptions; + // 输出缓存相关内容和信息 allCacheInfoCallback?: IAllCacheInfoCallback;