caishi
/
ImageKnife
forked from floraachy/ImageKnife
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

!20 ImageKnife适配OH自定义可支持自定义组件使用链式调用设置通用属性和事件 

Merge pull request !20 from zhoulisheng1/master
This commit is contained in:
openharmony_ci 2022-12-16 03:18:39 +00:00 committed by Gitee
parent 1c00991d3d 884b06bb32
commit fb904dbd2d
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
48 changed files with 571 additions and 1615 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
CHANGELOG.md
View File

@ -1,12 +1,29 @@
## 1.0.5
- 自定义组件已支持通用属性和通用事件绑定,因此ImageKnifeComponent将删除相关内容,相关内容由用户自定义实现，提高扩展能力
- ImageKnifeOption 支持列表绑定
- ImageKnifeOption
新增
- 1.onClick事件属性
删除
- 1.size(设置大小)
- 2.sizeAnimated 显式动画
- 3.backgroundColor背景色
- 4.margin 组件外间距 等属性,删除的属性将由通用属性提供支持,可支持在ImageKnifeComponent自定义组件上链式调用
## 1.0.4
渲染显示部分使用Canvas组件替代Image组件
- 渲染显示部分使用Canvas组件替代Image组件
重构渲染封装层ImageKnifeComponent自定义组件
- 重构渲染封装层ImageKnifeComponent自定义组件
新增GIF图片解析能力
- 新增GIF图片解析能力
新增SVG图片解析能力
- 新增SVG图片解析能力
## 1.0.3

15
README.md
View File

@ -52,8 +52,6 @@ struct Index {
@State imageKnifeOption1: ImageKnifeOption =
{ // 加载一张本地的jpg资源（必选）
loadSrc: $r('app.media.jpgSample'),
// 组件宽设置为300，高设置为300（必选）
size: { width: '300', height: '300' },
// 占位图使用本地资源icon_loading（可选）
placeholderSrc: $r('app.media.icon_loading'),
// 失败占位图使用本地资源icon_failed（可选）
@ -63,6 +61,8 @@ struct Index {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
.width(300) // 自定义组件支持通用属性链式调用，可以直接设置宽高
.height(300)
}
}
.width('100%')
@ -99,7 +99,6 @@ struct IndexFunctionDemo {
@State imageKnifeOption: ImageKnifeOption =
{
loadSrc: $r('app.media.gifSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
};
@ -109,6 +108,8 @@ struct IndexFunctionDemo {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text("简单示例：加载一张gif图片").fontSize(15)
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption })
.width(300) // 自定义组件支持通用属性链式调用，可以直接设置宽高
.height(300)
}
}
.width('100%')
@ -188,7 +189,6 @@ arkWorker.parentPort.onmessage = gifHandler;
| 参数名称 | 入参内容 | 功能简介 |
| ---------------------------- | ------------------------------------------------------------ | ----------------------------------- |
| size | { width: string, height: string } | 设置组件宽高（必选） |
| loadSrc | string \| PixelMap \| Resource | 设置主图资源（必选） |
| mainScaleType | ScaleType | 设置主图展示样式（可选） |
| strategy | DiskStrategy | 设置磁盘缓存策略（可选） |
@ -210,9 +210,6 @@ arkWorker.parentPort.onmessage = gifHandler;
| transformation | BaseTransform<PixelMap> | 单个变换（可选） |
| transformations | Array<BaseTransform<PixelMap>> | 多个变换,目前仅支持单个变换（可选） |
| allCacheInfoCallback | IAllCacheInfoCallback | 输出缓存相关内容和信息（可选） |
| backgroundColor | Color \| number \| string \| Resource | 组件背景颜色（可选） |
| margin | { <br/> top?: number \| string \| Resource, <br/> right?: number \| string \| Resource, <br/> bottom?: number \| string \| Resource,<br/> left?: number \| string \| Resource<br/> } \| number \| string \| Resource | 组件间距（可选） |
| sizeAnimate | AnimateParam | 组件大小变化显式动画效果（可选） |
| **drawLifeCycle** | **IDrawLifeCycle** | **用户自定义实现绘制方案（可选）** |
其他参数只需要在ImageKnifeOption对象上按需添加即可。
@ -311,7 +308,7 @@ export default class MyAbilityStage extends AbilityStage {
下面我们会着重指导用户如何复用图片加载逻辑，重构自定义组件ImageKnifeComponent。
首先我们先看看RequestOption构建的内容,如下表格所示:
首先我们先看看RequestOption构建的内容,如下所示:
### 数据加载
@ -482,7 +479,7 @@ request.skipMemoryCache(true)
/entry/src/
- main/ets/MainAbility
- pages # 测试page页面列表
- basicTestFeatureAbilityPage.ets # 测试元能力
- basicTestFeatureAbilityPage.ets # 测试列表加载
- basicTestFileIOPage.ets # 测试fileio
- basicTestMediaImage.ets # 测试媒体image
- basicTestResourceManagerPage.ets # 测试本地资源解析

81
entry/src/main/ets/pages/basicTestFeatureAbilityPage.ets
View File

@ -1,6 +1,6 @@
/*
* Copyright (C) 2021 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* 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
*
@ -12,7 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {ImageKnifeOption,ImageKnifeComponent} from '@ohos/imageknife'
@Entry
@Component
@ -20,30 +20,63 @@ struct BasicTestFeatureAbilityPage {
@Watch("watchPathChange") @State filePath: string = "查看featureAbility路径";
watchPathChange() {
console.log("watchPathChange");
console.log("watchPathChange")
}
urls=[
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
"http://h.hiphotos.baidu.com/image/pic/item/7c1ed21b0ef41bd5f2c2a9e953da81cb39db3d1d.jpg",
"http://g.hiphotos.baidu.com/image/pic/item/55e736d12f2eb938d5277fd5d0628535e5dd6f4a.jpg",
"http://e.hiphotos.baidu.com/image/pic/item/4e4a20a4462309f7e41f5cfe760e0cf3d6cad6ee.jpg",
"http://b.hiphotos.baidu.com/image/pic/item/9d82d158ccbf6c81b94575cfb93eb13533fa40a2.jpg",
"http://e.hiphotos.baidu.com/image/pic/item/4bed2e738bd4b31c1badd5a685d6277f9e2ff81e.jpg",
"http://g.hiphotos.baidu.com/image/pic/item/0d338744ebf81a4c87a3add4d52a6059252da61e.jpg",
"http://a.hiphotos.baidu.com/image/pic/item/f2deb48f8c5494ee5080c8142ff5e0fe99257e19.jpg",
"http://f.hiphotos.baidu.com/image/pic/item/4034970a304e251f503521f5a586c9177e3e53f9.jpg",
"http://b.hiphotos.baidu.com/image/pic/item/279759ee3d6d55fbb3586c0168224f4a20a4dd7e.jpg",
"http://img2.xkhouse.com/bbs/hfhouse/data/attachment/forum/corebbs/2009-11/2009113011534566298.jpg",
"http://a.hiphotos.baidu.com/image/pic/item/e824b899a9014c087eb617650e7b02087af4f464.jpg",
"http://c.hiphotos.baidu.com/image/pic/item/9c16fdfaaf51f3de1e296fa390eef01f3b29795a.jpg",
"http://d.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f119945cbe2fe9925bc317d2a.jpg",
"http://h.hiphotos.baidu.com/image/pic/item/902397dda144ad340668b847d4a20cf430ad851e.jpg",
"http://b.hiphotos.baidu.com/image/pic/item/359b033b5bb5c9ea5c0e3c23d139b6003bf3b374.jpg",
"http://a.hiphotos.baidu.com/image/pic/item/8d5494eef01f3a292d2472199d25bc315d607c7c.jpg",
"http://b.hiphotos.baidu.com/image/pic/item/e824b899a9014c08878b2c4c0e7b02087af4f4a3.jpg",
"http://g.hiphotos.baidu.com/image/pic/item/6d81800a19d8bc3e770bd00d868ba61ea9d345f2.jpg",
]
@State options:Array<ImageKnifeOption> = []
aboutToAppear(){
this.options = this.urls.map((url)=>{
return {
loadSrc:url
}
})
console.log('this.options length ='+this.options.length)
}
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(this.filePath).fontSize(20)
Button("featureAbility.getContext().getFilesDir()")
.margin({ top: 20 })
.onClick(() => {
let data = globalThis.ImageKnife.getImageKnifeContext().filesDir;
console.log("ImageKnife filesPath = " + data)
this.filePath = data
})
Button("featureAbility.getContext().getCacheDir()")
.margin({ top: 20 })
.onClick(() => {
let data = globalThis.ImageKnife.getImageKnifeContext().cacheDir;
console.log("ImageKnife cachesPath = " + data)
this.filePath = data
})
}
}
.width('100%')
.height('100%')
Stack({ alignContent: Alignment.TopStart }) {
Column() {
List({ space: 20, initialIndex: 0 }) {
ForEach(this.options, (item) => {
ListItem() {
ImageKnifeComponent({imageKnifeOption:item}).width(300).height(300)
}
}, item => item.loadSrc)
}
.listDirection(Axis.Vertical) // 排列方向
.divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
.edgeEffect(EdgeEffect.None) // 滑动到边缘无效果
.chainAnimation(false) // 联动特效关闭
.onScrollIndex((firstIndex: number, lastIndex: number) => {
console.info('first' + firstIndex)
console.info('last' + lastIndex)
})
}.width('100%')
}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })
}
}

18
entry/src/main/ets/pages/frescoImageTestCasePage.ets
View File

@ -25,7 +25,7 @@ struct FrescoImageTestCasePage {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
displayProgress: true
@ -33,7 +33,7 @@ struct FrescoImageTestCasePage {
@State ImageKnifeOption: ImageKnifeOption =
{
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
displayProgress: true
@ -41,7 +41,7 @@ struct FrescoImageTestCasePage {
@State imageKnifeOption3: ImageKnifeOption =
{
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
displayProgress: true
@ -49,7 +49,7 @@ struct FrescoImageTestCasePage {
@State imageKnifeOption4: ImageKnifeOption =
{
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
displayProgress: true,
@ -58,10 +58,12 @@ struct FrescoImageTestCasePage {
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
// ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
.width(300)
.height(300)
// Scroll() {
// Text(this.progresshint).fontSize(15)
// }.width(300).height(200)

18
entry/src/main/ets/pages/frescoRetryTestCasePage.ets
View File

@ -23,7 +23,7 @@ struct FrescoImageTestCasePage {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
retryholderSrc: $r('app.media.icon_retry'),
@ -33,7 +33,7 @@ struct FrescoImageTestCasePage {
@State ImageKnifeOption: ImageKnifeOption =
{
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
retryholderSrc: $r('app.media.icon_retry'),
@ -43,7 +43,7 @@ struct FrescoImageTestCasePage {
@State imageKnifeOption3: ImageKnifeOption =
{
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
retryholderSrc: $r('app.media.icon_retry'),
@ -53,7 +53,7 @@ struct FrescoImageTestCasePage {
@State imageKnifeOption4: ImageKnifeOption =
{
loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
retryholderSrc: $r('app.media.icon_retry'),
@ -64,10 +64,12 @@ struct FrescoImageTestCasePage {
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
// ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption })
// ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 })
.width(300)
.height(300)
}
}
.width('100%')

2
entry/src/main/ets/pages/imageknifeTestCaseIndex.ets
View File

@ -28,7 +28,7 @@ struct IndexFunctionDemo {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("测试元能力")
.onClick(() => {
console.log("测试元能力子系统")
console.log("测试List列表")
router.push({ uri: "pages/basicTestFeatureAbilityPage" });
}).margin({ top: 5, left: 3 })
Button("测试文件")

12
entry/src/main/ets/pages/index.ets
View File

@ -25,7 +25,7 @@ struct IndexFunctionDemo {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
};
@ -33,7 +33,7 @@ struct IndexFunctionDemo {
@State imageKnifeOption2: ImageKnifeOption =
{
loadSrc: $r('app.media.icon'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
};
@ -47,12 +47,12 @@ struct IndexFunctionDemo {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.pngSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
}
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
}.width('100%').backgroundColor(Color.Pink)
Text("简单示例2：加载一张网络gif图片").fontSize(15)
@ -62,13 +62,13 @@ struct IndexFunctionDemo {
.onClick(() => {
this.imageKnifeOption2 = {
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
displayProgress:true,
}
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
}.width('100%').backgroundColor(Color.Pink)
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {

18
entry/src/main/ets/pages/showErrorholderTestCasePage.ets
View File

@ -23,28 +23,28 @@ struct ShowErrorholderTestCasePage {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State ImageKnifeOption: ImageKnifeOption =
@State imageKnifeOption: ImageKnifeOption =
{
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption3: ImageKnifeOption =
{
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State imageKnifeOption4: ImageKnifeOption =
{
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@ -52,10 +52,10 @@ struct ShowErrorholderTestCasePage {
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(300).height(300)
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(300).height(300)
}
}
.width('100%')

24
entry/src/main/ets/pages/testAllCacheInfoPage.ets
View File

@ -45,23 +45,23 @@ struct TestAllCacheInfoPage {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.pngSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{top:15},
transform: {
transformType:TransformType.RotateImageTransformation,
rotateImage:180
},
allCacheInfoCallback:this.allCacheInfoCallback1
};
@State ImageKnifeOption: ImageKnifeOption =
@State imageKnifeOption: ImageKnifeOption =
{
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{top:15},
transform: {
transformType:TransformType.RotateImageTransformation,
rotateImage:180
@ -112,10 +112,10 @@ struct TestAllCacheInfoPage {
this.imageKnifeOption1 =
{
loadSrc: $r('app.media.pngSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { top: 15 },
transform: {
transformType:TransformType.RotateImageTransformation,
rotateImage:this.imageKnifeComponentAngle
@ -126,18 +126,18 @@ struct TestAllCacheInfoPage {
Scroll() {
Text(this.cacheinfo3).fontSize(15)
}.width(300).height(200)
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
.onClick(() => {
this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
this.ImageKnifeOption =
this.imageKnifeOption =
{
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { top: 15 },
transform: {
transformType:TransformType.RotateImageTransformation,
rotateImage:this.imageKnifeComponentAngle
@ -148,7 +148,7 @@ struct TestAllCacheInfoPage {
Scroll() {
Text(this.cacheinfo4).fontSize(15)
}.width(300).height(200)
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
}
}

17
entry/src/main/ets/pages/testGifDontAnimatePage.ets
View File

@ -23,10 +23,8 @@ struct TestGifDontAnimatePage {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:15,top:15,right:15,bottom:15}
errorholderSrc: $r('app.media.icon_failed')
};
@ -38,10 +36,9 @@ struct TestGifDontAnimatePage {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
}
}).margin({left:15}).backgroundColor(Color.Grey)
@ -49,10 +46,8 @@ struct TestGifDontAnimatePage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:15,top:15,right:15,bottom:15},
dontAnimateFlag:true
}
@ -64,26 +59,24 @@ struct TestGifDontAnimatePage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:15,top:15,right:15,bottom:15}
};
}).margin({left:15}).backgroundColor(Color.Grey)
Button('网络资源gif静态')
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:15,top:15,right:15,bottom:15},
dontAnimateFlag:true
};
}).margin({left:15}).backgroundColor(Color.Grey)
}
.margin({top:15})
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
.width(300)
.height(300)
}
}

70
entry/src/main/ets/pages/testImageKnifeOptionChangedPage.ets
View File

@ -25,10 +25,10 @@ struct TestImageKnifeOptionChangedPage {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
};
@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
};
}).margin({left:5}).backgroundColor(Color.Blue)
@ -51,10 +51,10 @@ struct TestImageKnifeOptionChangedPage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: $r('app.media.pngSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
};
}).margin({left:5}).backgroundColor(Color.Blue)
@ -62,10 +62,10 @@ struct TestImageKnifeOptionChangedPage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: $r('app.media.bmpSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
};
}).margin({left:5}).backgroundColor(Color.Blue)
@ -73,10 +73,9 @@ struct TestImageKnifeOptionChangedPage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
@ -84,10 +83,9 @@ struct TestImageKnifeOptionChangedPage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: $r('app.media.svgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
@ -95,10 +93,9 @@ struct TestImageKnifeOptionChangedPage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
@ -109,60 +106,54 @@ struct TestImageKnifeOptionChangedPage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
Button('png')
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
Button('bmp')
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
Button('webp')
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
Button('svg')
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/30df266a-485e-411e-b178-b9fb1d8e0748.svg',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
Button('gif')
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5}
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
@ -170,10 +161,9 @@ struct TestImageKnifeOptionChangedPage {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
errorholderSrc: $r('app.media.icon_failed')
};
}).margin({left:5}).backgroundColor(Color.Blue)
}
@ -181,7 +171,9 @@ struct TestImageKnifeOptionChangedPage {
Text('下面为展示图片区域').margin({top:5})
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
.width(300)
.height(300)
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)

22
entry/src/main/ets/pages/testImageKnifeOptionChangedPage2.ets
View File

@ -24,10 +24,10 @@ struct TestImageKnifeOptionChangedPage2 {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
thumbSizeMultiplier:0.1
};
@ -40,10 +40,10 @@ struct TestImageKnifeOptionChangedPage2 {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
thumbSizeMultiplier:0.1,
transformation:new RotateImageTransformation(180)
};
@ -52,10 +52,10 @@ struct TestImageKnifeOptionChangedPage2 {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
thumbSizeMultiplier:0.1,
transformations:[new RotateImageTransformation(180)]
};
@ -64,10 +64,10 @@ struct TestImageKnifeOptionChangedPage2 {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: "https://img-blog.csdn.net/20140514114029140",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
thumbSizeMultiplier:0.1,
transformations:[new GrayscaleTransformation()]
};
@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage2 {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
thumbSizeMultiplier:0.1,
transformations:[new SketchFilterTransformation()]
};
@ -89,7 +89,7 @@ struct TestImageKnifeOptionChangedPage2 {
Text("下面为展示图片区域").margin({top:5})
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)

153
entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets
View File

@ -27,10 +27,11 @@ struct TestImageKnifeOptionChangedPage3 {
{
loadSrc: $r('app.media.jpgSample'),
mainScaleType: ScaleType.FIT_CENTER,
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
};
@State compWidht:number = 300
@State compHeight:number = 300
build() {
@ -42,46 +43,48 @@ struct TestImageKnifeOptionChangedPage3 {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.jpgSample'),
mainScaleType: ScaleType.FIT_CENTER,
size: { width: '350', height: '350' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
thumbSizeMultiplier:0.1,
transformation:new RotateImageTransformation(180),
sizeAnimate: {
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode:PlayMode.Normal,
onFinish:()=>{
console.log('play end!')
}
}
};
animateTo({
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode:PlayMode.Normal,
onFinish:()=>{
console.log('play end!')
}
},()=>{
this.compHeight = 350
this.compWidht = 350
})
}).margin({left:5}).backgroundColor(Color.Blue)
Button("本地png")
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: $r('app.media.pngSample'),
mainScaleType: ScaleType.FIT_CENTER,
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
thumbSizeMultiplier:0.1,
transformation:new RotateImageTransformation(180),
sizeAnimate: {
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.log('play end!')
}
}
};
animateTo({
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode:PlayMode.Normal,
onFinish:()=>{
console.log('play end!')
}
},()=>{
this.compHeight = 400
this.compWidht = 300
})
}).margin({left:5}).backgroundColor(Color.Blue)
}.margin({top:15})
Flex({direction:FlexDirection.Row}){
@ -90,46 +93,48 @@ struct TestImageKnifeOptionChangedPage3 {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.bmpSample'),
mainScaleType: ScaleType.FIT_CENTER,
size: { width: '100', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
thumbSizeMultiplier:0.1,
transformations:[new GrayscaleTransformation()],
sizeAnimate: {
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.log('play end!')
}
}
};
animateTo({
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode:PlayMode.Normal,
onFinish:()=>{
console.log('play end!')
}
},()=>{
this.compHeight = 250
this.compWidht = 350
})
}).margin({left:5}).backgroundColor(Color.Blue)
Button("本地webp")
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: $r('app.media.webpSample'),
mainScaleType: ScaleType.FIT_CENTER,
size: { width: '300', height: '100' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
thumbSizeMultiplier:0.1,
transformations:[new SketchFilterTransformation()],
sizeAnimate: {
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.log('play end!')
}
}
};
animateTo({
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode:PlayMode.Normal,
onFinish:()=>{
console.log('play end!')
}
},()=>{
this.compHeight = 400
this.compWidht = 400
})
}).margin({left:5}).backgroundColor(Color.Blue)
}.margin({top:15})
Flex({direction:FlexDirection.Row}){
@ -137,21 +142,9 @@ struct TestImageKnifeOptionChangedPage3 {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
size: { width: '200', height: '200' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
displayProgress:true,
sizeAnimate: {
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.log('play end!')
}
},
thumbSizeMultiplier:0.1,
transformation:new RotateImageTransformation(180)
};
@ -160,22 +153,10 @@ struct TestImageKnifeOptionChangedPage3 {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
displayProgress:true,
thumbSizeMultiplier:0.1,
sizeAnimate: {
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.log('play end!')
}
},
transformations:[new RotateImageTransformation(180)]
};
}).margin({left:5}).backgroundColor(Color.Blue)
@ -185,22 +166,10 @@ struct TestImageKnifeOptionChangedPage3 {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: "https://img-blog.csdn.net/20140514114029140",
size: { width: '400', height: '400' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
displayProgress:true,
thumbSizeMultiplier:0.1,
sizeAnimate: {
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.log('play end!')
}
},
transformations:[new GrayscaleTransformation()]
};
}).margin({left:5}).backgroundColor(Color.Blue)
@ -208,29 +177,17 @@ struct TestImageKnifeOptionChangedPage3 {
.onClick(()=>{
this.imageKnifeOption1 = {
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
size: { width: '500', height: '500' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin:{left:5,top:5,right:5,bottom:5},
displayProgress:true,
thumbSizeMultiplier:0.1,
sizeAnimate: {
duration: 500,
curve: Curve.EaseInOut,
delay: 100,
iterations: 1,
playMode: PlayMode.Normal,
onFinish: () => {
console.log('play end!')
}
},
};
}).margin({left:5}).backgroundColor(Color.Blue)
}.margin({top:15})
Text("下面为展示图片区域").margin({top:5})
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(this.compWidht).height(this.compHeight)
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)

22
entry/src/main/ets/pages/testImageKnifeOptionChangedPage4.ets
View File

@ -31,10 +31,10 @@ struct TestImageKnifeOptionChangedPage4 {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 5, top: 5, right: 5, bottom: 5 },
thumbSizeMultiplier: 0.1,
drawLifeCycle:this.createViewLifeCycle()
};
@ -48,10 +48,10 @@ struct TestImageKnifeOptionChangedPage4 {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 5, top: 5, right: 5, bottom: 5 },
thumbSizeMultiplier: 0.1,
transformation: new RotateImageTransformation(180),
drawLifeCycle:this.createViewLifeCycle()
@ -61,10 +61,10 @@ struct TestImageKnifeOptionChangedPage4 {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 5, top: 5, right: 5, bottom: 5 },
thumbSizeMultiplier: 0.1,
transformations: [new RotateImageTransformation(180)],
drawLifeCycle:this.createViewLifeCycle()
@ -76,10 +76,10 @@ struct TestImageKnifeOptionChangedPage4 {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: "https://img-blog.csdn.net/20140514114029140",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 5, top: 5, right: 5, bottom: 5 },
thumbSizeMultiplier: 0.1,
transformations: [new GrayscaleTransformation()],
drawLifeCycle:this.createViewLifeCycle()
@ -89,10 +89,10 @@ struct TestImageKnifeOptionChangedPage4 {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 5, top: 5, right: 5, bottom: 5 },
thumbSizeMultiplier: 0.1,
transformations: [new SketchFilterTransformation()],
drawLifeCycle:this.createViewLifeCycle()
@ -102,7 +102,7 @@ struct TestImageKnifeOptionChangedPage4 {
Text("下面为展示图片区域").margin({ top: 5 })
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
}

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

@ -32,7 +32,6 @@ struct TestImageKnifeOptionChangedPage5 {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@ -47,7 +46,6 @@ struct TestImageKnifeOptionChangedPage5 {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@ -57,7 +55,6 @@ struct TestImageKnifeOptionChangedPage5 {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@ -69,7 +66,6 @@ struct TestImageKnifeOptionChangedPage5 {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: "https://img-blog.csdn.net/20140514114029140",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@ -79,7 +75,6 @@ struct TestImageKnifeOptionChangedPage5 {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
@ -89,7 +84,7 @@ struct TestImageKnifeOptionChangedPage5 {
Text("下面为展示图片区域").margin({ top: 5 })
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
}

95
entry/src/main/ets/pages/testPreloadPage.ets
View File

@ -24,51 +24,51 @@ struct TestPreloadPage {
@State imageKnifeOption1: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
@State ImageKnifeOption: ImageKnifeOption =
@State imageKnifeOption: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
@State imageKnifeOption3: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
@State imageKnifeOption4: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
@State imageKnifeOption5: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
@State imageKnifeOption6: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
build() {
@ -99,10 +99,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
}
})
@ -132,10 +132,8 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: $r('app.media.gifSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 },
dontAnimateFlag: true
}
@ -169,10 +167,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
})
.margin({ left: 15 })
@ -201,10 +199,9 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption1 = {
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 },
dontAnimateFlag: true
};
})
@ -213,7 +210,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(200).height(200)
}
@ -240,12 +237,12 @@ struct TestPreloadPage {
Button('本地资源svg')
.onClick(() => {
this.ImageKnifeOption = {
this.imageKnifeOption = {
loadSrc: $r('app.media.svgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
}
})
@ -278,12 +275,12 @@ struct TestPreloadPage {
Button('网络资源svg')
.onClick(() => {
this.ImageKnifeOption = {
this.imageKnifeOption = {
loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/4dc8463e-8ac6-4eb4-862c-783bf486a242.svg',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
})
.margin({ left: 15 })
@ -293,7 +290,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(200).height(200)
}
@ -322,10 +319,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption3 = {
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
}
})
@ -360,10 +357,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption3 = {
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
})
.margin({ left: 15 })
@ -371,7 +368,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption3 }).width(200).height(200)
}
@ -400,10 +397,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption4 = {
loadSrc: $r('app.media.bmpSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
}
})
@ -438,10 +435,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption4 = {
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
})
.margin({ left: 15 })
@ -449,7 +446,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption4 }).width(200).height(200)
}
@ -478,10 +475,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption5 = {
loadSrc: $r('app.media.pngSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
}
})
@ -516,10 +513,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption5 = {
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
})
.margin({ left: 15 })
@ -527,7 +524,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption5 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption5 }).width(200).height(200)
}
@ -556,10 +553,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption6 = {
loadSrc: $r('app.media.jpgSample'),
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
}
})
@ -594,10 +591,10 @@ struct TestPreloadPage {
.onClick(() => {
this.imageKnifeOption6 = {
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
size: { width: '300', height: '300' },
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
margin: { left: 15, top: 15, right: 15, bottom: 15 }
};
})
.margin({ left: 15 })
@ -605,7 +602,7 @@ struct TestPreloadPage {
}
.margin({ top: 15 })
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption6 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption6 }).width(200).height(200)
}
}

0
imageknife/hvigorfile.js → imageknife/hvigorfile.ts
View File

5
imageknife/index.ets
View File

@ -116,4 +116,7 @@ export {gifHandler} from './GifWorker'
// 自定义组件新增
// 自定义组件绘制生命周期
export * from './src/main/ets/components/imageknife/interface/IDrawLifeCycle'
export * from './src/main/ets/components/imageknife/interface/IDrawLifeCycle'
// 日志管理
export * from './src/main/ets/components/imageknife/utils/LogUtil'

8
imageknife/package.json
View File

@ -12,7 +12,7 @@
},
"main": "index.ets",
"repository": "https://gitee.com/openharmony-tpc/ImageKnife",
"version": "1.0.4",
"version": "1.0.5",
"dependencies": {
"pako": "^1.0.5",
"js-binary-schema-parser": "^2.0.3",
@ -22,13 +22,11 @@
"spark-md5": "^3.0.2"
},
"tags": [
"OpenHarmony",
"ImageKnife",
"glide",
"ImageCache",
"UI"
],
"license": "Apache License 2.0",
"devDependencies": {},
"name": "@ohos/imageknife"
"name": "@ohos/imageknife",
"type": "module"
}

7
imageknife/src/main/ets/components/imageknife/ImageKnife.ets
View File

@ -34,6 +34,7 @@ import {FileReader} from '../cache/FileReader'
import image from "@ohos.multimedia.image"
import {CompressBuilder} from "../imageknife/compress/CompressBuilder"
import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import {LogUtil} from '../imageknife/utils/LogUtil'
export class ImageKnife {
static readonly SEPARATOR: string = '/'
@ -59,6 +60,8 @@ export class ImageKnife {
private defaultLifeCycle: IDrawLifeCycle;
private constructor(imgCtx) {
this.imageKnifeContext = imgCtx;
@ -326,7 +329,7 @@ export class ImageKnife {
}
}
else {
console.log("key没有生成无法进入存取！")
LogUtil.log("key没有生成无法进入存取！")
}
@ -370,7 +373,7 @@ export class ImageKnife {
request.diskCacheStrategy(none);
this.loadResources(request);
} else {
console.error("输入参数有问题！")
LogUtil.error("输入参数有问题！")
}
}
}

205
imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets
View File

@ -19,25 +19,23 @@ import { RequestOption } from '../imageknife/RequestOption'
import { ImageKnifeData } from '../imageknife/ImageKnifeData'
import { GIFFrame } from '../imageknife/utils/gif/GIFFrame'
import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import {LogUtil} from '../imageknife/utils/LogUtil'
@Component
export struct ImageKnifeComponent {
@Watch('watchImageKnifeOption') @Link imageKnifeOption: ImageKnifeOption;
@State componentWidth: string = '100%'
@State componentHeight: string = '100%'
@State gifPixelMap: PixelMap = undefined;
drawLifeCycle: IDrawLifeCycle
autoPlay = true
// 有效onAreaChanged触发计数
private onAreaCount: number = 0
private preSize: {
width: string,
height: string
} = { width: '0', height: '0' }
@Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
autoPlay:boolean = true
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private hasDisplayRetryholder = false;
private lastWidth:number = 0
private lastHeight:number = 0
private currentWidth: number = 0
private currentHeight: number = 0
@ -84,25 +82,42 @@ export struct ImageKnifeComponent {
}
}
private canvasHasReady:boolean = false;
private firstDrawFlag:boolean = false;
private onReadyNext:()=>void = undefined
build() {
Canvas(this.context)
.width(this.componentWidth)
.height(this.componentHeight)
.width('100%')
.height('100%')
.onAreaChange((oldValue: Area, newValue: Area) => {
this.currentWidth = newValue.width as number
this.currentHeight = newValue.height as number
console.log('onAreaChange stack currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight)
if (this.onAreaCount > 0) {
this.onAreaCount--;
this.imageKnifeExecute()
if(this.currentWidth <=0 || this.currentHeight <=0 ){
// 存在宽或者高为0,此次重回无意义,无需进行request请求
}else{
// 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制
if( (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag){
this.firstDrawFlag = false;
LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + ' currentHeight=' + this.currentHeight)
this.lastWidth = this.currentWidth
this.lastHeight = this.currentHeight
this.imageKnifeExecute()
}
}
})
.backgroundColor(this.imageKnifeOption.backgroundColor ? this.imageKnifeOption.backgroundColor : Color.White)
.margin(this.imageKnifeOption.margin ? this.imageKnifeOption.margin : { left: 0, top: 0, right: 0, bottom: 0 })
.onReady(() => {
this.canvasHasReady = true;
if(this.onReadyNext){
LogUtil.log('ImageKnifeComponent onReadyNext is running!')
this.onReadyNext()
this.onReadyNext = undefined;
}
})
.onClick(() => {
.onClick((event:ClickEvent) => {
// 需要将点击事件回传
if(this.imageKnifeOption.onClick){
this.imageKnifeOption.onClick(event)
}
if (this.imageKnifeOption.canRetryClick && this.hasDisplayRetryholder) {
this.retryClick()
}
@ -110,70 +125,60 @@ export struct ImageKnifeComponent {
}
watchImageKnifeOption() {
console.log('watchImageKnifeOption is happened!')
if (this.imageKnifeOption.sizeAnimate) {
animateTo(this.imageKnifeOption.sizeAnimate, () => {
this.resetGifData();
this.whetherWaitSize();
})
} else {
this.resetGifData();
this.whetherWaitSize();
}
LogUtil.log('ImageKnifeComponent watchImageKnifeOption is happened!')
this.whetherWaitSize();
}
whetherWaitSize() {
this.componentWidth = this.imageKnifeOption.size.width
this.componentHeight = this.imageKnifeOption.size.height
if (this.newSizeEqualPreSize(this.imageKnifeOption.size)) {
console.log('whetherWaitSize 宽高不变 直接发送请求')
/**
* 判断当前是否有宽高,有直接重绘,没有则等待onAreaChange回调,当出现aboutToAppear第一次绘制的时候
* 给firstDrawFlag置为true,保证size即使没有变化也要进入 请求绘制流程
* @param drawFirst 是否是aboutToAppear第一次绘制
*/
whetherWaitSize(drawFirst?:boolean) {
if(this.currentHeight <= 0 || this.currentWidth <= 0){
// 宽或者高没有高度,需要等待canvas组件初始化完成
if(drawFirst){
this.firstDrawFlag = true;
}
}else{
LogUtil.log('ImageKnifeComponent whetherWaitSize 宽高有效 直接发送请求')
this.imageKnifeExecute()
} else {
this.onAreaCount++;
// waitSize changed
this.preSize = this.imageKnifeOption.size
console.log('whetherWaitSize 宽高改变 等待组件回调onAreaChange后发送请求')
}
}
newSizeEqualPreSize(newSize: {
width: string,
height: string
}): boolean {
if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) {
return true;
}
return false;
}
retryClick() {
this.hasDisplayRetryholder = false;
this.imageKnifeExecute();
}
aboutToAppear() {
console.log('imageKnifeComponent aboutToAppear happened!')
this.onAreaCount++;
this.componentWidth = this.imageKnifeOption.size.width
this.componentHeight = this.imageKnifeOption.size.height
/**
* 为了保证执行方法在canvas的onReay之后
* 如果onReady未初始化,则将最新的绘制生命周期绑定到onReadNext上
* 待onReady执行的时候执行
* @param nextFunction 下一个方法
*/
runNextFunction(nextFunction:()=>void){
if(!this.canvasHasReady){
// canvas未初始化完成
this.onReadyNext = nextFunction;
}else{
nextFunction();
}
}
configNecessary(request: RequestOption) {
request.load(this.imageKnifeOption.loadSrc)
.addListener((err, data) => {
console.log('request.load callback')
this.displayMainSource(data)
LogUtil.log('ImageKnifeComponent request.load callback')
this.runNextFunction(this.displayMainSource.bind(this,data));
return false;
})
if (this.imageKnifeOption.size) {
let realSize = {
width: this.currentWidth,
height: this.currentHeight
}
request.setImageViewSize(realSize)
}
}
configCacheStrategy(request: RequestOption) {
@ -196,22 +201,21 @@ export struct ImageKnifeComponent {
configDisplay(request: RequestOption) {
if (this.imageKnifeOption.placeholderSrc) {
request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
console.log('request.placeholder callback')
this.displayPlaceholder(data)
LogUtil.log('ImageKnifeComponent request.placeholder callback')
this.runNextFunction(this.displayPlaceholder.bind(this,data))
})
}
if (this.imageKnifeOption.thumbSizeMultiplier) {
request.thumbnail(this.imageKnifeOption.thumbSizeMultiplier, (data) => {
console.log('request.thumbnail callback')
this.displayThumbSizeMultiplier(data)
LogUtil.log('ImageKnifeComponent request.thumbnail callback')
this.runNextFunction(this.displayThumbSizeMultiplier.bind(this,data))
}, this.imageKnifeOption.thumbSizeDelay)
}
if (this.imageKnifeOption.errorholderSrc) {
request.errorholder(this.imageKnifeOption.errorholderSrc, (data) => {
console.log('request.errorholder callback')
this.displayErrorholder(data)
LogUtil.log('ImageKnifeComponent request.errorholder callback')
this.runNextFunction(this.displayErrorholder.bind(this, data))
})
}
@ -232,21 +236,22 @@ export struct ImageKnifeComponent {
if (this.imageKnifeOption.displayProgress) {
request.addProgressListener((percentValue: number) => {
// 如果进度条百分比 未展示大小,展示其动画
this.displayProgress(percentValue)
LogUtil.log('ImageKnifeComponent request.addProgressListener callback')
this.runNextFunction(this.displayProgress.bind(this,percentValue))
})
}
if (this.imageKnifeOption.retryholderSrc) {
request.retryholder(this.imageKnifeOption.retryholderSrc, (data) => {
console.log("RetryListener callback!")
LogUtil.log('ImageKnifeComponent request.retryholder callback')
this.hasDisplayRetryholder = true
this.displayRetryholder(data)
this.runNextFunction(this.displayRetryholder.bind(this,data))
})
}
}
// imageknife 第一次启动和数据刷新后重新发送请求
imageKnifeExecute() {
this.resetGifData()
let request = new RequestOption();
this.configNecessary(request);
this.configCacheStrategy(request);
@ -255,7 +260,6 @@ export struct ImageKnifeComponent {
}
displayPlaceholder(data: ImageKnifeData) {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayPlaceholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -274,7 +278,6 @@ export struct ImageKnifeComponent {
}
displayProgress(percent: number) {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayProgress', this.context, percent, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -293,7 +296,6 @@ export struct ImageKnifeComponent {
}
displayThumbSizeMultiplier(data: ImageKnifeData) {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -307,12 +309,9 @@ export struct ImageKnifeComponent {
})
}
}
}
displayMainSource(data: ImageKnifeData) {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayMainSource', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -348,7 +347,6 @@ export struct ImageKnifeComponent {
}
displayErrorholder(data: ImageKnifeData) {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayErrorholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId)
@ -367,16 +365,16 @@ export struct ImageKnifeComponent {
}
drawPlaceholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
console.log('default drawPlaceholder start!')
LogUtil.log('ImageKnifeComponent default drawPlaceholder start!')
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
console.log('imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
let scaleType = (typeof imageKnifeOption.placeholderScaleType == 'number') ? imageKnifeOption.placeholderScaleType : ScaleType.FIT_CENTER
context.save();
context.clearRect(0, 0, compWidth, compHeight)
ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
context.restore();
console.log('default drawPlaceholder end!')
LogUtil.log('ImageKnifeComponent default drawPlaceholder end!')
})
}
@ -422,31 +420,31 @@ export struct ImageKnifeComponent {
}
drawThumbSizeMultiplier(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
console.log('default drawThumbSizeMultiplier start!')
LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier start!')
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
console.log('imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
let scaleType = (typeof imageKnifeOption.thumbSizeMultiplierScaleType == 'number') ? imageKnifeOption.thumbSizeMultiplierScaleType : ScaleType.FIT_CENTER
context.save();
context.clearRect(0, 0, compWidth, compHeight)
ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
context.restore();
console.log('default drawThumbSizeMultiplier end!')
LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier end!')
})
}
drawMainSource(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
console.log('default drawMainSource start!')
LogUtil.log('ImageKnifeComponent default drawMainSource start!')
if (data.isPixelMap()) {
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
context.save();
context.clearRect(0, 0, compWidth, compHeight)
ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
context.restore();
console.log('default drawMainSource end!')
LogUtil.log('ImageKnifeComponent default drawMainSource end!')
})
} else if (data.isGIFFrame()) {
this.drawGIFFrame(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId)
@ -454,30 +452,30 @@ export struct ImageKnifeComponent {
}
drawRetryholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
console.log('default drawRetryholder start!')
LogUtil.log('ImageKnifeComponent default drawRetryholder start!')
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
console.log('imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
let scaleType = (typeof imageKnifeOption.retryholderScaleType == 'number') ? imageKnifeOption.retryholderScaleType : ScaleType.FIT_CENTER
context.save();
context.clearRect(0, 0, compWidth, compHeight)
ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
context.restore();
console.log('default drawRetryholder end!')
LogUtil.log('ImageKnifeComponent default drawRetryholder end!')
})
}
drawErrorholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
console.log('default drawErrorholder start!')
LogUtil.log('ImageKnifeComponent default drawErrorholder start!')
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
console.log('imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
let scaleType = (typeof imageKnifeOption.errorholderSrcScaleType == 'number') ? imageKnifeOption.errorholderSrcScaleType : ScaleType.FIT_CENTER
context.save();
context.clearRect(0, 0, compWidth, compHeight)
ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0)
context.restore();
console.log('default drawErrorholder end!')
LogUtil.log('ImageKnifeComponent default drawErrorholder end!')
})
}
@ -523,7 +521,14 @@ export struct ImageKnifeComponent {
}
}
aboutToAppear() {
LogUtil.log('ImageKnifeComponent aboutToAppear happened!')
this.canvasHasReady = false;
this.whetherWaitSize(true);
}
aboutToDisappear() {
LogUtil.log('ImageKnifeComponent aboutToDisappear happened!')
this.resetGifData();
}
@ -551,7 +556,7 @@ export struct ImageKnifeComponent {
private drawGIFFrame(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
let frames = data.drawGIFFrame.imageGIFFrames as GIFFrame[]
console.log('gifFrameLength =' + frames.length);
LogUtil.log('ImageKnifeComponent gifFrameLength =' + frames.length);
if (imageKnifeOption.gif && (typeof (imageKnifeOption.gif.seekTo) == 'number') && imageKnifeOption.gif.seekTo >= 0) {
this.autoPlay = false;
context.clearRect(0, 0, compWidth, compHeight)
@ -580,7 +585,7 @@ export struct ImageKnifeComponent {
}
private renderFrames(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) {
console.log('renderFrames frames length =' + frames.length)
LogUtil.log('ImageKnifeComponent renderFrames frames length =' + frames.length)
let start = new Date().getTime();
if (index === 0) {
// 如果是第一帧，我们只从开始渲染前记录时间
@ -641,7 +646,7 @@ export struct ImageKnifeComponent {
// 具体绘制过程
private canvasDrawPixelMap(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) {
console.log('canvasDrawPixelMap index=' + index)
LogUtil.log('ImageKnifeComponent canvasDrawPixelMap index=' + index)
let frame = frames[index];
let pixelmap = frame['drawPixelMap']
let disposal = 0
@ -660,7 +665,7 @@ 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();
console.log('default drawMainSource end!')
LogUtil.log('ImageKnifeComponent default drawMainSource end!')
}
}
@ -697,6 +702,8 @@ export enum ScaleType {
NONE = 8
}
export class ScaleTypeHelper {
static drawImageWithScaleType(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX: number, imageOffsetY: number) {
let scaleW = compWidth / imageWidth

1
imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets
View File

@ -237,7 +237,6 @@ export class ImageKnifeDrawFactory{
context.restore();
}
context.restore();
console.log('TestImageKnifeOptionChangedPage4 drawMainSource end!')
})
return true;
}

22
imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets
View File

@ -23,12 +23,8 @@ import { AllCacheInfo, IAllCacheInfoCallback } from '../imageknife/interface/IAl
import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import { ScaleType } from '../imageknife/ImageKnifeComponent'
@Observed
export class ImageKnifeOption {
// 组件大小
size: {
width: string,
height: string
};
// 主图资源
loadSrc: string | PixelMap | Resource;
@ -76,6 +72,9 @@ export class ImageKnifeOption {
// 用户自定义实现 绘制方案
drawLifeCycle?: IDrawLifeCycle;
// 设置点击事件回调
onClick?:(event?: ClickEvent) => void
gif?: {
loopFinish?: (loopTime?) => void
speedFactory?: number
@ -83,7 +82,7 @@ export class ImageKnifeOption {
}
// 变换相关
// 变换相关 不推荐使用该接口 建议直接使用transformation transformations这2个接口实现
transform?: {
transformType: number,
blur?: number,
@ -119,16 +118,9 @@ export class ImageKnifeOption {
// 输出缓存相关内容和信息
allCacheInfoCallback?: IAllCacheInfoCallback;
imageFit?: ImageFit;
backgroundColor?: Color | number | string | Resource;
margin?: {
top?: number | string | Resource,
right?: number | string | Resource,
bottom?: number | string | Resource,
left?: number | string | Resource
} | number | string | Resource
sizeAnimate?: AnimateParam
// sizeAnimate?: AnimateParam 由业务自定义不再支持
constructor() {

19
imageknife/src/main/ets/components/imageknife/RequestOption.ets
View File

@ -42,7 +42,7 @@ import {BlurTransformation} from '../imageknife/transform/BlurTransformation'
import {PixelationFilterTransformation} from '../imageknife/transform/PixelationFilterTransformation'
import {MaskTransformation} from '../imageknife/transform/MaskTransformation'
import {SwirlFilterTransformation} from '../imageknife/transform/SwirlFilterTransformation'
import {LogUtil} from '../imageknife/utils/LogUtil'
export class RequestOption {
loadSrc: string | PixelMap | Resource;
@ -324,11 +324,10 @@ export class RequestOption {
return this;
}
// 占位图解析成功
placeholderOnComplete(imageKnifeData: ImageKnifeData) {
console.log("placeholderOnComplete has called!");
console.log("Main Image is Ready:" + this.loadMainReady);
LogUtil.log("placeholderOnComplete has called!");
LogUtil.log("Main Image is Ready:" + this.loadMainReady);
if (!this.loadMainReady && !(this.loadErrorReady || this.loadRetryReady) && !this.loadThumbnailReady) {
// 主图未加载成功,并且未加载失败 显示占位图 主图加载成功或者加载失败后=>不展示占位图
this.placeholderFunc(imageKnifeData)
@ -337,7 +336,7 @@ export class RequestOption {
// 占位图解析失败
placeholderOnError(error) {
console.log("占位图解析失败 error =" + error)
LogUtil.log("占位图解析失败 error =" + error)
}
@ -353,7 +352,7 @@ export class RequestOption {
// 缩略图解析失败
thumbholderOnError(error) {
console.log("缩略图解析失败 error =" + error)
LogUtil.log("缩略图解析失败 error =" + error)
}
// 加载失败 占位图解析成功
@ -367,7 +366,7 @@ export class RequestOption {
//加载失败 占位图解析失败
errorholderOnError(error) {
console.log("失败占位图解析失败 error =" + error)
LogUtil.log("失败占位图解析失败 error =" + error)
}
retryholderOnComplete(imageKnifeData: ImageKnifeData){
@ -378,7 +377,7 @@ export class RequestOption {
}
retryholderOnError(error){
console.log("重试占位图解析失败 error ="+ error)
LogUtil.log("重试占位图解析失败 error ="+ error)
}
loadComplete(imageKnifeData: ImageKnifeData) {
@ -395,8 +394,8 @@ export class RequestOption {
}
loadError(err) {
console.log("loadError:"+err);
console.log("loadError stack=:"+JSON.stringify(err.stack));
LogUtil.log("loadError:"+err);
LogUtil.log("loadError stack=:"+JSON.stringify(err.stack));
//失败占位图展示规则
if (this.retryholderFunc) {
// 重试图层优先于加载失败展示

3
imageknife/src/main/ets/components/imageknife/holder/ErrorHolderManager.ets
View File

@ -20,6 +20,7 @@ import { ParseImageUtil } from '../utils/ParseImageUtil'
import { SupportFormat } from '../utils/FileTypeUtil'
import { SVGParseImpl } from '../utils/svg/SVGParseImpl'
import { ParseResClient } from '../resourcemanage/ParseResClient'
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from '@ohos.multimedia.image'
export class ErrorHolderManager {
@ -40,7 +41,7 @@ export class ErrorHolderManager {
}
private displayErrorholder(onComplete, onError) {
console.log("displayErrorholder")
LogUtil.log("displayErrorholder")
if ((typeof (this.options.errorholderSrc as image.PixelMap).isEditable) == 'boolean') {
let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.errorholderSrc as PixelMap)
onComplete(imageKnifeData);

3
imageknife/src/main/ets/components/imageknife/holder/PlaceHolderManager.ets
View File

@ -21,6 +21,7 @@ import {ParseImageUtil} from '../utils/ParseImageUtil'
import {ParseResClient} from '../resourcemanage/ParseResClient'
import { SupportFormat } from '../utils/FileTypeUtil'
import { SVGParseImpl } from '../utils/svg/SVGParseImpl'
import {LogUtil} from '../../imageknife/utils/LogUtil'
import resourceManager from '@ohos.resourceManager';
import image from "@ohos.multimedia.image"
@ -42,7 +43,7 @@ export class PlaceHolderManager {
}
private displayPlaceholder(onComplete, onError) {
console.log("displayPlaceholder")
LogUtil.log("displayPlaceholder")
if ((typeof (this.options.placeholderSrc as image.PixelMap).isEditable) == 'boolean') {
let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.placeholderSrc as PixelMap)
onComplete(imageKnifeData);

3
imageknife/src/main/ets/components/imageknife/holder/RetryHolderManager.ets
View File

@ -21,6 +21,7 @@ import {ParseImageUtil} from '../utils/ParseImageUtil'
import {ParseResClient} from '../resourcemanage/ParseResClient'
import { SupportFormat } from '../utils/FileTypeUtil'
import { SVGParseImpl } from '../utils/svg/SVGParseImpl'
import {LogUtil} from '../../imageknife/utils/LogUtil'
import resourceManager from '@ohos.resourceManager';
import image from "@ohos.multimedia.image"
@ -42,7 +43,7 @@ export class RetryHolderManager {
}
private displayRetryholder(onComplete, onError) {
console.log("displayRetryholder")
LogUtil.log("displayRetryholder")
if ((typeof (this.options.retryholderSrc as image.PixelMap).isEditable) == 'boolean') {
let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, this.options.placeholderSrc as PixelMap)
onComplete(imageKnifeData);

9
imageknife/src/main/ets/components/imageknife/networkmanage/DownloadClient.ets
View File

@ -46,9 +46,12 @@ export class DownloadClient implements IDataFetch {
loadTask = downloadTask;
loadTask.on('progress', (receivedSize, totalSize) => {
let percent = Math.round(((receivedSize * 1.0) / (totalSize * 1.0)) * 100)
if (request.progressFunc) {
request.progressFunc(percent);
if(totalSize > 0) {
// 并不是所有服务器都会返回totalSize 当没有文件大小的时候,下载进度没有百分比回调,只能知道目前下载了多少数据量
let percent = Math.round(((receivedSize * 1.0) / (totalSize * 1.0)) * 100)
if (request.progressFunc) {
request.progressFunc(percent);
}
}
});

41
imageknife/src/main/ets/components/imageknife/requestmanage/RequestManager.ets
View File

@ -31,6 +31,7 @@ import image from "@ohos.multimedia.image"
import { SVGParseImpl } from '../utils/svg/SVGParseImpl'
import { GIFParseImpl } from '../utils/gif/GIFParseImpl'
import { GIFFrame } from '../utils/gif/GIFFrame'
import {LogUtil} from '../../imageknife/utils/LogUtil'
export interface AsyncString {
(data: string): void;
@ -88,7 +89,7 @@ export class RequestManager {
}
static execute(option: RequestOption, memoryCache1: LruCache<string, any>, diskMemoryCache1: DiskLruCache, dataFetch: IDataFetch, resourceFetch: IResourceFetch) {
console.log("RequestManager execute")
LogUtil.log("RequestManager execute")
let manager = new RequestManager(option, memoryCache1, diskMemoryCache1, dataFetch, resourceFetch);
return new Promise<PixelMap>(manager.process.bind(manager))
.then(option.loadComplete.bind(option))
@ -98,9 +99,9 @@ export class RequestManager {
loadCompleteAfter() {
try { // 内部消化问题
console.log("loadCompleteAfter!")
LogUtil.log("loadCompleteAfter!")
if (this.options.allCacheInfoCallback) {
console.log("RequestOption =" + JSON.stringify(this.options));
LogUtil.log("RequestOption =" + JSON.stringify(this.options));
// 内存缓存
let allCacheInfo = new AllCacheInfo();
@ -124,7 +125,7 @@ export class RequestManager {
this.options.allCacheInfoCallback(allCacheInfo)
}
} catch (err) {
console.log("after err =" + err)
LogUtil.log("after err =" + err)
}
}
@ -134,12 +135,12 @@ export class RequestManager {
private mRunReason: RunReason = RunReason.INITIALIZE;
process(onComplete, onError) {
console.log("RequestManager process !");
LogUtil.log("RequestManager process !");
this.loadLeve1MemoryCache(onComplete, onError)
}
private runWrapped(request: RequestOption, runReason: RunReason, onComplete, onError) {
console.log("RequestManager runWrapped")
LogUtil.log("RequestManager runWrapped")
if (runReason == RunReason.INITIALIZE) {
this.mStage = this.getNextStage(request, this.mStage);
this.searchLoadFrom(this.options, this.mStage, onComplete, onError);
@ -170,7 +171,7 @@ export class RequestManager {
//究竟从哪里加载数据
private searchLoadFrom(request: RequestOption, current: Stage, onComplete, onError) {
console.log("RequestManager searchLoadFrom")
LogUtil.log("RequestManager searchLoadFrom")
if (current == Stage.RESOURCE_CACHE) {
this.loadDiskFromTransform(request, onComplete, onError);
} else if (current == Stage.DATA_CACHE) {
@ -194,13 +195,13 @@ export class RequestManager {
// 加载本地资源
private loadSourceFormNative(request: RequestOption, onComplete, onError) {
console.log("RequestManager loadSourceFormNative")
LogUtil.log("RequestManager loadSourceFormNative")
// 本地解析后进行一级缓存
let success = (arrayBuffer) => {
// 使用媒体子系统 ImageSource解析文件 获取PixelMap
let fileTypeUtil = new FileTypeUtil();
let typeValue = fileTypeUtil.getFileType(arrayBuffer)
console.log("RequestManager - 文件类型为= " + typeValue)
LogUtil.log("RequestManager - 文件类型为= " + typeValue)
// gif处理
if(ImageKnifeData.GIF == typeValue && !request.dontAnimateFlag){
// 处理gif
@ -240,7 +241,7 @@ export class RequestManager {
}
// 加载磁盘缓存 原图
private loadDiskFromSource(request: RequestOption, onComplete, onError) {
console.log("RequestManager loadDiskFromSource")
LogUtil.log("RequestManager loadDiskFromSource")
let cached = this.mDiskCacheProxy.getValue(request.generateDataKey)
if (cached != null) {
this.parseDiskFile2PixelMap(request, cached, onComplete, onError)
@ -252,7 +253,7 @@ export class RequestManager {
// 加载磁盘缓存 变换后图片
private loadDiskFromTransform(request: RequestOption, onComplete, onError) {
console.log("RequestManager loadDiskFromTransform")
LogUtil.log("RequestManager loadDiskFromTransform")
let cached = this.mDiskCacheProxy.getValue(request.generateResourceKey)
if (cached != null) {
this.parseDiskTransformFile2PixelMap(request, cached, onComplete, onError)
@ -263,7 +264,7 @@ export class RequestManager {
}
parseSource(request: RequestOption, onComplete, onError) {
console.log("RequestManager parseSource")
LogUtil.log("RequestManager parseSource")
if ((typeof (request.loadSrc as image.PixelMap).isEditable) == 'boolean') {
// PixelMap 外层捕获效率更高，不会进入这里
} else if (typeof request.loadSrc == 'string') {
@ -273,14 +274,14 @@ export class RequestManager {
if (typeof res.id != 'undefined' && typeof res.id != 'undefined') {
this.loadSourceFormNative(request, onComplete, onError)
} else {
console.log("输入参数有问题！")
LogUtil.log("输入参数有问题！")
}
}
}
private loadLeve1MemoryCache(onComplete, onError) {
console.log("RequestManager loadLeve1MemoryCache")
LogUtil.log("RequestManager loadLeve1MemoryCache")
// 一级缓存 内存获取
let cache = this.mMemoryCacheProxy.loadMemoryCache(this.options.generateCacheKey, this.options.isCacheable);
if (cache == null || typeof cache == 'undefined') {
@ -414,7 +415,7 @@ export class RequestManager {
}
private downloadSuccess(source: ArrayBuffer, onComplete, onError) {
console.info('Download task completed.');
LogUtil.log('Download task completed.');
if(source == null || source == undefined || source.byteLength <= 0){
onError('Download task completed. but download file is empty!')
@ -445,7 +446,7 @@ export class RequestManager {
await this.mDiskCacheProxy.putValue(this.options.generateDataKey, arraybuffer)
})
.catch(err=>{
console.log('download file is ='+ImageKnifeData.GIF+'and save diskLruCache error ='+ err)
LogUtil.log('download file is ='+ImageKnifeData.GIF+'and save diskLruCache error ='+ err)
})
}else if(ImageKnifeData.SVG == filetype){
// 处理svg
@ -459,7 +460,7 @@ export class RequestManager {
await this.mDiskCacheProxy.putValue(this.options.generateDataKey, arraybuffer)
})
.catch(err=>{
console.log('download file is ='+ImageKnifeData.SVG+'and save diskLruCache error ='+ err)
LogUtil.log('download file is ='+ImageKnifeData.SVG+'and save diskLruCache error ='+ err)
})
} else {
// 进行变换
@ -572,12 +573,12 @@ export class RequestManager {
if(err){
onError(err)
}
console.log("gifProcess data is null:"+(data == null));
LogUtil.log("gifProcess data is null:"+(data == null));
if(!!data){
let imageKnifeData = this.createImageGIFFrame(ImageKnifeType.GIFFRAME,data)
console.log('gifProcess 生成gif 返回数据类型')
LogUtil.log('gifProcess 生成gif 返回数据类型')
if(cacheStrategy){
console.log('gifProcess 生成gif并且存入了缓存策略')
LogUtil.log('gifProcess 生成gif并且存入了缓存策略')
cacheStrategy(imageKnifeData)
}
onComplete(imageKnifeData)

5
imageknife/src/main/ets/components/imageknife/transform/BlurTransformation.ets
View File

@ -20,6 +20,7 @@ import { RequestOption } from "../../imageknife/RequestOption"
import { TransformUtils } from "../transform/TransformUtils"
import image from "@ohos.multimedia.image"
import { fastBlur } from "../utils/FastBlur"
import {LogUtil} from '../../imageknife/utils/LogUtil'
export class BlurTransformation implements BaseTransform<PixelMap> {
@ -35,7 +36,7 @@ export class BlurTransformation implements BaseTransform<PixelMap> {
transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";BlurTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";BlurTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";BlurTransformation buf is empty", null);
}
@ -73,7 +74,7 @@ export class BlurTransformation implements BaseTransform<PixelMap> {
fastBlur.blur(data, this._mRadius, true, func);
})
.catch((e) => {
console.log(Constants.PROJECT_TAG + ";error:" + e);
LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
func(e, null);
})
})

3
imageknife/src/main/ets/components/imageknife/transform/BrightnessFilterTransformation.ets
View File

@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
@ -36,7 +37,7 @@ export class BrightnessFilterTransformation implements BaseTransform<PixelMap> {
async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty", null);
}

3
imageknife/src/main/ets/components/imageknife/transform/ContrastFilterTransformation.ets
View File

@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
@ -48,7 +49,7 @@ export class ContrastFilterTransformation implements BaseTransform<PixelMap> {
async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";ContrastFilterTransformation buf is empty", null);
}

5
imageknife/src/main/ets/components/imageknife/transform/CropCircleTransformation.ets
View File

@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import { TransformUtils } from "../transform/TransformUtils"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
export class CropCircleTransformation implements BaseTransform<PixelMap> {
@ -34,7 +35,7 @@ export class CropCircleTransformation implements BaseTransform<PixelMap> {
transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.error(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty");
LogUtil.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty");
if (func) {
func(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " buf is empty", null);
}
@ -77,7 +78,7 @@ export class CropCircleTransformation implements BaseTransform<PixelMap> {
this.transformCircle(p, func);
})
.catch(e => {
console.error(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " transform e:" + e);
LogUtil.log(Constants.PROJECT_TAG + CropCircleTransformation.TAG + " transform e:" + e);
if (func) {
func(Constants.PROJECT_TAG + CropCircleTransformation.TAG + "e" + e, null);
}

5
imageknife/src/main/ets/components/imageknife/transform/CropCircleWithBorderTransformation.ets
View File

@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import { TransformUtils } from "../transform/TransformUtils"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
export class CropCircleWithBorderTransformation implements BaseTransform<PixelMap> {
@ -53,7 +54,7 @@ export class CropCircleWithBorderTransformation implements BaseTransform<PixelMa
transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation buf is empty", null);
}
@ -96,7 +97,7 @@ export class CropCircleWithBorderTransformation implements BaseTransform<PixelMa
this.transformPixelMap(pixelMap, outWith, outHeight, func);
})
.catch(e => {
console.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e);
LogUtil.log(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e);
if (func) {
func(Constants.PROJECT_TAG + ";CropCircleWithBorderTransformation e:" + e, null);
}

3
imageknife/src/main/ets/components/imageknife/transform/CropSquareTransformation.ets
View File

@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
@ -29,7 +30,7 @@ export class CropSquareTransformation implements BaseTransform<PixelMap> {
transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";CropSquareTransformation buf is empty", null);
}

5
imageknife/src/main/ets/components/imageknife/transform/CropTransformation.ets
View File

@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import { TransformUtils } from "../transform/TransformUtils"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
export class CropTransformation implements BaseTransform<PixelMap> {
@ -40,7 +41,7 @@ export class CropTransformation implements BaseTransform<PixelMap> {
transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";CropTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";CropTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";CropTransformation buf is empty", null);
}
@ -85,7 +86,7 @@ export class CropTransformation implements BaseTransform<PixelMap> {
func("", data);
})
.catch((e) => {
console.log(Constants.PROJECT_TAG + ";error:" + e);
LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
func(e, null);
})
})

3
imageknife/src/main/ets/components/imageknife/transform/GrayscaleTransformation.ets
View File

@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import { TransformUtils } from "../transform/TransformUtils"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
export class GrayscaleTransformation implements BaseTransform<PixelMap> {
@ -27,7 +28,7 @@ export class GrayscaleTransformation implements BaseTransform<PixelMap> {
async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";GrayscaleTransformation buf is empty", null);
}

3
imageknife/src/main/ets/components/imageknife/transform/InvertFilterTransformation.ets
View File

@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
/**
@ -34,7 +35,7 @@ export class InvertFilterTransformation implements BaseTransform<PixelMap> {
async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";InvertFilterTransformation buf is empty", null);
}

3
imageknife/src/main/ets/components/imageknife/transform/MaskTransformation.ets
View File

@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import { MaskUtils } from "../utils/MaskUtils"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
import resmgr from "@ohos.resourceManager"
@ -34,7 +35,7 @@ export class MaskTransformation implements BaseTransform<PixelMap> {
async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";MaskTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";MaskTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";MaskTransformation buf is empty", null);
}

5
imageknife/src/main/ets/components/imageknife/transform/PixelationFilterTransformation.ets
View File

@ -18,6 +18,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import { TransformUtils } from "../transform/TransformUtils"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
import { pixelUtils } from "../utils/PixelUtils"
@ -40,7 +41,7 @@ export class PixelationFilterTransformation implements BaseTransform<PixelMap> {
transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";PixelationFilterTransformation buf is empty", null);
}
@ -78,7 +79,7 @@ export class PixelationFilterTransformation implements BaseTransform<PixelMap> {
pixelUtils.pixel(data, this._mPixel, func);
})
.catch((e) => {
console.log(Constants.PROJECT_TAG + ";error:" + e);
LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
func(e, null);
})
})

5
imageknife/src/main/ets/components/imageknife/transform/RotateImageTransformation.ets
View File

@ -17,6 +17,7 @@ import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import { TransformUtils } from "../transform/TransformUtils"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
@ -33,7 +34,7 @@ export class RotateImageTransformation implements BaseTransform<PixelMap> {
transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";RotateImageTransformation buf is empty", null);
}
@ -72,7 +73,7 @@ export class RotateImageTransformation implements BaseTransform<PixelMap> {
func("", data);
})
.catch((e) => {
console.log(Constants.PROJECT_TAG + ";error:" + e);
LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
func(e, null);
})
})

9
imageknife/src/main/ets/components/imageknife/transform/RoundedCornersTransformation.ets
View File

@ -18,6 +18,7 @@ import { ArcPoint } from "../entry/ArcPoint"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import { TransformUtils } from "../transform/TransformUtils"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
@ -49,10 +50,10 @@ export class RoundedCornersTransformation implements BaseTransform<PixelMap> {
}
transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
console.log('RoundedCornersTransformation = '+ this.getName()
LogUtil.log('RoundedCornersTransformation = '+ this.getName()
+ 'buf is null ='+ (buf == null));
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";RoundedCornersTransformation buf is empty", null);
}
@ -114,11 +115,11 @@ export class RoundedCornersTransformation implements BaseTransform<PixelMap> {
}
})
.catch((error) => {
console.log(Constants.PROJECT_TAG + "RoundedCornersTransformation error:" + error);
LogUtil.log(Constants.PROJECT_TAG + "RoundedCornersTransformation error:" + error);
});
})
.catch((e) => {
console.log(Constants.PROJECT_TAG + ";error:" + e);
LogUtil.log(Constants.PROJECT_TAG + ";error:" + e);
if (func) {
func(e, null);
}

3
imageknife/src/main/ets/components/imageknife/transform/SepiaFilterTransformation.ets
View File

@ -17,6 +17,7 @@ import { BaseTransform } from "../transform/BaseTransform"
import { AsyncTransform } from "../transform/AsyncTransform"
import { Constants } from "../constants/Constants"
import { RequestOption } from "../../imageknife/RequestOption"
import {LogUtil} from '../../imageknife/utils/LogUtil'
import image from "@ohos.multimedia.image"
/**
@ -31,7 +32,7 @@ export class SepiaFilterTransformation implements BaseTransform<PixelMap> {
async transform(buf: ArrayBuffer, request: RequestOption, func?: AsyncTransform<PixelMap>) {
if (!buf || buf.byteLength <= 0) {
console.log(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty");
LogUtil.log(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty");
if (func) {
func(Constants.PROJECT_TAG + ";SepiaFilterTransformation buf is empty", null);
}

10
imageknife/src/main/ets/components/imageknife/utils/FileTypeUtil.ets
View File

@ -12,7 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {LogUtil} from '../../imageknife/utils/LogUtil'
export class FileTypeUtil {
private map = new Map();
private READ_MIN_LENGTH;
@ -44,7 +44,7 @@ export class FileTypeUtil {
}
let dataView = new DataView(arraybuffer);
console.log('dataView +'+this.getDataViewAt(dataView,0)+this.getDataViewAt(dataView,1))
LogUtil.log('dataView +'+this.getDataViewAt(dataView,0)+this.getDataViewAt(dataView,1))
for(var [key,value] of this.map){
let keySplit = key.split(',')
@ -58,10 +58,10 @@ export class FileTypeUtil {
fileMagic+=this.getDataViewAt(dataView,offset+start)
start++;
}
// console.log('magic='+fileMagic+' keySplit[1]='+keySplit[1]+' fileMagic == keySplit[1] ='+(fileMagic == keySplit[1])+
// LogUtil.log('magic='+fileMagic+' keySplit[1]='+keySplit[1]+' fileMagic == keySplit[1] ='+(fileMagic == keySplit[1])+
// ' fileMagic type ='+typeof(fileMagic) + ' keySplit[1]='+typeof(keySplit[1]))
if(fileMagic == keySplit[1]){
console.log('匹配到了 fileType='+value)
LogUtil.log('匹配到了 fileType='+value)
fileType = value
break;
}
@ -105,7 +105,7 @@ export class FileTypeUtil {
private printMapContent(){
for(var [key,value] of this.map){
console.log('key='+key+'---value='+value)
LogUtil.log('key='+key+'---value='+value)
}
}

55
imageknife/src/main/ets/components/imageknife/utils/LogUtil.ets Normal file
View File

@ -0,0 +1,55 @@
/*
* Copyright (C) 2022 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.
*/
export class LogUtil {
public static OFF: number = 1
public static LOG: number = 2
public static DEBUG: number = 3
public static INFO: number = 4
public static WARN: number = 5
public static ERROR: number = 6
public static ALL: number = 7
public static mLogLevel:number = LogUtil.OFF;
public static debug(message: string, ...args: any[]) {
if (LogUtil.mLogLevel >= LogUtil.DEBUG) {
console.debug(message, args)
}
}
public static info(message: string, ...args: any[]) {
if (LogUtil.mLogLevel >= LogUtil.INFO) {
console.info(message, args)
}
}
public static log(message: string, ...args: any[]) {
if (LogUtil.mLogLevel >= LogUtil.LOG) {
console.log(message, args)
}
}
public static warn(message: string, ...args: any[]) {
if (LogUtil.mLogLevel >= LogUtil.WARN) {
console.warn(message, args)
}
}
// error 不做拦截
public static error(message: string, ...args: any[]) {
if(LogUtil.mLogLevel >= LogUtil.ERROR) {
console.error(message, args)
}
}
}

20
imageknife/src/main/ets/components/imageknife/utils/gif/GIFParseImpl.ets
View File

@ -16,20 +16,22 @@ import { IParseGif } from './IParseGif'
import { GIFFrame } from './GIFFrame'
import { LoadType } from '../../../../../../../GifWorker'
import { parseBufferToFrame } from './parse/GIFParse'
import {LogUtil} from '../../utils/LogUtil'
import image from '@ohos.multimedia.image'
export class GIFParseImpl implements IParseGif {
parseGifs(imageinfo: ArrayBuffer, callback: (data?, err?) => void, worker?,runMainThread?:boolean) {
let resolveWorker = worker;
console.log('parseGifs resolveWorker1 is null =' + (resolveWorker == null))
LogUtil.log('parseGifs resolveWorker1 is null =' + (resolveWorker == null))
if (!resolveWorker) {
resolveWorker = globalThis.ImageKnife.getGifWorker();
}
console.log('parseGifs resolveWorker2 is null =' + (resolveWorker == null))
LogUtil.log('parseGifs resolveWorker2 is null =' + (resolveWorker == null))
if (!!resolveWorker && !runMainThread) {
console.log('parseGifs in worker thread!')
this.useWorkerParse(resolveWorker, imageinfo, (data, err) => {
LogUtil.log('parseGifs in worker thread!')
let copyBuffer = imageinfo.slice(0);
this.useWorkerParse(resolveWorker, copyBuffer, (data, err) => {
if (err) {
callback(undefined, err)
} else {
@ -48,9 +50,9 @@ export class GIFParseImpl implements IParseGif {
}
})
} else {
console.log('parseGifs in main thread!')
LogUtil.log('parseGifs in main thread!')
let frames = parseBufferToFrame(imageinfo)
console.log('frames length =' + frames.length)
LogUtil.log('frames length =' + frames.length)
this.createPixelMapAll(frames).then((pixelmaps) => {
if (pixelmaps.length == frames.length) {
for (let i = 0;i < frames.length; i++) {
@ -58,11 +60,11 @@ export class GIFParseImpl implements IParseGif {
frame['drawPixelMap'] = pixelmaps[i];
frame['patch'] = null;
}
console.log('parseGifs in main thread! callback is done!')
LogUtil.log('parseGifs in main thread! callback is done!')
callback(frames, undefined)
}
}).catch(err => {
console.log('parseGifs in main thread! err =' + err)
LogUtil.log('parseGifs in main thread! err =' + err)
callback(undefined, err)
})
}
@ -97,7 +99,7 @@ export class GIFParseImpl implements IParseGif {
}
worker.onexit = function () {
console.log('gifWork worker.onexit!')
LogUtil.log('gifWork worker.onexit!')
}
worker.onmessage = (e) => {

1107
imageknife/src/main/ets/components/imageknife/utils/svg/SVGImageViewModel.ets
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@ -11,10 +11,9 @@
"repository": {},
"version": "1.0.0",
"dependencies": {
"@ohos/hvigor": "1.2.2",
"@ohos/hvigor-ohos-plugin": "1.2.2",
"@ohos/hypium": "1.0.2",
"@ohos/svg": "^1.1.0",
"hypium": "^1.0.0"
"@ohos/hypium": "1.0.3",
"@ohos/hvigor-ohos-plugin": "1.3.1",
"hypium": "^1.0.0",
"@ohos/hvigor": "1.3.1"
}
}