floraachy
/
ImageKnife
mirror of https://gitee.com/openharmony-tpc/ImageKnife.git
1
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

drawLifeCycle支持gif图 

Signed-off-by: zhanghanyong <zhanghanyong@h-partners.com>
This commit is contained in:
zhanghanyong 2024-04-19 17:35:00 +08:00
parent 3e4f204027
commit 160d08d336
4 changed files with 130 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -8,6 +8,7 @@
- 适配Sendable内存共享优化
- 修改全局请求头覆盖request请求头
- imageKnife支持heic测试demo独立页面展示
- drawLifeCycle支持gif图
## 2.1.2-rc.12
- 新增gif播放次数功能

61
entry/src/main/ets/pages/testImageKnifeOptionChangedPage5.ets
View File

@ -27,6 +27,9 @@ import {
ImageKnifeDrawFactory
} from '@ohos/libraryimageknife'
import worker from '@ohos.worker';
let gifUrl: string = 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658';
@Entry
@Component
struct TestImageKnifeOptionChangedPage5 {
@ -83,6 +86,64 @@ struct TestImageKnifeOptionChangedPage5 {
};
}).margin({ left: 5 }).backgroundColor(Color.Blue)
}.margin({ top: 15 })
Flex({ direction: FlexDirection.Row }) {
Button("本地gif")
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
}).margin({ left: 5 }).backgroundColor(Color.Blue)
Button("网络gif")
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: gifUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
}).margin({ left: 5 }).backgroundColor(Color.Blue)
}.margin({ top: 15 })
Flex({ direction: FlexDirection.Row }) {
Button("网络gif - 圆角小")
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: gifUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
drawLifeCycle: ImageKnifeDrawFactory.createRoundLifeCycle(3, "#ff0000", 30)
};
}).margin({ left: 5 }).backgroundColor(Color.Blue)
Button("本地gif - 圆角大")
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
drawLifeCycle: ImageKnifeDrawFactory.createRoundLifeCycle(5, "#ffff00", 300)
};
}).margin({ left: 5 }).backgroundColor(Color.Blue)
}.margin({ top: 15 })
Flex({ direction: FlexDirection.Row }) {
Button("网络gif-椭圆长方形资源")
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: gifUrl,
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
drawLifeCycle: ImageKnifeDrawFactory.createOvalLifeCycle(8, "#88ee00")
};
}).margin({ left: 5 }).backgroundColor(Color.Blue)
Button("本地gif-椭圆正方形资源")
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
drawLifeCycle: ImageKnifeDrawFactory.createOvalLifeCycle(5, "#ff00ff")
};
}).margin({ left: 5 }).backgroundColor(Color.Blue)
}.margin({ top: 15 })
Text("下面为展示图片区域").margin({ top: 5 })
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

50
library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
View File

@ -27,6 +27,7 @@ import { ObjectKey } from './ObjectKey'
import componentUtils from '@ohos.arkui.componentUtils'
import inspector from '@ohos.arkui.inspector'
import util from '@ohos.util'
import { ImageKnifeDrawFactory } from './ImageKnifeDrawFactory'
interface KeyCanvas {
keyId:string
@ -415,6 +416,7 @@ export struct ImageKnifeComponent {
}
displayMainSource = (data: ImageKnifeData|number|undefined)=> {
ImageKnifeDrawFactory.type = undefined;
if(data == undefined || typeof data == 'number'){
return
}
@ -899,10 +901,58 @@ export struct ImageKnifeComponent {
ScaleTypeHelper.drawImageWithScaleType(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth, compHeight, px2vp(frame.dims.left), px2vp(frame.dims.top))
// tips:worker如果不是在展示页面中创建,使用子线程回来的数据创建的图片,会导致canvas绘制不出来
context.restore();
if (ImageKnifeDrawFactory.type === undefined) {
return;
}
// 通过 destination-in 裁剪出圆角
if (ImageKnifeDrawFactory?.type === DrawType.Round || ImageKnifeDrawFactory?.type === DrawType.Oval) {
context.save();
context.globalCompositeOperation = 'destination-in';
if (ImageKnifeDrawFactory.type === DrawType.Round) {
ImageKnifeDrawFactory.setRect(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth,
compHeight, 0, 0, ImageKnifeDrawFactory.borderWidth, ImageKnifeDrawFactory.connerRadius);
} else {
context.beginPath();
ImageKnifeDrawFactory.setOval(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth,
compHeight, 0, 0, ImageKnifeDrawFactory.borderWidth);
context.closePath();
}
context.fill();
context.restore();
if (ImageKnifeDrawFactory.borderWidth > 0) {
// 为圆角添加边框
context.save();
context.strokeStyle = ImageKnifeDrawFactory.colorString;
context.lineWidth = ImageKnifeDrawFactory.borderWidth;
context.globalCompositeOperation = 'source-over';
if (ImageKnifeDrawFactory.type === DrawType.Round) {
ImageKnifeDrawFactory.setRect(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth,
compHeight, 0, 0, ImageKnifeDrawFactory.borderWidth, ImageKnifeDrawFactory.connerRadius);
} else {
context.beginPath();
ImageKnifeDrawFactory.setOval(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth,
compHeight, 0, 0, ImageKnifeDrawFactory.borderWidth);
context.closePath();
}
context.stroke();
context.restore();
}
context.restore();
}
LogUtil.log('ImageKnifeComponent canvasDrawPixelMap end!')
}
}
export enum DrawType{
Normal = 0,
Oval = 1,
Round = 2
}
export enum FrameDisposalType {
// 0 - No disposal specified. The decoder is not required to take any action.
// 不使用处置方法

21
library/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets
View File

@ -16,9 +16,13 @@ import { ImageKnifeOption } from '../imageknife/ImageKnifeOption'
import { ImageKnifeData } from '../imageknife/ImageKnifeData'
import { GIFFrame } from '../imageknife/utils/gif/GIFFrame'
import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import { ScaleTypeHelper,ScaleType } from '../imageknife/ImageKnifeComponent'
import { ScaleTypeHelper,ScaleType, DrawType } from '../imageknife/ImageKnifeComponent'
export class ImageKnifeDrawFactory{
public static borderWidth: number;
public static type: DrawType | undefined = undefined;
public static colorString: string;
public static connerRadius: number;
/**
* 绘制PixelMap内容情况下,主图的椭圆裁剪,可添加边框
@ -81,6 +85,11 @@ export class ImageKnifeDrawFactory{
})
return true;
}
if (data.isGIFFrame()) {
ImageKnifeDrawFactory.type = DrawType.Oval;
ImageKnifeDrawFactory.borderWidth = borderWidth;
ImageKnifeDrawFactory.colorString = colorString;
}
return false;
},
// 展示重试图层
@ -108,7 +117,7 @@ export class ImageKnifeDrawFactory{
* @param imageOffsetY
* @param borderWidth
*/
private static setOval(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX:number,imageOffsetY:number
public static setOval(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX:number,imageOffsetY:number
,borderWidth:number) {
let scaleW = compWidth / imageWidth
let scaleH = compHeight / imageHeight
@ -240,6 +249,12 @@ export class ImageKnifeDrawFactory{
})
return true;
}
if (data.isGIFFrame()) {
ImageKnifeDrawFactory.type = DrawType.Round;
ImageKnifeDrawFactory.borderWidth = borderWidth;
ImageKnifeDrawFactory.colorString = colorString;
ImageKnifeDrawFactory.connerRadius = connerRadius;
}
return false;
},
// 展示重试图层
@ -268,7 +283,7 @@ export class ImageKnifeDrawFactory{
* @param borderWidth
* @param cornerRadius
*/
private static setRect(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX:number,imageOffsetY:number
public static setRect(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX:number,imageOffsetY:number
,borderWidth:number,cornerRadius:number) {
let scaleW = compWidth / imageWidth
let scaleH = compHeight / imageHeight