1.测试页面修改
2.配置和文件修改 Signed-off-by: zhoulisheng1 <zhoulisheng1@huawei.com>
This commit is contained in:
zhoulisheng1
parent
7cf9a129e9
commit
63c99d8e1c
13
CHANGELOG.md
13
CHANGELOG.md
|
|
@ -1,4 +1,15 @@
|
|||
## 1.0.4
|
||||
|
||||
渲染显示部分使用Canvas组件替代Image组件
|
||||
|
||||
重构渲染封装层ImageKnifeComponent自定义组件
|
||||
|
||||
新增GIF图片解析能力
|
||||
|
||||
新增SVG图片解析能力
|
||||
|
||||
## 1.0.3
|
||||
|
||||
- 适配OpenHarmony API9 Stage模型。
|
||||
## 1.0.2
|
||||
- 支持用户自定义扩展变换接口。
|
||||
|
|
@ -11,7 +22,7 @@
|
|||
- 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
|
||||
- 支持磁盘缓存，对于下载图片会保存一份至磁盘当中。
|
||||
- 支持进行图片变换。
|
||||
- 支持用户配置参数使用:(例如：配置是否开启第一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
|
||||
- 支持用户配置参数使用:(例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
|
||||
- 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能。
|
||||
- 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理。
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,172 @@
|
|||
OPEN SOURCE SOFTWARE NOTICE
|
||||
|
||||
Please note we provide an open source software notice for the third party open source software along with this software and/or this software component (in the following just “this SOFTWARE”). The open source software licenses are granted by the respective right holders.
|
||||
|
||||
Warranty Disclaimer
|
||||
THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
|
||||
|
||||
Copyright Notice and License Texts
|
||||
|
||||
----------------------------------------------------------------------
|
||||
Software: gifuct-js 2.1.2
|
||||
Copyright notice:
|
||||
Copyright (c) 2015 Matt Way
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Matt Way
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
----------------------------------------------------------------------
|
||||
Software: js-spark-md5 3.0.2
|
||||
Copyright notice:
|
||||
Copyright (c) 2015 André Cruz <amdfcruz@gmail.com>
|
||||
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
Version 2, December 2004
|
||||
|
||||
Copyright (C) 2015 André Cruz <amdfcruz@gmail.com>
|
||||
|
||||
Everyone is permitted to copy and distribute verbatim or modified
|
||||
copies of this license document, and changing it is allowed as long
|
||||
as the name is changed.
|
||||
|
||||
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. You just DO WHAT THE FUCK YOU WANT TO.
|
||||
Copyright (c) 2015 André Cruz <amdfcruz@gmail.com>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
----------------------------------------------------------------------
|
||||
Software: jsBinarySchemaParser v1.0.1
|
||||
Copyright notice:
|
||||
Copyright (c) 2015 Matt Way
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Matt Way
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
----------------------------------------------------------------------
|
||||
Software: UPNG.js 1
|
||||
Copyright notice:
|
||||
Copyright (c) 2017 Photopea
|
||||
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2017 Photopea
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
||||
----------------------------------------------------------------------
|
||||
Software: pako 1.0.5
|
||||
Copyright notice:
|
||||
Copyright (C) 2014-2017 by Vitaly Puzrin and Andrei Tuputcyn
|
||||
|
||||
(The MIT License)
|
||||
|
||||
Copyright (C) 2014-2017 by Vitaly Puzrin and Andrei Tuputcyn
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
----------------------------------------------------------------------
|
||||
Software:Stack Blur v1.0
|
||||
Copyright notice:
|
||||
Copyright (C) Mario Klingemann <mario at quasimondo.com>
|
||||
|
||||
Stack Blur v1.0 from
|
||||
http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
|
||||
|
||||
Java Author: Mario Klingemann <mario at quasimondo.com>
|
||||
http://incubator.quasimondo.com
|
||||
created Feburary 29, 2004
|
||||
port : Yahel Bouaziz <yahel at kayenko.com>
|
||||
http://www.kayenko.com
|
||||
ported april 5th, 2012
|
||||
|
||||
This is a compromise between Gaussian Blur and Box blur
|
||||
It creates much better looking blurs than Box Blur, but is
|
||||
7x faster than my Gaussian Blur implementation.
|
||||
|
||||
I called it Stack Blur because this describes best how this
|
||||
filter works internally: it creates a kind of moving stack
|
||||
of colors whilst scanning through the image. Thereby it
|
||||
just has to add one new block of color to the right side
|
||||
of the stack and remove the leftmost color. The remaining
|
||||
colors on the topmost layer of the stack are either added on
|
||||
or reduced by one, depending on if they are on the right or
|
||||
on the left side of the stack.
|
||||
|
||||
If you are using this algorithm in your code please add
|
||||
the following line:
|
||||
|
||||
Stack Blur Algorithm by Mario Klingemann <mario@quasimondo.com>
|
||||
7
OAT.xml
7
OAT.xml
|
|
@ -6,11 +6,18 @@
|
|||
<filteritem type="filename" name="hvigorfile.js" desc="hvigor构建脚本，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="*.json5" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filepath" name="imageknife/src/main/ets/components/imageknife/pngj/UPNG.js" desc="使用开源库UPNG,使用其默认版权头,无需修改"/>
|
||||
<filteritem type="filepath" name="imageknife/src/main/ets/components/imageknife/utils/gif/parse/lzw.js" desc="使用开源库gifuct-js,使用其默认版权头,无需修改"/>
|
||||
<filteritem type="filename" name="LICENSE" desc="版权文件，不添加版权头"/>
|
||||
<filteritem type="filename" name="NOTICE" desc="NOTICE文件，不添加版权头"/>
|
||||
|
||||
</filefilter>
|
||||
<filefilter name="defaultPolicyFilter" desc="Filters for compatibility，license header policies">
|
||||
<filteritem type="filename" name="hvigorfile.js" desc="hvigor构建脚本，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filename" name="*.json5" desc="hvigor配置文件，DevEco Studio自动生成，不手动修改"/>
|
||||
<filteritem type="filepath" name="imageknife/src/main/ets/components/imageknife/pngj/UPNG.js" desc="使用开源库UPNG,使用其默认版权头,无需修改"/>
|
||||
<filteritem type="filepath" name="imageknife/src/main/ets/components/imageknife/utils/gif/parse/lzw.js" desc="使用开源库gifuct-js,使用其默认版权头,无需修改"/>
|
||||
<filteritem type="filename" name="LICENSE" desc="版权文件，不添加版权头"/>
|
||||
<filteritem type="filename" name="NOTICE" desc="NOTICE文件，不添加版权头"/>
|
||||
</filefilter>
|
||||
<filefilter name="defaultPolicyFilter" desc="Filters for copyright header policies">
|
||||
</filefilter>
|
||||
|
|
|
|||
484
README.md
484
README.md
|
|
@ -8,12 +8,12 @@
|
|||
|
||||
- 支持内存缓存，使用LRUCache算法，对图片数据进行内存缓存。
|
||||
- 支持磁盘缓存，对于下载图片会保存一份至磁盘当中。
|
||||
- 支持进行图片变换,支持自定义变换。
|
||||
- 支持用户配置参数使用:(例如：配置是否开启第一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
|
||||
- 支持进行图片变换: 支持图像像素源图片变换效果。
|
||||
- 支持用户配置参数使用:(例如：配置是否开启一级内存缓存，配置磁盘缓存策略，配置仅使用缓存加载数据，配置图片变换效果，配置占位图，配置加载失败占位图等)。
|
||||
- 推荐使用ImageKnifeComponent组件配合ImageKnifeOption参数来实现功能。
|
||||
- 支持用户自定义配置实现能力参考ImageKnifeComponent组件中对于入参ImageKnifeOption的处理。
|
||||
|
||||
<img src="screenshot/g3.gif" width="100%"/>
|
||||
<img src="screenshot/gif1.gif" width="50%"/>
|
||||
|
||||
## 下载安装
|
||||
|
||||
|
|
@ -25,7 +25,7 @@ OpenHarmony npm环境配置等更多内容，参考安装教程 [如何安装Ope
|
|||
|
||||
## 使用说明
|
||||
|
||||
1.首先初始化全局ImageKnife实例，在AbilityStage.ts中调用ImageKnife.with(this.context)进行初始化
|
||||
1.在AbilityStage.ts中,初始化全局ImageKnife实例。
|
||||
|
||||
```typescript
|
||||
import AbilityStage from "@ohos.application.AbilityStage"
|
||||
|
|
@ -33,27 +33,224 @@ import {ImageKnife} from '@ohos/imageknife'
|
|||
|
||||
export default class MyAbilityStage extends AbilityStage {
|
||||
onCreate() {
|
||||
globalThis.ImageKnife = ImageKnife.with(this.context);
|
||||
// 初始化全局ImageKnife实例，在AbilityStage.ts中调用ImageKnife.with(this.context)进行初始化
|
||||
globalThis.ImageKnife = ImageKnife.with(this.context)
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2.参考[推荐使用](###'推荐使用')或[自定义实现](###'自定义实现')
|
||||
### 1.加载普通图片
|
||||
|
||||
#### 推荐使用：
|
||||
|
||||
使用ImageKnifeOption作为入参，配合自定义组件ImageKnifeComponent使用。
|
||||
接下来我们来写个简单实例看看:
|
||||
|
||||
```typescript
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
{ // 加载一张本地的jpg资源（必选）
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
// 组件宽设置为300，高设置为300（必选）
|
||||
size: { width: '300', height: '300' },
|
||||
// 占位图使用本地资源icon_loading（可选）
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
// 失败占位图使用本地资源icon_failed（可选）
|
||||
errorholderSrc: $r('app.media.icon_failed')
|
||||
};
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
非常简单，仅需定义一个ImageKnifeOption数据对象，然后在你需要的UI位置，加入ImageKnifeComponent自定义组件就可以加载出一张图像了。
|
||||
|
||||
### 2.加载SVG图片
|
||||
|
||||
加载svg其实和普通流程没有区别,只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.svgSample'),`svg类型图片即可。
|
||||
|
||||
目前加载SVG图片解析依赖了 [SVG三方库](https://gitee.com/openharmony-sig/ohos-svg)，由于目前该库还无法解析mask标签，所以这里大家需要留意一下。
|
||||
|
||||
### 3.加载GIF图片
|
||||
|
||||
3.1加载GIF其实和普通流程也没有区别只要将 `loadSrc: $r('app.media.jpgSample'),` `改成一张 loadSrc: $r('app.media.gifSample'),`GIF图片即可。
|
||||
|
||||
但是解析gif图片属于耗时操作，所以我们需要将其放入子线程操作。 **这里我们需要在页面的创建和销毁上添加一个worker子线程操作。**
|
||||
|
||||
```typescript
|
||||
import router from '@system.router';
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
} from '@ohos/imageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct IndexFunctionDemo {
|
||||
private globalGifWorker:any = undefined
|
||||
@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')
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("简单示例：加载一张gif图片").fontSize(15)
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
// 页面初始化创建worker
|
||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
||||
type: 'classic',
|
||||
name: 'ImageKnifeParseGIF'
|
||||
})
|
||||
// gif解析在子线程,请在页面构建后创建worker,注入imageknife
|
||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||
}
|
||||
aboutToDisappear(){
|
||||
// 页面销毁 销毁worker
|
||||
if(this.globalGifWorker){
|
||||
this.globalGifWorker.terminate();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
#### 创建worker
|
||||
|
||||
由于使用到了worker，目前worker创建只能在entry里面，所以我这边着重讲一下worker配置的流程。
|
||||
|
||||
在entry/src/main/ets/pages目录下创建文件夹workers,然后在文件夹中创建gifParseWorker.ts文件，最后填入内容:
|
||||
|
||||
```typescript
|
||||
import arkWorker from '@ohos.worker';
|
||||
import { gifHandler } from '@ohos/imageknife/GifWorker'
|
||||
|
||||
arkWorker.parentPort.onmessage = gifHandler;
|
||||
```
|
||||
|
||||
代码处理流程已经封装在gifHanlder函数中了。
|
||||
|
||||
<img src="screenshot/jpg1.jpg" width="100%"/>
|
||||
|
||||
接下来我们需要在entry/build-profile.json5文件中添加配置
|
||||
|
||||
```typescript
|
||||
{
|
||||
"apiType": 'stageMode',
|
||||
"buildOption": {
|
||||
"sourceOption": {
|
||||
"workers": [
|
||||
"./src/main/ets/pages/workers/gifParseWorker.ts",
|
||||
]
|
||||
}
|
||||
},
|
||||
"targets": [
|
||||
{
|
||||
"name": "default",
|
||||
},
|
||||
{
|
||||
"name": "ohosTest",
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
<img src="screenshot/jpg2.jpg" width="100%"/>
|
||||
|
||||
|
||||
|
||||
经过了上面的配置，就配置好了worker, GIF图片加载就能顺利进行了。 **如果GIF加载未成功，可以检查一下worker配置是否完成**。
|
||||
|
||||
## 进阶使用
|
||||
|
||||
如果简单的加载一张图像无法满足需求，我们可以看看ImageKnifeOption这个类提供了哪些扩展能力。
|
||||
|
||||
### ImageKnifeOption参数列表
|
||||
|
||||
| 参数名称 | 入参内容 | 功能简介 |
|
||||
| ---------------------------- | ------------------------------------------------------------ | ----------------------------------- |
|
||||
| size | { width: string, height: string } | 设置组件宽高（必选） |
|
||||
| loadSrc | string \| PixelMap \| Resource | 设置主图资源（必选） |
|
||||
| mainScaleType | ScaleType | 设置主图展示样式（可选） |
|
||||
| strategy | DiskStrategy | 设置磁盘缓存策略（可选） |
|
||||
| dontAnimateFlag | boolean | gif加载展示一帧（可选） |
|
||||
| placeholderSrc | PixelMap \| Resource | 设置占位图（可选） |
|
||||
| placeholderScaleType | ScaleType | 设置占位图展示样式（可选） |
|
||||
| errorholderSrc | PixelMap \| Resource | 设置加载失败占位图（可选） |
|
||||
| errorholderSrcScaleType | ScaleType | 设置失败占位图展示样式（可选） |
|
||||
| retryholderSrc | PixelMap \| Resource | 设置加载失败重试占位图（可选） |
|
||||
| retryholderScaleType | ScaleType | 设置重试占位图展示样式（可选） |
|
||||
| thumbSizeMultiplier | number 范围(0,1] | 设置缩略图占比（可选） |
|
||||
| thumbSizeDelay | number | 设置缩略图展示时间（可选） |
|
||||
| thumbSizeMultiplierScaleType | ScaleType | 设置缩略图展示样式（可选） |
|
||||
| displayProgress | boolean | 设置是否展示下载进度条（可选） |
|
||||
| canRetryClick | boolean | 设置重试图层是否点击重试（可选） |
|
||||
| onlyRetrieveFromCache | boolean | 仅使用缓存加载数据（可选） |
|
||||
| isCacheable | boolean | 是否开启一级内存缓存（可选） |
|
||||
| gif | {<br/> // 返回一周期动画gif消耗的时间<br/> loopFinish?: (loopTime?) => void<br/> // gif播放速率相关<br/> speedFactory?: number<br/> // 直接展示gif第几帧数据<br/> seekTo?: number<br/> } | GIF播放控制能力（可选） |
|
||||
| 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对象上按需添加即可。
|
||||
|
||||
这里我们着重讲一下**自定义实现绘制方案**。为了增强绘制扩展能力，目前ImageKnifeComponent使用了Canvas的渲染能力作为基础。在此之上为了抽象组件绘制表达。我将图像的状态使用了**IDrawLifeCycle绘制生命周期进行表达**，
|
||||
|
||||
大致流程 展示占位图->展示网络加载进度->展示缩略图->展示主图->展示重试图层->展示失败占位图
|
||||
|
||||
<img src="screenshot/png1.png" width="100%"/>
|
||||
|
||||
ImageKnifeComponent内部，责任链实现。 用户参数设置->全局参数设置->自定义组件内部设置
|
||||
|
||||
采用责任链的好处是，用户可以通过自定义绘制，重新绘制图层。如果不想绘制也可以通过预制回调获取绘制流程信息。
|
||||
|
||||
<img src="screenshot/png2.png" width="70%"/>
|
||||
|
||||
### 场景1:默认的展示不满足需求，需要加个圆角效果。
|
||||
|
||||
代码如下:
|
||||
|
||||
```typescript
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {ImageKnifeDrawFactory} from '@ohos/imageknife'
|
||||
@Entry
|
||||
@Component
|
||||
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（可选）
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
// 绘制圆角30，边框5，边框"#ff00ff".用户自定义绘制（可选）
|
||||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -69,86 +266,111 @@ struct Index {
|
|||
}
|
||||
```
|
||||
|
||||
#### 自定义实现：
|
||||
`ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)`我们深入查看源码可以发现，实际上是对IDrawLifeCycle接口的部分实现，这里我介绍一下IDrawLifeCycle。
|
||||
|
||||
使用原生Image组件，配合用户配置参数实现。
|
||||
**IDrawLifeCycle的返回值代表事件是否被消费，如果被消费接下来组件内部就不会处理，如果没被消费就会传递到下一个使用者。目前消费流程（用户自定义->全局配置定义->组件内部默认定义）**
|
||||
|
||||
##### 步骤1：
|
||||
所以我们在当数据是一张PixelMap的时候（目前jpg png bmp webp svg返回的都是PixelMap，gif返回GIFFrame数组），我们返回了true。消费了事件，代表这个绘制流程用户自定义完成。
|
||||
|
||||
定义自定义类
|
||||
<img src="screenshot/gif2.gif" width="50%"/>
|
||||
|
||||
由于IDrawLifeCycle实现较为冗长，我们封装了ImageKnifeDrawFactory工厂，提供了网络下载百分比效果、圆角、椭圆添加边框等能力。下面我们就再看看使用工厂封装之后的场景代码。
|
||||
|
||||
### 场景2: 网络下载百分比效果展示
|
||||
|
||||
当进行加载网络图片时，可能需要展示网络下载百分比动画。但是默认的动画又不能满足需求，这个时候我们就需要自定义网络下载百分比效果。代码如下:
|
||||
|
||||
```typescript
|
||||
export default class PixelMapPack{
|
||||
pixelMap:PixelMap;
|
||||
import AbilityStage from '@ohos.application.AbilityStage'
|
||||
import { ImageKnife,ImageKnifeDrawFactory} from '@ohos/imageknife'
|
||||
|
||||
import ArkWorker from '@ohos.worker'
|
||||
|
||||
export default class MyAbilityStage extends AbilityStage {
|
||||
onCreate() {
|
||||
globalThis.ImageKnife = ImageKnife.with(this.context);
|
||||
// 全局配置网络加载进度条
|
||||
globalThis.ImageKnife.setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
使用@State关联PixelMapPack;
|
||||
这里大家可能会问，为什么会将这个IDrawLifeCycle放在AbilityStage里面实现？
|
||||
|
||||
这是因为网络下载百分比进度很多时候都是全局通用，如果有需要全局配置的自定义展示方案。推荐在AbilityStage里面，往ImageKnife的setDefaultLifeCycle函数中注入，即可将ImageKnifeComponent中的默认绘制方案替换。
|
||||
|
||||
在这里我们实现的效果如下图所示。
|
||||
|
||||
<img src="screenshot/gif3.gif" width="50%"/>
|
||||
|
||||
## 高级用法
|
||||
|
||||
以上简单使用和进阶使用都是经过一层自定义组件封装之后形成的，RequestOption封装成了ImageKnifeOption,绘制部分封装成了自定义组件ImageKnifeComponent。
|
||||
|
||||
如果用户其实并不关心绘制部分，或者说想用自己的通用方案对自定义组件ImageKnifeComponent重构都是可以的。
|
||||
|
||||
下面我们会着重指导用户如何复用图片加载逻辑，重构自定义组件ImageKnifeComponent。
|
||||
|
||||
首先我们先看看RequestOption构建的内容,如下表格所示:
|
||||
|
||||
### 数据加载
|
||||
|
||||
#### RequestOption构建:
|
||||
|
||||
请查看[RequestOption接口方法](##'RequestOption 用户配置参数')
|
||||
|
||||
了解了RequestOption的参数内容后，我们可以参考ImageKnifeComponent组件代码进行分析。
|
||||
|
||||
**从`imageKnifeExecute()`函数入口，首先我们需要构建一个RequestOption对象，`let request = new RequestOption()`, 接下来就是按需配置request对象的内容，最后使用 `globalThis.ImageKnife.call(request)`发送request执行任务即可。**
|
||||
|
||||
是不是很简单，而其实最重要的内容是就是: **按需配置request对象的内容** 为了更好理解，我举例说明一下:
|
||||
|
||||
#### 场景一: 简单加载一张图片
|
||||
|
||||
```typescript
|
||||
@State imageKnifePixelMapPack:PixelMapPack = new PixelMapPack();
|
||||
width:number = 200;
|
||||
height:number = 200;
|
||||
let request = new RequestOption();
|
||||
（必传）
|
||||
request.load("图片url")
|
||||
（可选 整个request监听回调）
|
||||
.addListener((err, data) => {
|
||||
// data 是ImageKnifeData对象
|
||||
if(data.isPixelMap()){
|
||||
// 这样就获取到了目标PixelMap
|
||||
let pixelmap = data.drawPixleMap.imagePixelMap;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
|
||||
let compSize = {
|
||||
width: this.currentWidth,
|
||||
height:this.currentHeight
|
||||
}
|
||||
// （必传）这里setImageViewSize函数必传组件大小，因为涉及到图片变换效果都需要适配图像源和组件大小。
|
||||
request.setImageViewSize(compSize)
|
||||
// 最后使用ImageKnife的call函数调用request即可
|
||||
globalThis.ImageKnife.call(request)
|
||||
```
|
||||
|
||||
##### 步骤2：
|
||||
**其他场景，可以按需加载**
|
||||
|
||||
在你的component组件中，写下一个Image组件，将基础参数（入参PixelMap，组件的宽、高）配置好。
|
||||
比如我需要配置 **占位图** 只需要 在request对象创建好之后，调用 **placeholder** 函数即可
|
||||
|
||||
```typescript
|
||||
Image(this.imageKnifePixelMapPack.pixelMap)
|
||||
.backgroundColor(Color.Grey)
|
||||
.objectFit(ImageFit.Contain)
|
||||
.width(this.width)
|
||||
.height(this.height)
|
||||
request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
|
||||
console.log('request.placeholder callback')
|
||||
this.displayPlaceholder(data)
|
||||
})
|
||||
```
|
||||
|
||||
##### 步骤3：
|
||||
|
||||
在aboutToAppear() 函数中调用加载流程。
|
||||
再比如 我对缓存配置有要求，我要禁用内存缓存，调用 **skipMemoryCache** 函数即可
|
||||
|
||||
```typescript
|
||||
//配置参数
|
||||
let requestOptin = new RequestOption();
|
||||
//加载本地图片
|
||||
requestOptin.load($r('app.media.jpgSample'))
|
||||
.addListener((err,data) => {
|
||||
//加载成功/失败回调监听
|
||||
if (data.isPixelMap()) {
|
||||
let pixelMapPack = new PixelMapPack();
|
||||
pixelMapPack.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
//当前的PixelMap资源发生变化，jpgSample图片将会由Image组件重新渲染，并展示
|
||||
this.imageKnifePixelMapPack = pixelMapPack;
|
||||
}
|
||||
})
|
||||
.placeholder( $r('app.media.icon_loading'), (data)=>{
|
||||
// 占位图回调监听
|
||||
})
|
||||
.errorholder( $r('app.media.icon_failed'), (data)=>{
|
||||
// 失败占位图回调监听
|
||||
})
|
||||
.thumbnail(0.3, (data) => {
|
||||
// 缩略图加载成功回调
|
||||
})
|
||||
// 一定要把控件大小传给RequestOption,图片变换必须
|
||||
.setImageViewSize({width:200, height:200})
|
||||
// 设置缓存策略
|
||||
.diskCacheStrategy(new AUTOMATIC())
|
||||
.addProgressListener((percentValue: string) => {
|
||||
// 图片网络加载进度条百分比回调
|
||||
})
|
||||
.addRetryListener((error: any) => {
|
||||
// 加载失败重试监听 图片加载失败时优先展示重试图层，点击重试图层，会重新进行一次加载流程
|
||||
})
|
||||
// 左上圆角10pixel像素点
|
||||
.roundedCorners({top:10})
|
||||
// 启动加载流程，执行结果将会返回到上面的回调接口中
|
||||
globalThis.ImageKnife.call(requestOptin);
|
||||
request.skipMemoryCache(true)
|
||||
```
|
||||
|
||||
##### 步骤4：
|
||||
这里只是简单介绍部分使用，更多的内容请参考 **按需加载** 原则，并且可以参考ImageKnifeComponent源码或者根据文档自行探索实现。
|
||||
|
||||
|
||||
更多细节设置请参考自定义Component的ImageKnifeComponent实现。
|
||||
|
||||
## 接口说明
|
||||
|
||||
|
|
@ -161,6 +383,7 @@ let requestOptin = new RequestOption();
|
|||
| diskCacheStrategy(strategy: DiskStrategy) | DiskStrategy | 配置磁盘缓存策略 NONE SOURCE RESULT ALL AUTOMATIC |
|
||||
| placeholder(src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap>) | src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap> | 配置占位图，其中func为数据回调函数 |
|
||||
| errorholder(src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap>) | src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap> | 配置加载失败占位图，其中func为数据回调函数 |
|
||||
| retryholder(src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap>) | src: PixelMap \| Resource, func?: AsyncSuccess<PixelMap> | 配置重试占位图，如果配置则加载失败后优先展示重试占位图 |
|
||||
| addListener(func: AsyncCallback<PixelMap>) | func: AsyncCallback<PixelMap> | 配置整个监听回调，数据正常加载返回，加载失败返回错误信息 |
|
||||
| thumbnail(sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData>) | sizeMultiplier:number, func?: AsyncSuccess<ImageKnifeData> | 设置缩略图比例，缩略图返回后，加载并展示缩略图 |
|
||||
| addProgressListener(func?: AsyncSuccess<string>){ this.progressFunc = func; return this; } | func?: AsyncSuccess<string> | 设置网络下载百分比监听，返回数据加载百分比数值 |
|
||||
|
|
@ -169,6 +392,8 @@ let requestOptin = new RequestOption();
|
|||
| skipMemoryCache(skip: boolean) | skip: boolean | 配置是否跳过内存缓存 |
|
||||
| retrieveDataFromCache(flag: boolean) | flag: boolean | 配置仅从缓存中加载数据 |
|
||||
|
||||
|
||||
|
||||
同时支持[图片变换相关](##'图片变换相关')接口。
|
||||
|
||||
### ImageKnife 启动器/门面类
|
||||
|
|
@ -183,7 +408,7 @@ let requestOptin = new RequestOption();
|
|||
| 使用方法 | 类型 | 策略描述 |
|
||||
| ------------------------------------------ | --------- | ---------------------------------------- |
|
||||
| request.diskCacheStrategy(new ALL()) | ALL | 表示既缓存原始图片，也缓存转换过后的图片 |
|
||||
| request.diskCacheStrategy(new AUTOMATIC()) | AUTOMATIC | 表示尝试对本地和远程图片使用最佳的策略 |
|
||||
| request.diskCacheStrategy(new AUTOMATIC()) | AUTOMATIC | 表示尝试对本地和远程图片使用适合的策略 |
|
||||
| request.diskCacheStrategy(new DATA()) | DATA | 表示只缓存原始图片 |
|
||||
| request.diskCacheStrategy(new NONE()) | NONE | 表示不缓存任何内容 |
|
||||
| request.diskCacheStrategy(new RESOURCE()) | RESOURCE | 表示只缓存转换过后的图片 |
|
||||
|
|
@ -212,6 +437,8 @@ let requestOptin = new RequestOption();
|
|||
| request.mask() | MaskTransformation | 遮罩 |
|
||||
| request.swirlFilter() | SwirlFilterTransformation | 扭曲滤波器 |
|
||||
|
||||
<img src="screenshot/gif4.gif" width="50%"/>
|
||||
|
||||
## 兼容性
|
||||
|
||||
支持 OpenHarmony API version 9 及以上版本。
|
||||
|
|
@ -221,72 +448,69 @@ let requestOptin = new RequestOption();
|
|||
```
|
||||
/imageknife/src/
|
||||
- main/ets/components
|
||||
- cache # 缓存相关内容
|
||||
- diskstrategy # 缓存策略
|
||||
- key # 缓存key生成策略
|
||||
- Base64.ets # Base64算法
|
||||
- cache # 缓存相关内容
|
||||
- diskstrategy # 缓存策略
|
||||
- key # 缓存key生成策略
|
||||
- Base64.ets # Base64算法
|
||||
- CustomMap.ets # 自定义Map封装
|
||||
- DiskCacheEntry.ets# 磁盘缓存entry
|
||||
- DiskLruCache.ets # 磁盘LRU缓存策略
|
||||
- FileReader.ets # 文件读取相关
|
||||
- DiskCacheEntry.ets # 磁盘缓存entry
|
||||
- DiskLruCache.ets # 磁盘LRU缓存策略
|
||||
- FileReader.ets # 文件读取相关
|
||||
- FileUtils.ets # 文件工具类
|
||||
- LruCache.ets # 内存LRU缓存策略
|
||||
- Md5.ets # MD5算法
|
||||
- LruCache.ets # 内存LRU缓存策略
|
||||
- Md5.ets # MD5算法
|
||||
|
||||
- imageknife # imageknife主要内容
|
||||
- compress # 压缩相关
|
||||
- constants # 常量相关
|
||||
- entry # 部分数据结构
|
||||
- holder # 占位图相关解析
|
||||
- interface # 接口相关
|
||||
- imageknife # imageknife主要内容
|
||||
- compress # 压缩相关
|
||||
- constants # 常量相关
|
||||
- entry # 部分数据结构
|
||||
- holder # 占位图相关解析
|
||||
- interface # 接口相关
|
||||
- networkmanage # 网络相关
|
||||
- pngj # pngj相关
|
||||
- pngj # pngj相关
|
||||
- requestmanage # imageknife请求相关
|
||||
- resourcemanage # 本地资源解析相关
|
||||
- transform # 图片变换相关
|
||||
- utils # 工具类相关
|
||||
- ImageKnife.ets # imageknife门面，app持久化类
|
||||
- ImageKnifeData.ets # 数据封装
|
||||
- ImageKnifeComponent.ets # 自定义控件封装
|
||||
- ImageKnifeOption.ets # 用户传参数封装
|
||||
- PixelMapPack.ets # PixelMap封装
|
||||
- RequestOption.ets # 用户设置参数封装
|
||||
- resourcemanage # 本地资源解析相关
|
||||
- transform # 图片变换相关
|
||||
- utils # 工具类相关
|
||||
- ImageKnife.ets # imageknife门面，app持久化类
|
||||
- ImageKnifeData.ets # 数据封装
|
||||
- ImageKnifeComponent.ets # 自定义控件封装
|
||||
- ImageKnifeDrawFactory.ets # IDrawLifeCycle用户自定义实现
|
||||
- ImageKnifeOption.ets # 用户传参数封装
|
||||
- RequestOption.ets # 用户设置参数封装
|
||||
|
||||
/entry/src/
|
||||
- main/ets/MainAbility
|
||||
- pages # 测试page页面列表
|
||||
- basicTestFeatureAbilityPage.ets # 测试元能力
|
||||
- basicTestFileIOPage.ets # 测试fileio
|
||||
- basicTestMediaImage.ets # 测试媒体image
|
||||
- basicTestResourceManagerPage.ets # 测试本地资源解析
|
||||
- compressPage.ets # 压缩页面
|
||||
- cropImagePage.ets # 裁剪页面
|
||||
- cropImagePage2.ets # 手势裁剪页面
|
||||
- frescoImageTestCasePage.ets # 测试属性动画组件切换
|
||||
- frescoLayerTestCasePage.ets # 测试ImageKnifeComponent组件切换配合属性动画
|
||||
- frescoRetryTestCasePage.ets # 测试ImageKnifeComponent加载失败重试
|
||||
- index.ets # 测试页面入口
|
||||
- indexFresco.ets # 二级测试页面入口
|
||||
- loadNetworkTestCasePage.ets # 网络加载测试
|
||||
- loadResourceTestCasePage.ets # 本地加载测试
|
||||
- showErrorholderTestCasePage.ets # 加载失败占位图测试
|
||||
- storageTestDiskLruCache.ets # 磁盘缓存测试
|
||||
- storageTestLruCache.ets # 内存缓存测试
|
||||
- testAllCacheInfoPage.ets # 所有缓存信息获取测试
|
||||
- testAllTypeImageKnifeComponentPage.ets # 所有类型图片加载测试
|
||||
- testAllTypeNativeImagePage.ets # 所有类型本地图片加载测试
|
||||
- testGifDontAnimatePage.ets # gif加载静态图片测试
|
||||
- testImageKnifeOptionChangedPage.ets # ImageKnifeOption数据切换测试
|
||||
- testImageKnifeOptionChangedPage2.ets # ImageKnifeOption数据切换测试
|
||||
- testMultiThreadWorkerPage2.ets # 多线程测试
|
||||
- testPlaceholderPage.ets # 加载占位图测试
|
||||
- testPreloadPage.ets # 预加载测试
|
||||
- testResourceManagerPage.ets # 解析本地资源测试
|
||||
- transformPixelMapPage.ets # 所有类型变换测试
|
||||
- transformTestCasePage.ets # 所有类型变换配合ImageKnifeComponent测试
|
||||
- pages # 测试page页面列表
|
||||
- basicTestFeatureAbilityPage.ets # 测试元能力
|
||||
- basicTestFileIOPage.ets # 测试fileio
|
||||
- basicTestMediaImage.ets # 测试媒体image
|
||||
- basicTestResourceManagerPage.ets # 测试本地资源解析
|
||||
- compressPage.ets # 压缩页面
|
||||
- cropImagePage2.ets # 手势裁剪页面
|
||||
- frescoImageTestCasePage.ets # 测试属性动画组件切换
|
||||
- frescoRetryTestCasePage.ets # 测试ImageKnifeComponent加载失败重试
|
||||
- gifTestCasePage.ets # 测试gif解析页面
|
||||
- svgTestCasePage.ets # 测试svg解析页面
|
||||
- imageknifeTestCaseIndex.ets # 测试用例页面入口
|
||||
- index.ets # 程序入口页面
|
||||
- loadNetworkTestCasePage.ets # 网络加载测试
|
||||
- loadResourceTestCasePage.ets # 本地加载测试
|
||||
- showErrorholderTestCasePage.ets # 加载失败占位图测试
|
||||
- storageTestDiskLruCache.ets # 磁盘缓存测试
|
||||
- storageTestLruCache.ets # 内存缓存测试
|
||||
- testAllCacheInfoPage.ets # 所有缓存信息获取测试
|
||||
- testGifDontAnimatePage.ets # gif加载静态图片测试
|
||||
- testImageKnifeOptionChangedPage.ets # 数据切换测试
|
||||
- testImageKnifeOptionChangedPage2.ets # 数据切换测试,部分变换
|
||||
- testImageKnifeOptionChangedPage3.ets # 数据切换测试,组件动画
|
||||
- testImageKnifeOptionChangedPage4.ets # 数据切换测试,内容动画
|
||||
- testImageKnifeOptionChangedPage5.ets # 数据切换测试,ImageKnifeDrawFactory封装圆角圆环边框等
|
||||
- testPreloadPage.ets # 预加载测试
|
||||
- transformPixelMapPage.ets # 所有类型变换测试
|
||||
|
||||
- workers # 测试worker多线程
|
||||
- worker1.js # worker多线程测试
|
||||
- gifParseWorker.ts # gifworker子线程解析
|
||||
- worker1.js # worker多线程测试
|
||||
```
|
||||
|
||||
## 贡献代码
|
||||
|
|
@ -301,4 +525,6 @@ let requestOptin = new RequestOption();
|
|||
|
||||
1.目前只支持一种图片变换效果。
|
||||
|
||||
2.目前svg和gif动图不支持变换效果。
|
||||
2.目前svg和gif动图不支持变换效果。
|
||||
|
||||
3.svg解析目前不支持mask标签。
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
"sourceOption": {
|
||||
"workers": [
|
||||
"./src/main/ets/pages/workers/worker1.js",
|
||||
"./src/main/ets/pages/workers/gifParseWorker.ts",
|
||||
]
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
{
|
||||
"license":"ISC",
|
||||
"devDependencies":{},
|
||||
"name":"entry",
|
||||
"ohos":{
|
||||
"org":"huawei",
|
||||
"directoryLevel":"module",
|
||||
"buildTool":"hvigor"
|
||||
"license": "ISC",
|
||||
"devDependencies": {},
|
||||
"name": "entry",
|
||||
"ohos": {
|
||||
"org": "huawei",
|
||||
"directoryLevel": "module",
|
||||
"buildTool": "hvigor"
|
||||
},
|
||||
"description":"example description",
|
||||
"repository":{},
|
||||
"version":"1.0.0",
|
||||
"dependencies":{
|
||||
"@ohos/imageknife":"file:../imageknife"
|
||||
"description": "example description",
|
||||
"repository": {},
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@ohos/imageknife": "file:../imageknife"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,11 +12,16 @@
|
|||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import AbilityStage from "@ohos.application.AbilityStage"
|
||||
import {ImageKnife} from '@ohos/imageknife'
|
||||
import AbilityStage from '@ohos.application.AbilityStage'
|
||||
import { ImageKnife,ImageKnifeDrawFactory} from '@ohos/imageknife'
|
||||
|
||||
import ArkWorker from '@ohos.worker'
|
||||
|
||||
export default class MyAbilityStage extends AbilityStage {
|
||||
onCreate() {
|
||||
globalThis.ImageKnife = ImageKnife.with(this.context);
|
||||
|
||||
// 全局配置网络加载进度条
|
||||
globalThis.ImageKnife.setDefaultLifeCycle(ImageKnifeDrawFactory.createProgressLifeCycle("#10a5ff", 0.5))
|
||||
}
|
||||
}
|
||||
|
|
@ -16,41 +16,22 @@ import Ability from '@ohos.application.Ability'
|
|||
import {ImageKnife} from '@ohos/imageknife'
|
||||
export default class MainAbility extends Ability {
|
||||
onCreate(want, launchParam) {
|
||||
console.log("[Demo] MainAbility onCreate")
|
||||
globalThis.abilityWant = want;
|
||||
|
||||
|
||||
// this.context.resourceManager.getMedia()
|
||||
// globalThis.ImageKnifeContext = this.context;
|
||||
// globalThis.ImageKnife = ImageKnife.with(this.context);
|
||||
// this.context.filesDir
|
||||
|
||||
console.log('globalThis.ImageKnife 1 ='+typeof globalThis.ImageKnife)
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
console.log("[Demo] MainAbility onDestroy")
|
||||
}
|
||||
|
||||
onWindowStageCreate(windowStage) {
|
||||
// Main window is created, set main page for this ability
|
||||
console.log("[Demo] MainAbility onWindowStageCreate")
|
||||
|
||||
windowStage.setUIContent(this.context, "pages/index", null)
|
||||
}
|
||||
|
||||
onWindowStageDestroy() {
|
||||
// Main window is destroyed, release UI related resources
|
||||
console.log("[Demo] MainAbility onWindowStageDestroy")
|
||||
}
|
||||
|
||||
onForeground() {
|
||||
// Ability has brought to foreground
|
||||
console.log("[Demo] MainAbility onForeground")
|
||||
}
|
||||
|
||||
onBackground() {
|
||||
// Ability has back to background
|
||||
console.log("[Demo] MainAbility onBackground")
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -17,13 +17,12 @@ import { FileUtils } from '@ohos/imageknife'
|
|||
import { FileTypeUtil } from '@ohos/imageknife'
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
import { Base64 } from '@ohos/imageknife'
|
||||
import { PixelMapPack } from '@ohos/imageknife'
|
||||
import { ParseImageUtil } from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct BasicTestMediaImage {
|
||||
@State pixelMapPack: PixelMapPack = new PixelMapPack();
|
||||
@State imagePixelMap: PixelMap = undefined;
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
|
|
@ -36,9 +35,7 @@ struct BasicTestMediaImage {
|
|||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
let jpgPack = new PixelMapPack();
|
||||
jpgPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = jpgPack;
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err) => {
|
||||
})
|
||||
})
|
||||
|
|
@ -53,9 +50,7 @@ struct BasicTestMediaImage {
|
|||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
let pngPack = new PixelMapPack();
|
||||
pngPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = pngPack;
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err) => {
|
||||
})
|
||||
})
|
||||
|
|
@ -70,9 +65,7 @@ struct BasicTestMediaImage {
|
|||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
let bmpPack = new PixelMapPack();
|
||||
bmpPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = bmpPack;
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err) => {
|
||||
})
|
||||
})
|
||||
|
|
@ -87,9 +80,7 @@ struct BasicTestMediaImage {
|
|||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
let webpPack = new PixelMapPack();
|
||||
webpPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = webpPack;
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err) => {
|
||||
})
|
||||
})
|
||||
|
|
@ -104,9 +95,7 @@ struct BasicTestMediaImage {
|
|||
let arrayBuffer = this.typedArrayToBuffer(data);
|
||||
let parseImageUtil = new ParseImageUtil();
|
||||
parseImageUtil.parseImage(arrayBuffer, (pxielmap) => {
|
||||
let gifPack = new PixelMapPack();
|
||||
gifPack.pixelMap = pxielmap;
|
||||
this.pixelMapPack = gifPack;
|
||||
this.imagePixelMap = pxielmap;
|
||||
}, (err) => {
|
||||
})
|
||||
})
|
||||
|
|
@ -117,7 +106,7 @@ struct BasicTestMediaImage {
|
|||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
Image(this.pixelMapPack.pixelMap)
|
||||
Image(this.imagePixelMap)
|
||||
.width(300)
|
||||
.height(300)
|
||||
.backgroundColor(Color.Pink)
|
||||
|
|
|
|||
|
|
@ -13,15 +13,14 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnife} from '@ohos/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
import {OnRenameListener} from '@ohos/imageknife'
|
||||
import {OnCompressListener} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct CompressPage {
|
||||
@State mRPixelMap: PixelMapPack = new PixelMapPack();
|
||||
@State mFPixelMap: PixelMapPack = new PixelMapPack();
|
||||
@State mRPixelMap: PixelMap = undefined;
|
||||
@State mFPixelMap: PixelMap = undefined;
|
||||
@State mResultText: string= "压缩回调结果"
|
||||
@State mResultPath: string= "压缩路径:"
|
||||
@State mAsyncPath: string= ""
|
||||
|
|
@ -64,8 +63,7 @@ struct CompressPage {
|
|||
.onClick(() => {
|
||||
this.cropressRecource();
|
||||
});
|
||||
Image(this.mRPixelMap.pixelMap)
|
||||
.objectFit(ImageFit.None)
|
||||
Image(this.mRPixelMap )
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
|
@ -83,8 +81,7 @@ struct CompressPage {
|
|||
.margin({ top: 10 })
|
||||
.onClick(() => {
|
||||
});
|
||||
Image(this.mFPixelMap.pixelMap)
|
||||
.objectFit(ImageFit.None)
|
||||
Image(this.mFPixelMap )
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 });
|
||||
|
|
@ -124,8 +121,8 @@ struct CompressPage {
|
|||
console.info("asasd start")
|
||||
},
|
||||
onScuccess(p: PixelMap, path: string) {
|
||||
let pack = new PixelMapPack();
|
||||
pack.pixelMap = p;
|
||||
let pack = undefined;
|
||||
pack = p;
|
||||
that.mRPixelMap = pack;
|
||||
console.info("asasd success path:" + this.mRPixelMap)
|
||||
that.mResultText = "success";
|
||||
|
|
|
|||
|
|
@ -1,80 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {GrayscaleTransformation} from '@ohos/imageknife'
|
||||
import {SketchFilterTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct DpgTestCasePage {
|
||||
@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},
|
||||
|
||||
};
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("dpg网络资源")
|
||||
.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},
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("dpg本地资源")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.dpgSample'),
|
||||
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)
|
||||
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -25,15 +25,15 @@ struct FrescoImageTestCasePage {
|
|||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
@State ImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
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 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true
|
||||
|
|
@ -49,27 +49,22 @@ struct FrescoImageTestCasePage {
|
|||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
displayProgress: true,
|
||||
displayProgressListener:(value)=>{
|
||||
console.log("百分比value:"+value)
|
||||
this.progresshint+="\n"+value;
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
Scroll() {
|
||||
Text(this.progresshint).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
// Scroll() {
|
||||
// Text(this.progresshint).fontSize(15)
|
||||
// }.width(300).height(200)
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,132 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import router from '@system.router';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct FrescoLayerTestCasePage {
|
||||
|
||||
@Watch("watchV1") @State v1:Visibility = Visibility.Visible
|
||||
@Watch("watchV2") @State v2:Visibility = Visibility.Visible
|
||||
@Watch("watchV3") @State v3:Visibility = Visibility.Visible
|
||||
|
||||
@State v1Width:string = "100%";
|
||||
@State v1Height:string = "100%";
|
||||
@State v2Width:string = "100%";
|
||||
@State v2Height:string = "100%";
|
||||
@State v3Width:string = "100%";
|
||||
@State v3Height:string = "100%";
|
||||
|
||||
|
||||
|
||||
|
||||
watchV1(){
|
||||
console.log("watchV1")
|
||||
}
|
||||
watchV2(){
|
||||
console.log("watchV2")
|
||||
}
|
||||
watchV3(){
|
||||
console.log("watchV3")
|
||||
}
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Stack() {
|
||||
Text('1%')
|
||||
.fontSize(100)
|
||||
.fontWeight(FontWeight.Bold)
|
||||
.visibility(this.v1)
|
||||
.width(this.v1Width)
|
||||
.height(this.v1Height)
|
||||
Image($r('app.media.icon_failed'))
|
||||
.visibility(this.v2)
|
||||
.width(this.v2Width)
|
||||
.height(this.v2Height)
|
||||
Image($r('app.media.jpgSample'))
|
||||
.visibility(this.v3)
|
||||
.width(this.v3Width)
|
||||
.height(this.v3Height)
|
||||
}
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
||||
Button("显示第一个组件")
|
||||
.onClick(()=>{
|
||||
this.v1 = Visibility.Visible;
|
||||
this.v2 = Visibility.Hidden;
|
||||
this.v3 = Visibility.Hidden;
|
||||
|
||||
animateTo({duration:500,curve:Curve.Linear},()=>{
|
||||
this.v1Width = "100%";
|
||||
this.v1Height = "100%";
|
||||
|
||||
this.v2Width = "0%";
|
||||
this.v2Height = "0%";
|
||||
|
||||
this.v3Width = "0%";
|
||||
this.v3Height = "0%";
|
||||
})
|
||||
|
||||
|
||||
})
|
||||
Button("显示第二个组件")
|
||||
.onClick(()=>{
|
||||
this.v2 = Visibility.Visible;
|
||||
this.v1 = Visibility.Hidden;
|
||||
this.v3 = Visibility.Hidden;
|
||||
|
||||
animateTo({duration:500,curve:Curve.Linear},()=>{
|
||||
this.v2Width = "100%";
|
||||
this.v2Height = "100%";
|
||||
|
||||
this.v1Width = "0%";
|
||||
this.v1Height = "0%";
|
||||
|
||||
this.v3Width = "0%";
|
||||
this.v3Height = "0%";
|
||||
})
|
||||
})
|
||||
Button("显示第三个组件")
|
||||
.onClick(()=>{
|
||||
this.v3 = Visibility.Visible;
|
||||
this.v2 = Visibility.Hidden;
|
||||
this.v1 = Visibility.Hidden;
|
||||
|
||||
animateTo({duration:500,curve:Curve.Linear},()=>{
|
||||
this.v3Width = "100%";
|
||||
this.v3Height = "100%";
|
||||
|
||||
this.v2Width = "0%";
|
||||
this.v2Height = "0%";
|
||||
|
||||
this.v1Width = "0%";
|
||||
this.v1Height = "0%";
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -23,53 +23,49 @@ struct FrescoImageTestCasePage {
|
|||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
animateDuration: 300,
|
||||
retryLoad:true
|
||||
canRetryClick:true
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
@State ImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
animateDuration: 300,
|
||||
retryLoad:true
|
||||
canRetryClick:true
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
animateDuration: 300,
|
||||
retryLoad:true
|
||||
canRetryClick:true
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/testRetryxxxx",
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
retryholderSrc: $r('app.media.icon_retry'),
|
||||
displayProgress: true,
|
||||
animateDuration: 300,
|
||||
retryLoad:true
|
||||
canRetryClick:true
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,130 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
import {GIFParseImpl} from '@ohos/imageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct gifTestCasePage {
|
||||
|
||||
@State pixels:PixelMap = undefined
|
||||
private globalGifWorker = undefined;
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("加载gif图片")
|
||||
.onClick(()=>{
|
||||
globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.gifSample').id)
|
||||
.then(data => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源 解析后数据data length= ' + data.byteLength)
|
||||
let gifImpl = new GIFParseImpl();
|
||||
gifImpl.parseGifs(data.buffer, (data,err)=>{
|
||||
if(err){
|
||||
console.log('加载gif图片 err='+err);
|
||||
}
|
||||
if(!!data){
|
||||
console.log('加载gif图片 suc,长度='+data.length)
|
||||
this.pixels = data[0]['drawPixelMap']
|
||||
}
|
||||
},undefined,true)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("加载gif图片自带worker")
|
||||
.onClick(()=>{
|
||||
globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.gifSample').id)
|
||||
.then(data => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源 解析后数据data length = ' + data.byteLength)
|
||||
let worker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
||||
type: 'classic',
|
||||
name: 'ImageKnifeParseGIF'
|
||||
})
|
||||
let gifImpl = new GIFParseImpl();
|
||||
gifImpl.parseGifs(data.buffer, (data,err)=>{
|
||||
if(err){
|
||||
console.log('加载gif图片自带worker err='+err);
|
||||
}
|
||||
if(!!data){
|
||||
console.log('加载gif图片自带worker suc,长度='+data.length)
|
||||
this.pixels = data[0]['drawPixelMap']
|
||||
}
|
||||
},worker)
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("加载gif图片全局配置worker")
|
||||
.onClick(()=>{
|
||||
globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.gifSample').id)
|
||||
.then(data => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源 解析后数据data length = ' + data.byteLength)
|
||||
|
||||
let gifImpl = new GIFParseImpl();
|
||||
gifImpl.parseGifs(data.buffer, (data,err)=>{
|
||||
if(err){
|
||||
console.log('加载gif图片自带worker err='+err);
|
||||
}
|
||||
if(!!data){
|
||||
console.log('加载gif图片自带worker suc,长度='+data.length)
|
||||
this.pixels = data[0]['drawPixelMap']
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(err => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源err' + JSON.stringify(err));
|
||||
})
|
||||
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
Text("下面为展示图片区域").margin({top:5})
|
||||
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
|
||||
Image(this.pixels)
|
||||
.width(400)
|
||||
.height(400)
|
||||
.backgroundColor(Color.Pink)
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
||||
type: 'classic',
|
||||
name: 'ImageKnifeParseGIF'
|
||||
})
|
||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||
}
|
||||
aboutToDisappear(){
|
||||
if(this.globalGifWorker){
|
||||
this.globalGifWorker.terminate();
|
||||
}
|
||||
}
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
import router from '@system.router';
|
||||
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct IndexFunctionDemo {
|
||||
@State hint1: string = '启用网络模拟加载替换网络加载'
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("OHOS基础接口测试列表").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试元能力")
|
||||
.onClick(() => {
|
||||
console.log("测试元能力子系统")
|
||||
router.push({ uri: "pages/basicTestFeatureAbilityPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试文件")
|
||||
.onClick(() => {
|
||||
console.log("测试文件子系统")
|
||||
router.push({ uri: "pages/basicTestFileIOPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试全球化")
|
||||
.onClick(() => {
|
||||
console.log("测试全球化子系统")
|
||||
router.push({ uri: "pages/basicTestResourceManagerPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试媒体")
|
||||
.onClick(() => {
|
||||
console.log("测试媒体子系统")
|
||||
router.push({ uri: "pages/basicTestMediaImage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
|
||||
|
||||
Text("测试图片切换功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Button("测试图片切换")
|
||||
.onClick(() => {
|
||||
console.log("测试ImageKnifeComponent所有图片切换")
|
||||
router.push({ uri: "pages/testImageKnifeOptionChangedPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试thumbnail")
|
||||
.onClick(() => {
|
||||
console.log("测试ImageKnifeComponent thumbnail")
|
||||
router.push({ uri: "pages/testImageKnifeOptionChangedPage2" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试缓存功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试内存缓存LRU")
|
||||
.onClick(() => {
|
||||
console.log("测试一级内存缓存")
|
||||
router.push({ uri: "pages/storageTestLruCache" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试所有缓存信息输出")
|
||||
.onClick(() => {
|
||||
console.log("pages/testAllCacheInfoPage 页面跳转")
|
||||
router.push({ uri: "pages/testAllCacheInfoPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试占位图 失败占位图 功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试失败占位图")
|
||||
.onClick(() => {
|
||||
console.log("测试失败占位图")
|
||||
router.push({ uri: "pages/showErrorholderTestCasePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试预加载 gif静态动态切换功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试预加载")
|
||||
.onClick(() => {
|
||||
console.log("测试预加载")
|
||||
router.push({ uri: "pages/testPreloadPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试gif静态动态切换")
|
||||
.onClick(() => {
|
||||
console.log("测试gif静态动态切换")
|
||||
router.push({ uri: "pages/testGifDontAnimatePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试图片变换 图片压缩 功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试图片变换")
|
||||
.onClick(() => {
|
||||
console.log("测试图片变换")
|
||||
router.push({ uri: "pages/transformPixelMapPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试图片压缩")
|
||||
.onClick(() => {
|
||||
console.log("测试图片压缩")
|
||||
router.push({ uri: "pages/compressPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试fresco").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载百分比")
|
||||
.onClick(() => {
|
||||
console.log("加载百分比")
|
||||
router.push({ uri: "pages/frescoImageTestCasePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("重试Retry")
|
||||
.onClick(() => {
|
||||
console.log("重试Retry")
|
||||
router.push({ uri: "pages/frescoRetryTestCasePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试pngj和裁剪").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试pngj")
|
||||
.onClick(() => {
|
||||
console.log("测试pngj")
|
||||
router.push({ uri: "pages/pngjTestCasePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("图片裁剪")
|
||||
.onClick(() => {
|
||||
console.log("图片裁剪")
|
||||
router.push({ uri: "pages/cropImagePage2" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Button("测试svg")
|
||||
.onClick(() => {
|
||||
console.log("pages/svgTestCasePage 页面跳转")
|
||||
router.push({ uri: "pages/svgTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
|
||||
Button("测试gif")
|
||||
.onClick(() => {
|
||||
console.log("pages/gifTestCasePage 页面跳转")
|
||||
router.push({ uri: "pages/gifTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
|
||||
Button("组件显式动画")
|
||||
.onClick(() => {
|
||||
console.log("pages/testImageKnifeOptionChangedPage3 页面跳转")
|
||||
router.push({ uri: "pages/testImageKnifeOptionChangedPage3" });
|
||||
}).margin({ top: 15 })
|
||||
|
||||
Button("组件内容动画")
|
||||
.onClick(() => {
|
||||
console.log("pages/testImageKnifeOptionChangedPage4 页面跳转")
|
||||
router.push({ uri: "pages/testImageKnifeOptionChangedPage4" });
|
||||
}).margin({ top: 15 })
|
||||
|
||||
Button("自定义圆角椭圆")
|
||||
.onClick(() => {
|
||||
console.log("pages/testImageKnifeOptionChangedPage5 页面跳转")
|
||||
router.push({ uri: "pages/testImageKnifeOptionChangedPage5" });
|
||||
}).margin({ top: 15 })
|
||||
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -13,165 +13,71 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
import router from '@system.router';
|
||||
|
||||
|
||||
|
||||
import {
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeOption,
|
||||
} from '@ohos/imageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct IndexFunctionDemo {
|
||||
@State hint1: string = '启用网络模拟加载替换网络加载'
|
||||
private globalGifWorker:any = undefined
|
||||
@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')
|
||||
};
|
||||
|
||||
@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')
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("OHOS基础接口测试列表").fontSize(15)
|
||||
Text("简单示例1：加载一张本地png图片").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试元能力")
|
||||
Button("加载PNG")
|
||||
.onClick(() => {
|
||||
console.log("测试元能力子系统")
|
||||
router.push({ uri: "pages/basicTestFeatureAbilityPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试文件")
|
||||
.onClick(() => {
|
||||
console.log("测试文件子系统")
|
||||
router.push({ uri: "pages/basicTestFileIOPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试全球化")
|
||||
.onClick(() => {
|
||||
console.log("测试全球化子系统")
|
||||
router.push({ uri: "pages/basicTestResourceManagerPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试媒体")
|
||||
.onClick(() => {
|
||||
console.log("测试媒体子系统")
|
||||
router.push({ uri: "pages/basicTestMediaImage" });
|
||||
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 })
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试图片切换功能点").fontSize(15)
|
||||
Text("简单示例2：加载一张网络gif图片").fontSize(15)
|
||||
Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试本地加载")
|
||||
Button("加载GIF")
|
||||
.onClick(() => {
|
||||
console.log("测试bmp,webp,jpg,png本地加载 页面跳转")
|
||||
router.push({ uri: "pages/loadResourceTestCasePage" });
|
||||
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 })
|
||||
Button("测试图片切换")
|
||||
.onClick(() => {
|
||||
console.log("测试ImageKnifeComponent所有图片切换")
|
||||
router.push({ uri: "pages/testImageKnifeOptionChangedPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试thumbnail")
|
||||
.onClick(() => {
|
||||
console.log("测试ImageKnifeComponent thumbnail")
|
||||
router.push({ uri: "pages/testImageKnifeOptionChangedPage2" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试存储(1级 2级缓存)功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试一级内存缓存")
|
||||
.onClick(() => {
|
||||
console.log("测试一级内存缓存")
|
||||
router.push({ uri: "pages/storageTestLruCache" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试二级内存缓存")
|
||||
.onClick(() => {
|
||||
console.log("测试二级内存缓存")
|
||||
router.push({ uri: "pages/storageTestDiskLruCache" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试占位图 失败占位图 功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试占位图")
|
||||
.onClick(() => {
|
||||
console.log("测试占位图")
|
||||
router.push({ uri: "pages/loadNetworkTestCasePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试失败占位图")
|
||||
.onClick(() => {
|
||||
console.log("测试失败占位图")
|
||||
router.push({ uri: "pages/showErrorholderTestCasePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试预加载 gif静态动态切换功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试预加载")
|
||||
.onClick(() => {
|
||||
console.log("测试预加载")
|
||||
router.push({ uri: "pages/testPreloadPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试gif静态动态切换")
|
||||
.onClick(() => {
|
||||
console.log("测试gif静态动态切换")
|
||||
router.push({ uri: "pages/testGifDontAnimatePage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
Text("测试图片变换 图片压缩 功能点").fontSize(15)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试图片变换")
|
||||
.onClick(() => {
|
||||
console.log("测试图片变换")
|
||||
router.push({ uri: "pages/transformPixelMapPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
Button("测试图片压缩")
|
||||
.onClick(() => {
|
||||
console.log("测试图片压缩")
|
||||
router.push({ uri: "pages/compressPage" });
|
||||
}).margin({ top: 5, left: 3 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
Button("测试所有缓存信息输出")
|
||||
.onClick(() => {
|
||||
console.log("pages/testAllCacheInfoPage 页面跳转")
|
||||
router.push({ uri: "pages/testAllCacheInfoPage" });
|
||||
}).margin({ top: 15 })
|
||||
|
||||
Button("测试fresco部分AR")
|
||||
.onClick(() => {
|
||||
console.log("pages/indexFresco 页面跳转")
|
||||
router.push({ uri: "pages/indexFresco" });
|
||||
}).margin({ top: 15 })
|
||||
Button("测试pngj")
|
||||
.onClick(() => {
|
||||
console.log("pages/pngjTestCasePage 页面跳转")
|
||||
router.push({ uri: "pages/pngjTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
}.width('100%').backgroundColor(Color.Pink)
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试图片的裁剪")
|
||||
Button("ImageKnife测试目录页面")
|
||||
.onClick(() => {
|
||||
console.log("pages/cropImagePage 页面跳转")
|
||||
router.push({ uri: "pages/cropImagePage" });
|
||||
console.log("pages/imageknifeTestCaseIndex 页面跳转")
|
||||
router.push({ uri: "pages/imageknifeTestCaseIndex" });
|
||||
}).margin({ top: 15 })
|
||||
Button("测试图片的裁剪2")
|
||||
.onClick(() => {
|
||||
console.log("pages/cropImagePage2 页面跳转")
|
||||
router.push({ uri: "pages/cropImagePage2" });
|
||||
}).margin({ top: 15 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试dpg图片格式加载")
|
||||
.onClick(() => {
|
||||
console.log("pages/dpgTestCasePage 页面跳转")
|
||||
router.push({ uri: "pages/dpgTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
}.width('100%').height(60).backgroundColor(Color.Pink)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
|
|
@ -179,6 +85,17 @@ struct IndexFunctionDemo {
|
|||
}
|
||||
|
||||
aboutToAppear() {
|
||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
||||
type: 'classic',
|
||||
name: 'ImageKnifeParseGIF'
|
||||
})
|
||||
// gif解析在子线程,请在页面构建后创建worker,注入imageknife
|
||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||
}
|
||||
aboutToDisappear(){
|
||||
if(this.globalGifWorker){
|
||||
this.globalGifWorker.terminate();
|
||||
}
|
||||
}
|
||||
|
||||
onBackPress() {
|
||||
|
|
|
|||
|
|
@ -1,40 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import router from '@system.router';
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct IndexFresco {
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("测试控件隐藏与展示和动画")
|
||||
.onClick(() => {
|
||||
router.push({ uri: "pages/frescoLayerTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
Button("测试自定义控件FrescoImage的加载百分比")
|
||||
.onClick(() => {
|
||||
router.push({ uri: "pages/frescoImageTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
Button("测试自定义控件FrescoImage重试Retry")
|
||||
.onClick(() => {
|
||||
router.push({ uri: "pages/frescoRetryTestCasePage" });
|
||||
}).margin({ top: 15 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct LoadNetworkTestCasePage {
|
||||
@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'),
|
||||
};
|
||||
@State imageKnifeOption2: 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'),
|
||||
};
|
||||
@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'),
|
||||
};
|
||||
@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'),
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct LoadResourceTestCasePage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
// placeholderSrc: $r('app.media.icon_loading'),
|
||||
// errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
// placeholderSrc: $r('app.media.icon_loading'),
|
||||
// errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@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'),
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
// ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -23,28 +23,28 @@ struct ShowErrorholderTestCasePage {
|
|||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/xxxxx",
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
@State ImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://hbimg.huabanimg.com/xxxxx",
|
||||
size: { width: 300, height: 300 },
|
||||
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 },
|
||||
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 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
};
|
||||
|
|
@ -53,7 +53,7 @@ struct ShowErrorholderTestCasePage {
|
|||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,325 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RequestOption} from '@ohos/imageknife'
|
||||
import {ImageKnifeData} from '@ohos/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
|
||||
|
||||
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct StorageTestDiskLruCache {
|
||||
@Watch('watchImageKnifeOption') @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'),
|
||||
};
|
||||
@State imageKnifePixelMapPack: PixelMapPack = new PixelMapPack();
|
||||
@State imageKnifeResource: Resource = $r('app.media.icon_loading')
|
||||
@State imageKnifeString: string = ""
|
||||
@State normalPixelMap: boolean = false;
|
||||
@State normalResource: boolean = true;
|
||||
previousData: ImageKnifeData = null;
|
||||
nowData: ImageKnifeData = null;
|
||||
@State logText: string = "打印日志结果";
|
||||
|
||||
|
||||
watchImageKnifeOption() {
|
||||
this.imageKnifeExecute();
|
||||
}
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text("ImageKnife测试DiskLruCache能力")
|
||||
.backgroundColor(Color.Blue)
|
||||
Button("替换ImageKnife默认DiskLruCache并设置大小1M")
|
||||
.onClick(() => {
|
||||
globalThis.ImageKnife.replaceDiskLruCache(1 * 1024 * 1024)
|
||||
}).margin({top:15, bottom:15})
|
||||
|
||||
Button("替换ImageKnife默认DiskLruCache并设置大小30M")
|
||||
.onClick(() => {
|
||||
globalThis.ImageKnife.replaceDiskLruCache(30 * 1024 * 1024)
|
||||
}).margin({top:15, bottom:15})
|
||||
|
||||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("加载jpg网络图")
|
||||
.onClick(() => {
|
||||
this.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'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button("加载png网络图")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
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}
|
||||
};
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button("加载webp网络图")
|
||||
.onClick(() => {
|
||||
this.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'),
|
||||
margin:{left:5,top:5,right:5,bottom:5}
|
||||
};
|
||||
}).margin({ top: 5, left: 10 })
|
||||
Button("加载bmp网络图")
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption = {
|
||||
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}
|
||||
};
|
||||
}).margin({ top: 5, left: 10 })
|
||||
}.width('100%')
|
||||
.height(60).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
Image(this.normalPixelMap ? this.imageKnifePixelMapPack.pixelMap : (this.normalResource ? this.imageKnifeResource : this.imageKnifeString))
|
||||
.width(this.imageKnifeOption.size ? this.imageKnifeOption.size.width : '100%')
|
||||
.height(this.imageKnifeOption.size ? this.imageKnifeOption.size.height : '100%')
|
||||
.objectFit(this.imageKnifeOption.imageFit ? this.imageKnifeOption.imageFit : ImageFit.Fill)
|
||||
.backgroundColor(this.imageKnifeOption.backgroundColor ? this.imageKnifeOption.backgroundColor : Color.White)
|
||||
.margin(this.imageKnifeOption.margin ? this.imageKnifeOption.margin : { left: 0, top: 0, right: 0, bottom: 0 })
|
||||
|
||||
|
||||
|
||||
Scroll() {
|
||||
Text(this.logText).fontSize(15)
|
||||
}.width(300).height(300).margin({top:20}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
|
||||
// imageKnife 第一次启动和数据刷新后重新发送请求
|
||||
imageKnifeExecute() {
|
||||
let request = new RequestOption();
|
||||
request.load(this.imageKnifeOption.loadSrc)
|
||||
.addListener((err, data) => {
|
||||
this.imageKnifeChangeSource(data)
|
||||
return false;
|
||||
})
|
||||
if (this.imageKnifeOption.placeholderSrc) {
|
||||
request.placeholder(this.imageKnifeOption.placeholderSrc, (data) => {
|
||||
this.imageKnifeChangeSource(data)
|
||||
})
|
||||
}
|
||||
if (this.imageKnifeOption.errorholderSrc) {
|
||||
request.errorholder(this.imageKnifeOption.errorholderSrc, (data) => {
|
||||
this.imageKnifeChangeSource(data)
|
||||
})
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.size) {
|
||||
request.setImageViewSize(this.imageKnifeOption.size)
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.onlyRetrieveFromCache) {
|
||||
request.retrieveDataFromCache(this.imageKnifeOption.onlyRetrieveFromCache)
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.isCacheable) {
|
||||
request.skipMemoryCache(!this.imageKnifeOption.isCacheable)
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.strategy) {
|
||||
request.diskCacheStrategy(this.imageKnifeOption.strategy)
|
||||
}
|
||||
|
||||
if (this.imageKnifeOption.dontAnimateFlag) {
|
||||
request.dontAnimate()
|
||||
}
|
||||
if (this.imageKnifeOption.allCacheInfoCallback) {
|
||||
request.addAllCacheInfoCallback(this.imageKnifeOption.allCacheInfoCallback)
|
||||
}
|
||||
|
||||
globalThis.ImageKnife.call(request);
|
||||
}
|
||||
|
||||
imageKnifeChangeSource(data:ImageKnifeData) {
|
||||
this.imageKnifeSpecialFixed(data);
|
||||
|
||||
|
||||
// 由于异步写入，可能读取disklrucache的时候还没删成功，为了保证成功删除这里使用了延时
|
||||
setTimeout(() => {
|
||||
//查看mImageKnife中的DiskLruCache
|
||||
let disk = globalThis.ImageKnife.getDiskMemoryCache();
|
||||
let showDisk = ''
|
||||
disk.foreachDiskLruCache((value, key, map) => {
|
||||
showDisk += "key=" + key + "&value=" + value;
|
||||
})
|
||||
this.logText = "日志结果:" + showDisk;
|
||||
}, 2000)
|
||||
|
||||
}
|
||||
|
||||
imageKnifeSpecialFixed(data:ImageKnifeData) {
|
||||
if (this.nowData) {
|
||||
this.previousData = this.nowData;
|
||||
this.nowData = data;
|
||||
if (data.isPixelMap()) {
|
||||
// PixelMap
|
||||
console.log("ImageKnife占位图输出=PixelMap")
|
||||
if (this.previousData.isSvg()) {
|
||||
console.log("ImageKnife占位图输出=PixelMap 上一个是SVG")
|
||||
this.normalPixelMap = true;
|
||||
this.normalResource = true;
|
||||
|
||||
let pixelMapPack1 = new PixelMapPack();
|
||||
|
||||
this.imageKnifePixelMapPack = pixelMapPack1;
|
||||
|
||||
setTimeout(() => {
|
||||
let pixelMapPack2 = new PixelMapPack();
|
||||
pixelMapPack2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
this.imageKnifePixelMapPack = pixelMapPack2;
|
||||
}, 100)
|
||||
} else {
|
||||
this.normalPixelMap = true;
|
||||
this.normalResource = true;
|
||||
|
||||
let pixelMapPack3 = new PixelMapPack();
|
||||
pixelMapPack3.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
|
||||
this.imageKnifePixelMapPack = pixelMapPack3;
|
||||
}
|
||||
}
|
||||
else if (data.isString()) {
|
||||
// String
|
||||
console.log("imageKnifevalue=" + JSON.stringify(data));
|
||||
console.log("ImageKnife占位图输出=String")
|
||||
if (this.previousData.isSvg()) {
|
||||
|
||||
console.log("data.imageKnifeValue=" + JSON.stringify(data.imageKnifeValue))
|
||||
console.log("ImageKnife占位图输出=String 拥有上一个图片类型 上一个是SVG")
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = false;
|
||||
let firstIndex = (data.imageKnifeValue as string).indexOf(globalThis.ImageKnife.getSvgAndGifFolder());
|
||||
console.log("firstIndex=" + firstIndex);
|
||||
let suffix = (data.imageKnifeValue as string).substring(firstIndex, (data.imageKnifeValue as string).length)
|
||||
console.log("suffix =" + suffix);
|
||||
let imageKnifeNeedStr = 'internal://app/' + suffix;
|
||||
this.imageKnifeString = imageKnifeNeedStr;
|
||||
} else {
|
||||
console.log("data.imageKnifeValue=" + JSON.stringify(data.imageKnifeValue))
|
||||
console.log("ImageKnife占位图输出=String 拥有上一个图片类型 上一个不是SVG")
|
||||
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = false;
|
||||
let firstIndex = (data.imageKnifeValue as string).indexOf(globalThis.ImageKnife.getSvgAndGifFolder());
|
||||
console.log("firstIndex=" + firstIndex);
|
||||
let suffix = (data.imageKnifeValue as string).substring(firstIndex, (data.imageKnifeValue as string).length)
|
||||
console.log("suffix =" + suffix);
|
||||
let imageKnifeNeedStr = 'internal://app/' + suffix;
|
||||
this.imageKnifeString = imageKnifeNeedStr;
|
||||
}
|
||||
} else if (data.isResource()) {
|
||||
console.log("ImageKnife占位图输出=Resource")
|
||||
if (this.previousData.isSvg()) {
|
||||
console.log("ImageKnife占位图输出=Resource 上一个是SVG")
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = true;
|
||||
this.imageKnifeResource = data.imageKnifeValue as Resource;
|
||||
} else {
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = true;
|
||||
this.imageKnifeResource = data.imageKnifeValue as Resource;
|
||||
}
|
||||
} else {
|
||||
console.log("ImageKnife占位图输出=数据错误")
|
||||
}
|
||||
|
||||
} else {
|
||||
this.nowData = data;
|
||||
if (data.isPixelMap()) {
|
||||
// PixelMap
|
||||
console.log("ImageKnife占位图输出=PixelMap")
|
||||
this.normalPixelMap = true;
|
||||
this.normalResource = true;
|
||||
|
||||
let pixelMapPack4 = new PixelMapPack();
|
||||
pixelMapPack4.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
|
||||
this.imageKnifePixelMapPack = pixelMapPack4;
|
||||
}
|
||||
else if (data.isString()) {
|
||||
// String
|
||||
console.log("data.imageKnifeValue=" + JSON.stringify(data.imageKnifeValue))
|
||||
console.log("ImageKnife占位图输出=String 没有上一个图片类型")
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = false;
|
||||
let firstIndex = (data.imageKnifeValue as string).indexOf(globalThis.ImageKnife.getSvgAndGifFolder());
|
||||
console.log("firstIndex=" + firstIndex);
|
||||
let suffix = (data.imageKnifeValue as string).substring(firstIndex, (data.imageKnifeValue as string).length)
|
||||
console.log("suffix =" + suffix);
|
||||
let imageKnifeNeedStr = 'internal://app/' + suffix;
|
||||
this.imageKnifeString = imageKnifeNeedStr;
|
||||
} else if (data.isResource()) {
|
||||
console.log("ImageKnife占位图输出=Resource")
|
||||
this.normalPixelMap = false;
|
||||
this.normalResource = true;
|
||||
this.imageKnifeResource = data.imageKnifeValue as Resource;
|
||||
} else {
|
||||
console.log("ImageKnife占位图输出=数据错误")
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//函数在自定义组件析构消耗之前执行。
|
||||
//不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。
|
||||
aboutToDisappear() {
|
||||
|
||||
}
|
||||
//当此页面显示时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。
|
||||
onPageShow() {
|
||||
}
|
||||
//当此页面消失时触发一次。包括路由过程、应用进入前后台等场景，仅@Entry修饰的自定义组件生效。
|
||||
onPageHide() {
|
||||
}
|
||||
|
||||
// 当用户点击返回按钮时触发，，仅@Entry修饰的自定义组件生效。
|
||||
//返回true表示页面自己处理返回逻辑, 不进行页面路由。
|
||||
//返回false表示使用默认的返回逻辑。
|
||||
//不返回值会作为false处理。
|
||||
onBackPress() {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -27,7 +27,7 @@ struct svgTestCasePage {
|
|||
Button("加载SVG图片")
|
||||
.onClick(()=>{
|
||||
|
||||
globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.ic_svg').id)
|
||||
globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.svgSample').id)
|
||||
.then(data => {
|
||||
console.log('basicTestFileIOPage - 本地加载资源 解析后数据data = ' + data)
|
||||
let svgImpl = new SVGParseImpl();
|
||||
|
|
|
|||
|
|
@ -16,15 +16,14 @@ import {RequestOption} from '@ohos/imageknife'
|
|||
import {AllCacheInfo,IAllCacheInfoCallback} from '@ohos/imageknife'
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {TransformType} from '@ohos/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestAllCacheInfoPage {
|
||||
@State nativePixelMap: PixelMapPack = new PixelMapPack();
|
||||
@State networkPixelMap: PixelMapPack = new PixelMapPack();
|
||||
@State nativePixelMap: PixelMap = undefined;
|
||||
@State networkPixelMap: PixelMap = undefined;
|
||||
allCacheInfoCallback1 =(allCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback imageknifecomponent1 memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
|
|
@ -36,9 +35,9 @@ struct TestAllCacheInfoPage {
|
|||
}
|
||||
allCacheInfoCallback2 =(allCacheInfo)=>{
|
||||
let info = allCacheInfo as AllCacheInfo;
|
||||
console.log("AllCacheInfoCallback imageknifecomponent2 memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback imageknifecomponent2 resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback imageknifecomponent2 data ="+JSON.stringify(info.dataCacheInfo))
|
||||
console.log("AllCacheInfoCallback ImageKnifeComponent memory ="+JSON.stringify(info.memoryCacheInfo))
|
||||
console.log("AllCacheInfoCallback ImageKnifeComponent resource ="+JSON.stringify(info.resourceCacheInfo))
|
||||
console.log("AllCacheInfoCallback ImageKnifeComponent data ="+JSON.stringify(info.dataCacheInfo))
|
||||
this.cacheinfo4 = "memory="+JSON.stringify(info.memoryCacheInfo)+
|
||||
"\n resource ="+JSON.stringify(info.resourceCacheInfo)+
|
||||
"\n data ="+JSON.stringify(info.dataCacheInfo)
|
||||
|
|
@ -46,7 +45,7 @@ struct TestAllCacheInfoPage {
|
|||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{top:15},
|
||||
|
|
@ -56,10 +55,10 @@ struct TestAllCacheInfoPage {
|
|||
},
|
||||
allCacheInfoCallback:this.allCacheInfoCallback1
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
@State ImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin:{top:15},
|
||||
|
|
@ -87,7 +86,7 @@ struct TestAllCacheInfoPage {
|
|||
Scroll() {
|
||||
Text(this.cacheinfo1).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
Image(this.nativePixelMap.pixelMap)
|
||||
Image(this.nativePixelMap )
|
||||
.width(300)
|
||||
.height(300)
|
||||
.objectFit(ImageFit.Contain)
|
||||
|
|
@ -100,7 +99,7 @@ struct TestAllCacheInfoPage {
|
|||
Scroll() {
|
||||
Text(this.cacheinfo2).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
Image(this.networkPixelMap.pixelMap)
|
||||
Image(this.networkPixelMap )
|
||||
.width(300)
|
||||
.height(300)
|
||||
.objectFit(ImageFit.Contain)
|
||||
|
|
@ -113,7 +112,7 @@ struct TestAllCacheInfoPage {
|
|||
this.imageKnifeOption1 =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { top: 15 },
|
||||
|
|
@ -132,10 +131,10 @@ struct TestAllCacheInfoPage {
|
|||
Button("ImageKnifeComponent加载网络资源获取缓存信息").width(300).height(25)
|
||||
.onClick(() => {
|
||||
this.imageKnifeComponentAngle = this.imageKnifeComponentAngle + 45;
|
||||
this.imageKnifeOption2 =
|
||||
this.ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
margin: { top: 15 },
|
||||
|
|
@ -149,7 +148,7 @@ struct TestAllCacheInfoPage {
|
|||
Scroll() {
|
||||
Text(this.cacheinfo4).fontSize(15)
|
||||
}.width(300).height(200)
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -166,8 +165,8 @@ struct TestAllCacheInfoPage {
|
|||
imageKnifeOption.load($r('app.media.pngSample'))
|
||||
.setImageViewSize({width:300,height:300})
|
||||
.addListener((err, data) => {
|
||||
let pack = new PixelMapPack();
|
||||
pack.pixelMap = data.imageKnifeValue as PixelMap;;
|
||||
let pack = undefined;
|
||||
pack = data.drawPixelMap.imagePixelMap as PixelMap;;
|
||||
this.nativePixelMap = pack;
|
||||
return false;
|
||||
}).addAllCacheInfoCallback((allCacheInfo)=>{
|
||||
|
|
@ -183,11 +182,11 @@ struct TestAllCacheInfoPage {
|
|||
}
|
||||
|
||||
private testAllCacheInfoNetwork() {
|
||||
let imageKnifeOption2 = new RequestOption();
|
||||
imageKnifeOption2.load("https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp")
|
||||
let ImageKnifeOption = new RequestOption();
|
||||
ImageKnifeOption.load("https://hbimg.huabanimg.com/0ef60041445edcfd6b38d20e19024b2cd9281dcc3525a4-Vy8fYO_fw658/format/webp")
|
||||
.addListener((err, data) => {
|
||||
let pack = new PixelMapPack();
|
||||
pack.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let pack = undefined;
|
||||
pack = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.networkPixelMap = pack;
|
||||
console.log("imageknife2 图片2 赋值！")
|
||||
return false;
|
||||
|
|
@ -202,7 +201,7 @@ struct TestAllCacheInfoPage {
|
|||
})
|
||||
.setImageViewSize({width:300,height:300})
|
||||
.rotateImage(180)
|
||||
ImageKnife.call(imageKnifeOption2);
|
||||
ImageKnife.call(ImageKnifeOption);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,99 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {TransformType} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestAllTypeImageKnifeComponentPage {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.jpgSample'),
|
||||
errorholderSrc: $r('app.media.pngSample'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.jpgSample'),
|
||||
errorholderSrc: $r('app.media.pngSample'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.jpgSample'),
|
||||
errorholderSrc: $r('app.media.pngSample'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.jpgSample'),
|
||||
errorholderSrc: $r('app.media.pngSample'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption5: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.jpgSample'),
|
||||
errorholderSrc: $r('app.media.pngSample'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption5 })
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestAllTypeNativeImagePage {
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Image($r('app.media.jpgSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
Image($r('app.media.pngSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
Image($r('app.media.jpgSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
Image($r('app.media.svgSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
Image($r('app.media.bmpSample'))
|
||||
.width(300)
|
||||
.height(300)
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -37,7 +37,7 @@ struct TestGifDontAnimatePage {
|
|||
Button('本地资源gif')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.testGif2'),
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: '300', height: '300' },
|
||||
placeholderSrc: $r('app.media.icon_loading'),
|
||||
errorholderSrc: $r('app.media.icon_failed'),
|
||||
|
|
|
|||
|
|
@ -15,14 +15,17 @@
|
|||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
|
||||
import ArkWorker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage {
|
||||
|
||||
private globalGifWorker:any = undefined
|
||||
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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}
|
||||
|
|
@ -33,135 +36,146 @@ struct TestImageKnifeOptionChangedPage {
|
|||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button('本地资源jpg')
|
||||
Button('本地jpg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
Button('本地资源png')
|
||||
Button('png')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
Button('本地资源bmp')
|
||||
Button('bmp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
Button('本地资源webp')
|
||||
Button('webp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
Button('本地资源svg')
|
||||
Button('svg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
Button('本地资源gif')
|
||||
Button('gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
}
|
||||
.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button('网络资源jpg')
|
||||
Button('网络jpg')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
Button('网络资源png')
|
||||
Button('png')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
Button('网络资源bmp')
|
||||
Button('bmp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
Button('网络资源webp')
|
||||
Button('webp')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
Button('网络资源svg')
|
||||
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 },
|
||||
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)
|
||||
Button('网络资源gif')
|
||||
Button('gif')
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
size: { width: 300, height: 300 },
|
||||
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)
|
||||
|
||||
Button("dpg")
|
||||
.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},
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}
|
||||
.margin({top:15})
|
||||
|
||||
|
|
@ -178,7 +192,17 @@ struct TestImageKnifeOptionChangedPage {
|
|||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log('aboutToAppear()')
|
||||
console.log("aboutToAppear()")
|
||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
||||
type: 'classic',
|
||||
name: 'ImageKnifeParseGIF'
|
||||
})
|
||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||
}
|
||||
aboutToDisappear(){
|
||||
if(this.globalGifWorker){
|
||||
this.globalGifWorker.terminate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ struct TestImageKnifeOptionChangedPage2 {
|
|||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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},
|
||||
|
|
@ -36,11 +36,11 @@ struct TestImageKnifeOptionChangedPage2 {
|
|||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("网络资源jpg")
|
||||
Button("网络jpg")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
|
||||
size: { width: 300, height: 300 },
|
||||
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},
|
||||
|
|
@ -48,11 +48,11 @@ struct TestImageKnifeOptionChangedPage2 {
|
|||
transformation:new RotateImageTransformation(180)
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络资源png")
|
||||
Button("png")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
|
||||
size: { width: 300, height: 300 },
|
||||
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},
|
||||
|
|
@ -60,11 +60,11 @@ struct TestImageKnifeOptionChangedPage2 {
|
|||
transformations:[new RotateImageTransformation(180)]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络资源bmp")
|
||||
Button("bmp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://img-blog.csdn.net/20140514114029140",
|
||||
size: { width: 300, height: 300 },
|
||||
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},
|
||||
|
|
@ -72,11 +72,11 @@ struct TestImageKnifeOptionChangedPage2 {
|
|||
transformations:[new GrayscaleTransformation()]
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
Button("网络资源webp")
|
||||
Button("webp")
|
||||
.onClick(()=>{
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
|
||||
size: { width: 300, height: 300 },
|
||||
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},
|
||||
|
|
|
|||
|
|
@ -0,0 +1,257 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {ScaleType} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {GrayscaleTransformation} from '@ohos/imageknife'
|
||||
import {SketchFilterTransformation} from '@ohos/imageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage3 {
|
||||
private globalGifWorker:any = undefined
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
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'),
|
||||
};
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("本地jpg")
|
||||
.onClick(()=>{
|
||||
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!')
|
||||
}
|
||||
}
|
||||
};
|
||||
}).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!')
|
||||
}
|
||||
}
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("本地bmp")
|
||||
.onClick(()=>{
|
||||
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!')
|
||||
}
|
||||
}
|
||||
};
|
||||
}).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!')
|
||||
}
|
||||
}
|
||||
};
|
||||
}).margin({left:5}).backgroundColor(Color.Blue)
|
||||
}.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("网络jpg")
|
||||
.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)
|
||||
};
|
||||
}).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},
|
||||
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)
|
||||
}.margin({top:15})
|
||||
Flex({direction:FlexDirection.Row}){
|
||||
Button("网络bmp")
|
||||
.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)
|
||||
Button("网络webp")
|
||||
.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 })
|
||||
}.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
||||
type: 'classic',
|
||||
name: 'ImageKnifeParseGIF'
|
||||
})
|
||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||
}
|
||||
aboutToDisappear(){
|
||||
if(this.globalGifWorker){
|
||||
this.globalGifWorker.terminate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,255 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
GrayscaleTransformation,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeData,
|
||||
ImageKnifeOption,
|
||||
RotateImageTransformation,
|
||||
SketchFilterTransformation,
|
||||
ScaleTypeHelper,
|
||||
IDrawLifeCycle,
|
||||
ScaleType
|
||||
} from '@ohos/imageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage4 {
|
||||
private globalGifWorker:any = undefined
|
||||
@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()
|
||||
};
|
||||
private mTimerId: number = 0
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button("网络jpg")
|
||||
.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()
|
||||
};
|
||||
}).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 },
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformations: [new RotateImageTransformation(180)],
|
||||
drawLifeCycle:this.createViewLifeCycle()
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
}.margin({ top: 15 })
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
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 },
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformations: [new GrayscaleTransformation()],
|
||||
drawLifeCycle:this.createViewLifeCycle()
|
||||
};
|
||||
}).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 },
|
||||
thumbSizeMultiplier: 0.1,
|
||||
transformations: [new SketchFilterTransformation()],
|
||||
drawLifeCycle:this.createViewLifeCycle()
|
||||
};
|
||||
}).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 })
|
||||
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
||||
type: 'classic',
|
||||
name: 'ImageKnifeParseGIF'
|
||||
})
|
||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||
}
|
||||
aboutToDisappear(){
|
||||
if(this.globalGifWorker){
|
||||
this.globalGifWorker.terminate();
|
||||
}
|
||||
}
|
||||
|
||||
drawMainAnimate(index, context, scaleType, imagePixelMap, widthPixel, heightPixel, compWidth, compHeight) {
|
||||
console.log('drawMainAnimate index = '+index)
|
||||
|
||||
let clipScale = (index / 30.0)
|
||||
context.save()
|
||||
context.beginPath();
|
||||
let path2d = new Path2D()
|
||||
let maxRadius = Math.sqrt(compWidth / 2 * compWidth / 2 + compHeight / 2 * compHeight / 2)
|
||||
path2d.arc(compWidth / 2, compHeight / 2, maxRadius * clipScale, 0, Math.PI * 2)
|
||||
context.clip(path2d)
|
||||
context.save()
|
||||
ScaleTypeHelper.drawImageWithScaleType(context, scaleType, imagePixelMap, px2vp(widthPixel), px2vp(heightPixel), compWidth, compHeight,0,0)
|
||||
context.restore();
|
||||
context.restore();
|
||||
if(index<30){
|
||||
index++
|
||||
let nextFunc = this.drawMainAnimate.bind(this,index, context, scaleType, imagePixelMap, widthPixel, heightPixel, compWidth, compHeight)
|
||||
this.mTimerId = setTimeout(nextFunc, 1000/30.0)
|
||||
}else{
|
||||
// 不做处理
|
||||
}
|
||||
}
|
||||
private stopAnimate(){
|
||||
if(this.mTimerId > 0){
|
||||
clearTimeout(this.mTimerId)
|
||||
this.mTimerId = 0
|
||||
}else{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
private createViewLifeCycle(): IDrawLifeCycle {
|
||||
let viewLifeCycle: IDrawLifeCycle = {
|
||||
// 展示占位图
|
||||
displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
},
|
||||
// 展示加载进度
|
||||
displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.stopAnimate()
|
||||
context.save();
|
||||
context.clearRect(0,0,compWidth,compHeight)
|
||||
let pi = Math.PI * 2 / 100; //pi 讲圆的周长划分为100份
|
||||
let rate = progress - 25;
|
||||
let diameter = compWidth > compHeight ? compHeight : compWidth
|
||||
context.lineWidth = Math.floor(diameter * 0.03)
|
||||
context.lineCap = "round"
|
||||
context.fillStyle = "white"
|
||||
context.font = Math.floor(diameter * 0.5) + 'px'
|
||||
let x0 = (compWidth - diameter) / 2.0 + Math.floor(diameter * 0.5)
|
||||
let y0 = (compHeight - diameter) / 2.0 + Math.floor(diameter * 0.1)
|
||||
let x1 = (compWidth - diameter) / 2.0 + Math.floor(diameter * 0.5)
|
||||
let y1 = (compHeight - diameter) / 2.0 + Math.floor(diameter * 0.8)
|
||||
let gradient = context.createLinearGradient(x0, y0, x1, y1)
|
||||
gradient.addColorStop(0, "#11ffe4")
|
||||
gradient.addColorStop(0.5, "#03c6fd")
|
||||
gradient.addColorStop(1, "#10a5ff")
|
||||
context.clearRect(0, 0, compWidth, compHeight)
|
||||
context.shadowBlur = 0
|
||||
context.beginPath()
|
||||
context.strokeStyle = "#15222d"
|
||||
let radius = Math.floor(diameter * 0.3)
|
||||
let arcX = compWidth / 2.0
|
||||
let arcY = compHeight / 2.0
|
||||
context.arc(arcX, arcY, radius, 0, Math.PI * 2, true)
|
||||
context.stroke()
|
||||
context.beginPath()
|
||||
let showText = rate + 25 + '%'
|
||||
let metrics = context.measureText(showText)
|
||||
let textX = (compWidth / 2.0) - metrics.width / 2.0
|
||||
let textY = (compHeight / 2.0) + metrics.height * 0.3
|
||||
context.fillText(showText, textX, textY)
|
||||
context.stroke()
|
||||
context.beginPath()
|
||||
context.strokeStyle = gradient
|
||||
context.arc(arcX, arcY, radius, pi * -25, pi * rate)
|
||||
context.stroke();
|
||||
context.restore();
|
||||
return true;
|
||||
},
|
||||
// 展示缩略图
|
||||
displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示主图
|
||||
displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
this.stopAnimate()
|
||||
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)
|
||||
|
||||
let func = this.drawMainAnimate.bind(this,0, context, scaleType, data.drawPixelMap.imagePixelMap, imageInfo.size.width, imageInfo.size.height, compWidth, compHeight)
|
||||
this.mTimerId = setTimeout(func, 1000/30.0)
|
||||
|
||||
console.log('TestImageKnifeOptionChangedPage4 drawMainSource end!')
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示重试图层
|
||||
displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示失败占位图
|
||||
displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.stopAnimate()
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return viewLifeCycle;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {
|
||||
GrayscaleTransformation,
|
||||
ImageKnifeComponent,
|
||||
ImageKnifeData,
|
||||
ImageKnifeOption,
|
||||
RotateImageTransformation,
|
||||
SketchFilterTransformation,
|
||||
ScaleTypeHelper,
|
||||
IDrawLifeCycle,
|
||||
ScaleType,
|
||||
ImageKnifeDrawFactory
|
||||
} from '@ohos/imageknife'
|
||||
import ArkWorker from '@ohos.worker'
|
||||
@Entry
|
||||
@Component
|
||||
struct TestImageKnifeOptionChangedPage5 {
|
||||
private globalGifWorker:any = undefined
|
||||
@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)
|
||||
};
|
||||
private mTimerId: number = 0
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
Button("网络jpg")
|
||||
.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)
|
||||
};
|
||||
}).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'),
|
||||
drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
|
||||
};
|
||||
}).margin({ left: 5 }).backgroundColor(Color.Blue)
|
||||
}.margin({ top: 15 })
|
||||
Flex({ direction: FlexDirection.Row }) {
|
||||
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'),
|
||||
drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
|
||||
};
|
||||
}).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'),
|
||||
drawLifeCycle:this.choiceViewLifeCycle(DrawType.Oval)
|
||||
};
|
||||
}).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 })
|
||||
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
||||
type: 'classic',
|
||||
name: 'ImageKnifeParseGIF'
|
||||
})
|
||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||
}
|
||||
aboutToDisappear(){
|
||||
if(this.globalGifWorker){
|
||||
this.globalGifWorker.terminate();
|
||||
}
|
||||
}
|
||||
|
||||
private choiceViewLifeCycle(type:DrawType): IDrawLifeCycle {
|
||||
let viewLifeCycle = undefined;
|
||||
switch(type){
|
||||
case DrawType.Oval:
|
||||
viewLifeCycle = ImageKnifeDrawFactory.createOvalLifeCycle(5,"#ff00ff")
|
||||
break;
|
||||
case DrawType.Round:
|
||||
viewLifeCycle = ImageKnifeDrawFactory.createRoundLifeCycle(5,"#ff00ff",30)
|
||||
break;
|
||||
case DrawType.Normal:
|
||||
default:
|
||||
viewLifeCycle = {
|
||||
// 展示占位图
|
||||
displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
return false;
|
||||
},
|
||||
// 展示加载进度
|
||||
displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
return false;
|
||||
},
|
||||
// 展示缩略图
|
||||
displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
return false;
|
||||
},
|
||||
|
||||
// 展示主图
|
||||
displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
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)
|
||||
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('TestImageKnifeOptionChangedPage4 drawMainSource end!')
|
||||
})
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
// 展示重试图层
|
||||
displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
return false;
|
||||
},
|
||||
// 展示失败占位图
|
||||
displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
return viewLifeCycle;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export enum DrawType{
|
||||
|
||||
Normal = 0,
|
||||
|
||||
Oval = 1,
|
||||
|
||||
Round = 2
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import ArkWorker from '@ohos.worker'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestMultiThreadWorkerPage2 {
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Button("创建Worker向子线程发送携带Arraybuffer数据")
|
||||
.margin({ top: 20 })
|
||||
.onClick(() => {
|
||||
let worker = new ArkWorker.Worker("entry/ets/pages/workers/worker1.js", {
|
||||
type: "classic",
|
||||
name: "zhangsan"
|
||||
})
|
||||
worker.onerror = function (data) {
|
||||
console.info("worker:: receive onerror " + data.lineno + ", msg = " + data.message + ", filename = " + data.filename + ", colno = " + data.colno);
|
||||
}
|
||||
|
||||
worker.onmessageerror = function (e) {
|
||||
console.log("worker:: receive onmessageerror ");
|
||||
}
|
||||
|
||||
worker.onexit = function () {
|
||||
console.log("worker:: receive onexit");
|
||||
}
|
||||
|
||||
worker.onmessage = function (e) {
|
||||
var data = e.data;
|
||||
switch (data.type) {
|
||||
case "normal":
|
||||
console.log("worker:: onmessage " + data.data);
|
||||
break;
|
||||
case "buffer":
|
||||
console.log("worker:: receive buffer length is " + data.data.byteLength);
|
||||
break;
|
||||
default:
|
||||
console.log("worker:: worker.js receive unknow type");
|
||||
break
|
||||
}
|
||||
worker.terminate();
|
||||
}
|
||||
|
||||
console.log("worker:: start post buffer");
|
||||
|
||||
let uint8array = new Uint8Array([0, 1, 2, 3, 4, 5, 6, 7])
|
||||
let buffer = uint8array.buffer.slice(uint8array.byteOffset, uint8array.byteLength + uint8array.byteOffset)
|
||||
|
||||
var obj = { type: "buffer", data: buffer };
|
||||
console.log("worker:: before post, buffer length is " + obj.data.byteLength);
|
||||
worker.postMessage(obj, [buffer]);
|
||||
console.log("worker:: after post, buffer length is " + obj.data.byteLength);
|
||||
console.info("end post buffer");
|
||||
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
}
|
||||
|
|
@ -15,23 +15,24 @@
|
|||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RequestOption} from '@ohos/imageknife'
|
||||
|
||||
import ArkWorker from '@ohos.worker'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct TestPreloadPage {
|
||||
private globalGifWorker:any = undefined
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 imageKnifeOption2: ImageKnifeOption =
|
||||
@State ImageKnifeOption: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -39,7 +40,7 @@ struct TestPreloadPage {
|
|||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -48,7 +49,7 @@ struct TestPreloadPage {
|
|||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -56,7 +57,7 @@ struct TestPreloadPage {
|
|||
@State imageKnifeOption5: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -64,7 +65,7 @@ struct TestPreloadPage {
|
|||
@State imageKnifeOption6: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -88,7 +89,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -98,7 +99,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -122,7 +123,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -131,7 +132,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: $r('app.media.gifSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 },
|
||||
|
|
@ -159,7 +160,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -168,7 +169,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -191,7 +192,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -200,7 +201,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption1 = {
|
||||
loadSrc: 'https://pic.ibaotu.com/gif/18/17/16/51u888piCtqj.gif!fwpaa70/fw/700',
|
||||
size: { width: 300, height: 300 },
|
||||
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 },
|
||||
|
|
@ -231,7 +232,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -239,9 +240,9 @@ struct TestPreloadPage {
|
|||
|
||||
Button('本地资源svg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = {
|
||||
this.ImageKnifeOption = {
|
||||
loadSrc: $r('app.media.svgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -270,16 +271,16 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
||||
Button('网络资源svg')
|
||||
.onClick(() => {
|
||||
this.imageKnifeOption2 = {
|
||||
this.ImageKnifeOption = {
|
||||
loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/4dc8463e-8ac6-4eb4-862c-783bf486a242.svg',
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -292,7 +293,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
.margin({ top: 15 })
|
||||
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $ImageKnifeOption })
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -311,7 +312,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -321,7 +322,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption3 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -350,7 +351,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -359,7 +360,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption3 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -389,7 +390,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -399,7 +400,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: $r('app.media.bmpSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -428,7 +429,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -437,7 +438,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption4 = {
|
||||
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -467,7 +468,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -477,7 +478,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -506,7 +507,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -515,7 +516,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption5 = {
|
||||
loadSrc: 'https://img-blog.csdnimg.cn/20191215043500229.png',
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -545,7 +546,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -555,7 +556,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption6 = {
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -584,7 +585,7 @@ struct TestPreloadPage {
|
|||
}
|
||||
return false;
|
||||
})
|
||||
ImageKnife.preload(request);
|
||||
globalThis.ImageKnife.preload(request);
|
||||
})
|
||||
.margin({ left: 15 })
|
||||
.backgroundColor(Color.Grey)
|
||||
|
|
@ -593,7 +594,7 @@ struct TestPreloadPage {
|
|||
.onClick(() => {
|
||||
this.imageKnifeOption6 = {
|
||||
loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',
|
||||
size: { width: 300, height: 300 },
|
||||
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 }
|
||||
|
|
@ -616,9 +617,18 @@ struct TestPreloadPage {
|
|||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log('aboutToAppear()')
|
||||
this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
|
||||
type: 'classic',
|
||||
name: 'ImageKnifeParseGIF'
|
||||
})
|
||||
// gif解析在子线程,请在页面构建后创建worker,注入imageknife
|
||||
globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
|
||||
}
|
||||
aboutToDisappear(){
|
||||
if(this.globalGifWorker){
|
||||
this.globalGifWorker.terminate();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var ImageKnife = globalThis.ImageKnife
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {RequestOption} from '@ohos/imageknife'
|
||||
import{NONE} from '@ohos/imageknife'
|
||||
import {Base64} from '@ohos/imageknife'
|
||||
import {FileTypeUtil} from '@ohos/imageknife'
|
||||
import {ImageKnifeData} from '@ohos/imageknife'
|
||||
|
||||
import resourceManager from '@ohos.resourceManager';
|
||||
@Entry
|
||||
@Component
|
||||
struct TestResourceManagerPage {
|
||||
|
||||
@State imageKnifeData: ImageKnifeData = new ImageKnifeData();
|
||||
|
||||
|
||||
build() {
|
||||
Scroll() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
Text(this.imageKnifeData.imageKnifeType)
|
||||
.fontSize(20)
|
||||
.backgroundColor(Color.Pink)
|
||||
.width(300)
|
||||
.height(300)
|
||||
Button("点击执行ResourceManager的Base64")
|
||||
.onClick(()=>{
|
||||
globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMediaBase64($r('app.media.jpgSample').id)
|
||||
.then(data => {
|
||||
console.log("jpgSample data=" + data)
|
||||
let matchUseLess = ";base64,";
|
||||
var matchUseLessIndex = data.indexOf(matchUseLess)
|
||||
data = data.substring(matchUseLessIndex + matchUseLess.length, data.length)
|
||||
console.log("jpgSample prepare save data=" + data)
|
||||
let arrayBuffer = Base64.getInstance().decode(data);
|
||||
console.log("arrayBuffer data=" + arrayBuffer)
|
||||
let fileTypeUtil = new FileTypeUtil();
|
||||
let typeValue = fileTypeUtil.getFileType(arrayBuffer);
|
||||
console.log("typeValue data=" + typeValue)
|
||||
let newImageKnifeData = new ImageKnifeData();
|
||||
newImageKnifeData.imageKnifeType = typeValue
|
||||
|
||||
this.imageKnifeData = newImageKnifeData;
|
||||
})
|
||||
})
|
||||
Button("点击执行ResourceManager的非Base64")
|
||||
.margin({top:25})
|
||||
.onClick(()=>{
|
||||
globalThis.ImageKnife.getImageKnifeContext().resourceManager.getMedia($r('app.media.pngSample').id)
|
||||
.then(data => {
|
||||
console.log("arrayBuffer data=" + data)
|
||||
let fileTypeUtil = new FileTypeUtil();
|
||||
let typeValue = fileTypeUtil.getFileType(this.typedArrayToBuffer(data));
|
||||
console.log("typeValue data=" + typeValue)
|
||||
let newImageKnifeData = new ImageKnifeData();
|
||||
newImageKnifeData.imageKnifeType = typeValue
|
||||
this.imageKnifeData = newImageKnifeData;
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
|
||||
typedArrayToBuffer(array: Uint8Array): ArrayBuffer {
|
||||
return array.buffer.slice(array.byteOffset, array.byteLength + array.byteOffset)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
var ImageKnife = globalThis.exports.default.data.imageKnife
|
||||
|
|
@ -32,7 +32,7 @@ import {BlurTransformation} from '@ohos/imageknife'
|
|||
import {PixelationFilterTransformation} from '@ohos/imageknife'
|
||||
import {MaskTransformation} from '@ohos/imageknife'
|
||||
import {SwirlFilterTransformation} from '@ohos/imageknife'
|
||||
import {PixelMapPack} from '@ohos/imageknife'
|
||||
|
||||
|
||||
/**
|
||||
* PixelMap transform 示例
|
||||
|
|
@ -45,25 +45,25 @@ let mUrl = $r('app.media.pngSample');
|
|||
@Component
|
||||
struct TransformPixelMapPage {
|
||||
@State url: string= "";
|
||||
@State mCropPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mRoundPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mCirclePixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mCircleBorderPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mRotatePixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mSquarePixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mClipTopPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mClipCenterPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mClipBottomPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mGrayscalePixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mBrightnessPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mContrastPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mInvertPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mSepiaPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mSketchPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mBlurPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mPixelPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mSwirlPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mMaskPixelMap: PixelMapPack= new PixelMapPack();
|
||||
@State mCropPixelMap: PixelMap= undefined;
|
||||
@State mRoundPixelMap: PixelMap= undefined;
|
||||
@State mCirclePixelMap: PixelMap= undefined;
|
||||
@State mCircleBorderPixelMap: PixelMap= undefined;
|
||||
@State mRotatePixelMap: PixelMap= undefined;
|
||||
@State mSquarePixelMap: PixelMap= undefined;
|
||||
@State mClipTopPixelMap: PixelMap= undefined;
|
||||
@State mClipCenterPixelMap: PixelMap= undefined;
|
||||
@State mClipBottomPixelMap: PixelMap= undefined;
|
||||
@State mGrayscalePixelMap: PixelMap= undefined;
|
||||
@State mBrightnessPixelMap: PixelMap= undefined;
|
||||
@State mContrastPixelMap: PixelMap= undefined;
|
||||
@State mInvertPixelMap: PixelMap= undefined;
|
||||
@State mSepiaPixelMap: PixelMap= undefined;
|
||||
@State mSketchPixelMap: PixelMap= undefined;
|
||||
@State mBlurPixelMap: PixelMap= undefined;
|
||||
@State mPixelPixelMap: PixelMap= undefined;
|
||||
@State mSwirlPixelMap: PixelMap= undefined;
|
||||
@State mMaskPixelMap: PixelMap= undefined;
|
||||
|
||||
build() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
|
||||
|
|
@ -98,7 +98,7 @@ struct TransformPixelMapPage {
|
|||
});
|
||||
}.margin({ top: 10 })
|
||||
|
||||
Image(this.mCropPixelMap.pixelMap)
|
||||
Image(this.mCropPixelMap )
|
||||
.objectFit(ImageFit.None)
|
||||
.width(100)
|
||||
.height(100)
|
||||
|
|
@ -151,7 +151,7 @@ struct TransformPixelMapPage {
|
|||
});
|
||||
}.margin({ top: 10 })
|
||||
|
||||
Image(this.mRoundPixelMap.pixelMap)
|
||||
Image(this.mRoundPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
|
|
@ -170,7 +170,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.circleTransformation();
|
||||
});
|
||||
Image(this.mCirclePixelMap.pixelMap)
|
||||
Image(this.mCirclePixelMap )
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
|
@ -188,7 +188,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.circleBorderTransformation(5);
|
||||
});
|
||||
Image(this.mCircleBorderPixelMap.pixelMap)
|
||||
Image(this.mCircleBorderPixelMap )
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
|
@ -210,7 +210,7 @@ struct TransformPixelMapPage {
|
|||
}
|
||||
this.transformRotate(mRotate);
|
||||
});
|
||||
Image(this.mRotatePixelMap.pixelMap)
|
||||
Image(this.mRotatePixelMap )
|
||||
.width(200)
|
||||
.height(200)
|
||||
.margin({ top: 10 })
|
||||
|
|
@ -228,7 +228,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.transformSquare();
|
||||
});
|
||||
Image(this.mSquarePixelMap.pixelMap)
|
||||
Image(this.mSquarePixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -266,17 +266,17 @@ struct TransformPixelMapPage {
|
|||
}.margin({ top: 10 })
|
||||
|
||||
Row({ space: 1 }) {
|
||||
Image(this.mClipTopPixelMap.pixelMap)
|
||||
Image(this.mClipTopPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
.margin({ top: 10 })
|
||||
Image(this.mClipCenterPixelMap.pixelMap)
|
||||
Image(this.mClipCenterPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
.margin({ top: 10 })
|
||||
Image(this.mClipBottomPixelMap.pixelMap)
|
||||
Image(this.mClipBottomPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(100)
|
||||
.height(100)
|
||||
|
|
@ -295,7 +295,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.grayscalePixelMap();
|
||||
});
|
||||
Image(this.mGrayscalePixelMap.pixelMap)
|
||||
Image(this.mGrayscalePixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -313,7 +313,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.brightnessPixelMap(0.8);
|
||||
});
|
||||
Image(this.mBrightnessPixelMap.pixelMap)
|
||||
Image(this.mBrightnessPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -331,7 +331,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.contrastPixelMap(4);
|
||||
});
|
||||
Image(this.mContrastPixelMap.pixelMap)
|
||||
Image(this.mContrastPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -349,7 +349,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.invertPixelMap();
|
||||
});
|
||||
Image(this.mInvertPixelMap.pixelMap)
|
||||
Image(this.mInvertPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -368,7 +368,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.sepiaPixelMap();
|
||||
});
|
||||
Image(this.mSepiaPixelMap.pixelMap)
|
||||
Image(this.mSepiaPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -386,7 +386,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.sketchPixelMap();
|
||||
});
|
||||
Image(this.mSketchPixelMap.pixelMap)
|
||||
Image(this.mSketchPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -405,7 +405,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.blurHandlePixelMap(20);
|
||||
});
|
||||
Image(this.mBlurPixelMap.pixelMap)
|
||||
Image(this.mBlurPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -425,7 +425,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.pixelHandlePixelMap(20);
|
||||
});
|
||||
Image(this.mPixelPixelMap.pixelMap)
|
||||
Image(this.mPixelPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -444,7 +444,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.swirlHandlePixelMap();
|
||||
});
|
||||
Image(this.mSwirlPixelMap.pixelMap)
|
||||
Image(this.mSwirlPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -463,7 +463,7 @@ struct TransformPixelMapPage {
|
|||
.onClick(() => {
|
||||
this.maskHandlePixelMap($r('app.media.mask_starfish'));
|
||||
});
|
||||
Image(this.mMaskPixelMap.pixelMap)
|
||||
Image(this.mMaskPixelMap )
|
||||
.objectFit(ImageFit.Fill)
|
||||
.width(200)
|
||||
.height(200)
|
||||
|
|
@ -489,11 +489,11 @@ struct TransformPixelMapPage {
|
|||
imageKnifeOption.load($r('app.media.jpgSample'))
|
||||
// imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
let result = undefined;
|
||||
this.mCropPixelMap = result;
|
||||
setTimeout(() => {
|
||||
let result2 = new PixelMapPack();
|
||||
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result2 = undefined;
|
||||
result2 = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mCropPixelMap = result2;
|
||||
}, 100)
|
||||
return false;
|
||||
|
|
@ -511,11 +511,11 @@ struct TransformPixelMapPage {
|
|||
var imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load($r('app.media.Back'))
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
let result = undefined;
|
||||
this.mCropPixelMap = result;
|
||||
setTimeout(() => {
|
||||
let result2 = new PixelMapPack();
|
||||
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result2 = undefined;
|
||||
result2 = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mCropPixelMap = result2;
|
||||
}, 100)
|
||||
return false;
|
||||
|
|
@ -533,11 +533,11 @@ struct TransformPixelMapPage {
|
|||
var imageKnifeOption = new RequestOption()
|
||||
imageKnifeOption.load($r('app.media.Back'))
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
let result = undefined;
|
||||
this.mCropPixelMap = result;
|
||||
setTimeout(() => {
|
||||
let result2 = new PixelMapPack();
|
||||
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result2 = undefined;
|
||||
result2 = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mCropPixelMap = result2;
|
||||
}, 100)
|
||||
return false;
|
||||
|
|
@ -556,11 +556,11 @@ struct TransformPixelMapPage {
|
|||
var imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
let result = undefined;
|
||||
this.mRoundPixelMap = result;
|
||||
setTimeout(() => {
|
||||
let result2 = new PixelMapPack();
|
||||
result2.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result2 = undefined;
|
||||
result2 = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mRoundPixelMap = result2;
|
||||
}, 100)
|
||||
return false;
|
||||
|
|
@ -578,8 +578,8 @@ struct TransformPixelMapPage {
|
|||
let imageKnifeOption = new RequestOption();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mCirclePixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -598,8 +598,8 @@ struct TransformPixelMapPage {
|
|||
{ r_color: 255, g_color: 204, b_color: 204 });
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mCircleBorderPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -618,8 +618,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new RotateImageTransformation(angled);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mRotatePixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -637,8 +637,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new CropSquareTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mSquarePixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -656,15 +656,15 @@ struct TransformPixelMapPage {
|
|||
var transformation = new CropTransformation(width, height, cropType);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
let result = undefined;
|
||||
if (cropType == CropType.TOP) {
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mClipTopPixelMap = result;
|
||||
} else if (cropType == CropType.CENTER) {
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mClipCenterPixelMap = result;
|
||||
} else if (cropType == CropType.BOTTOM) {
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mClipBottomPixelMap = result;
|
||||
}
|
||||
return false;
|
||||
|
|
@ -684,8 +684,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new GrayscaleTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mGrayscalePixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -704,8 +704,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new BrightnessFilterTransformation(brightness);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mBrightnessPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -724,8 +724,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new ContrastFilterTransformation(contrast);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mContrastPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -744,8 +744,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new InvertFilterTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mInvertPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -764,8 +764,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new SepiaFilterTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mSepiaPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -784,8 +784,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new SketchFilterTransformation();
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mSketchPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -804,8 +804,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new BlurTransformation(radius);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mBlurPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -823,8 +823,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new PixelationFilterTransformation(pixel);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mPixelPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -843,8 +843,8 @@ struct TransformPixelMapPage {
|
|||
var transformation = new SwirlFilterTransformation(80);
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mSwirlPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
@ -864,8 +864,8 @@ struct TransformPixelMapPage {
|
|||
// imageKnifeOption.load($r('app.media.photo6'))
|
||||
imageKnifeOption.load(mUrl)
|
||||
.addListener((err, data) => {
|
||||
let result = new PixelMapPack();
|
||||
result.pixelMap = data.imageKnifeValue as PixelMap;
|
||||
let result = undefined;
|
||||
result = data.drawPixelMap.imagePixelMap as PixelMap;
|
||||
this.mMaskPixelMap = result;
|
||||
return false;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
/*
|
||||
* Copyright (C) 2021 Huawei Device Co., Ltd.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is dibistributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
import {ImageKnifeComponent} from '@ohos/imageknife'
|
||||
import {ImageKnifeOption} from '@ohos/imageknife'
|
||||
import {RotateImageTransformation} from '@ohos/imageknife'
|
||||
import {RoundedCornersTransformation} from '@ohos/imageknife'
|
||||
import {TransformType} from '@ohos/imageknife'
|
||||
|
||||
@Entry
|
||||
@Component
|
||||
struct Index {
|
||||
@State imageKnifeOption1: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.jpgSample'),
|
||||
errorholderSrc: $r('app.media.pngSample'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption2: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: "https://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ericA1Mv66TwicuYOtbDMBcUhv1aa9RJBeAn9uURfcZD0AUGrJebAn1g2AjN0vb2E1XTET7fTuLBNmA/132",
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.jpgSample'),
|
||||
errorholderSrc: $r('app.media.pngSample'),
|
||||
transform: {
|
||||
transformType:TransformType.RoundedCornersTransformation,
|
||||
roundedCorners:{
|
||||
top_left: 30,
|
||||
top_right: 30,
|
||||
bottom_left: 30,
|
||||
bottom_right: 30
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
@State imageKnifeOption3: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.pngSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.jpgSample'),
|
||||
errorholderSrc: $r('app.media.pngSample'),
|
||||
transform: {
|
||||
transformType:TransformType.RotateImageTransformation,
|
||||
rotateImage:180
|
||||
}
|
||||
};
|
||||
@State imageKnifeOption4: ImageKnifeOption =
|
||||
{
|
||||
loadSrc: $r('app.media.jpgSample'),
|
||||
size: { width: 300, height: 300 },
|
||||
placeholderSrc: $r('app.media.jpgSample'),
|
||||
errorholderSrc: $r('app.media.pngSample'),
|
||||
transform: {
|
||||
transformType:TransformType.RoundedCornersTransformation,
|
||||
roundedCorners:{
|
||||
top_left: 130,
|
||||
top_right: 130,
|
||||
bottom_left: 130,
|
||||
bottom_right: 130
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
build() {
|
||||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption1 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption2 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption3 })
|
||||
ImageKnifeComponent({ imageKnifeOption: $imageKnifeOption4 })
|
||||
}
|
||||
.width('100%')
|
||||
.height('100%')
|
||||
}
|
||||
|
||||
aboutToAppear() {
|
||||
console.log("aboutToAppear()")
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
import arkWorker from '@ohos.worker';
|
||||
import { gifHandler } from '@ohos/imageknife/src/main/ets/components/imageknife/utils/gif/worker/GifWorker'
|
||||
import { gifHandler } from '@ohos/imageknife/GifWorker'
|
||||
|
||||
arkWorker.parentPort.onmessage = gifHandler;
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
*/
|
||||
import arkWorker from '@ohos.worker';
|
||||
|
||||
import {handler} from '@ohos/imageknife/src/main/ets/components/imageknife/pngj/PngWork'
|
||||
import {handler} from '@ohos/imageknife/PngWork'
|
||||
|
||||
arkWorker.parentPort.onmessage = handler
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
"deliveryWithInstall": true,
|
||||
"installationFree": false,
|
||||
"pages": "$profile:main_pages",
|
||||
"requestPermissions": [{"name": "ohos.permission.INTERNET"}],
|
||||
|
||||
"uiSyntax": "ets",
|
||||
"abilities": [
|
||||
{
|
||||
|
|
@ -35,6 +35,17 @@
|
|||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"requestPermissions": [
|
||||
{
|
||||
"name": "ohos.permission.INTERNET",
|
||||
"usedScene": {
|
||||
"abilities": [
|
||||
"FormAbility"
|
||||
],
|
||||
"when": "always"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.0 MiB After Width: | Height: | Size: 1.1 MiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 251 KiB After Width: | Height: | Size: 4.2 KiB |
|
|
@ -1,8 +1,6 @@
|
|||
{
|
||||
"src": [
|
||||
"pages/index",
|
||||
"pages/indexFresco",
|
||||
"pages/frescoLayerTestCasePage",
|
||||
"pages/frescoImageTestCasePage",
|
||||
"pages/frescoRetryTestCasePage",
|
||||
"pages/basicTestFeatureAbilityPage",
|
||||
|
|
@ -10,25 +8,21 @@
|
|||
"pages/basicTestMediaImage",
|
||||
"pages/basicTestResourceManagerPage",
|
||||
"pages/storageTestLruCache",
|
||||
"pages/storageTestDiskLruCache",
|
||||
"pages/transformTestCasePage",
|
||||
"pages/pngjTestCasePage",
|
||||
"pages/testAllTypeImageKnifeComponentPage",
|
||||
"pages/testAllTypeNativeImagePage",
|
||||
"pages/loadResourceTestCasePage",
|
||||
"pages/loadNetworkTestCasePage",
|
||||
"pages/showErrorholderTestCasePage",
|
||||
"pages/transformPixelMapPage",
|
||||
"pages/testGifDontAnimatePage",
|
||||
"pages/testPreloadPage",
|
||||
"pages/testImageKnifeOptionChangedPage",
|
||||
"pages/testImageKnifeOptionChangedPage2",
|
||||
"pages/testImageKnifeOptionChangedPage3",
|
||||
"pages/testImageKnifeOptionChangedPage4",
|
||||
"pages/testImageKnifeOptionChangedPage5",
|
||||
"pages/compressPage",
|
||||
"pages/testAllCacheInfoPage",
|
||||
"pages/testResourceManagerPage",
|
||||
"pages/testMultiThreadWorkerPage2",
|
||||
"pages/cropImagePage",
|
||||
"pages/cropImagePage2",
|
||||
"pages/dpgTestCasePage"
|
||||
"pages/svgTestCasePage",
|
||||
"pages/gifTestCasePage",
|
||||
"pages/imageknifeTestCaseIndex"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,6 @@ import AbilityStage from "@ohos.application.AbilityStage"
|
|||
|
||||
export default class TestAbilityStage extends AbilityStage {
|
||||
onCreate() {
|
||||
console.log("[Demo] TestAbilityStage onCreate")
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -19,35 +19,35 @@ import testsuite from '../test/List.test'
|
|||
|
||||
export default class TestAbility extends Ability {
|
||||
onCreate(want, launchParam) {
|
||||
console.log('TestAbility onCreate')
|
||||
|
||||
var abilityDelegator: any
|
||||
abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
|
||||
var abilityDelegatorArguments: any
|
||||
abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
|
||||
console.info('start run testcase!!!')
|
||||
|
||||
Hypium.hypiumTest(abilityDelegator, abilityDelegatorArguments, testsuite)
|
||||
}
|
||||
|
||||
onDestroy() {
|
||||
console.log('TestAbility onDestroy')
|
||||
|
||||
}
|
||||
|
||||
onWindowStageCreate(windowStage) {
|
||||
console.log('TestAbility onWindowStageCreate')
|
||||
|
||||
windowStage.setUIContent(this.context, 'TestAbility/pages/index', null)
|
||||
|
||||
globalThis.abilityContext = this.context;
|
||||
}
|
||||
|
||||
onWindowStageDestroy() {
|
||||
console.log('TestAbility onWindowStageDestroy')
|
||||
|
||||
}
|
||||
|
||||
onForeground() {
|
||||
console.log('TestAbility onForeground')
|
||||
|
||||
}
|
||||
|
||||
onBackground() {
|
||||
console.log('TestAbility onBackground')
|
||||
|
||||
}
|
||||
};
|
||||
|
|
@ -33,11 +33,11 @@ function translateParamsToString(parameters) {
|
|||
}
|
||||
|
||||
async function onAbilityCreateCallback() {
|
||||
console.log("onAbilityCreateCallback");
|
||||
|
||||
}
|
||||
|
||||
async function addAbilityMonitorCallback(err: any) {
|
||||
console.info("addAbilityMonitorCallback : " + JSON.stringify(err))
|
||||
|
||||
}
|
||||
|
||||
export default class OpenHarmonyTestRunner implements TestRunner {
|
||||
|
|
@ -45,11 +45,11 @@ export default class OpenHarmonyTestRunner implements TestRunner {
|
|||
}
|
||||
|
||||
onPrepare() {
|
||||
console.info("OpenHarmonyTestRunner OnPrepare ")
|
||||
|
||||
}
|
||||
|
||||
async onRun() {
|
||||
console.log('OpenHarmonyTestRunner onRun run')
|
||||
|
||||
abilityDelegatorArguments = AbilityDelegatorRegistry.getArguments()
|
||||
abilityDelegator = AbilityDelegatorRegistry.getAbilityDelegator()
|
||||
var testAbilityName = abilityDelegatorArguments.bundleName + '.TestAbility'
|
||||
|
|
@ -60,13 +60,13 @@ export default class OpenHarmonyTestRunner implements TestRunner {
|
|||
abilityDelegator.addAbilityMonitor(lMonitor, addAbilityMonitorCallback)
|
||||
var cmd = 'aa start -d 0 -a TestAbility' + ' -b ' + abilityDelegatorArguments.bundleName
|
||||
cmd += ' '+translateParamsToString(abilityDelegatorArguments.parameters)
|
||||
console.info('cmd : '+cmd)
|
||||
|
||||
abilityDelegator.executeShellCommand(cmd,
|
||||
(err: any, d: any) => {
|
||||
console.info('executeShellCommand : err : ' + JSON.stringify(err));
|
||||
console.info('executeShellCommand : data : ' + d.stdResult);
|
||||
console.info('executeShellCommand : data : ' + d.exitCode);
|
||||
|
||||
|
||||
|
||||
})
|
||||
console.info('OpenHarmonyTestRunner onRun end')
|
||||
|
||||
}
|
||||
};
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
import arkWorker from '@ohos.worker';
|
||||
import { parseBufferToFrame } from '../parse/GIFParse'
|
||||
import { parseBufferToFrame } from './src/main/ets/components/imageknife/utils/gif/parse/GIFParse'
|
||||
|
||||
export enum LoadType {
|
||||
loadBufferByWorker = "loadBufferByWorker"
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
import arkWorker from '@ohos.worker';
|
||||
import {UPNG} from '../../imageknife/pngj/UPNG'
|
||||
import {UPNG} from './src/main/ets/components/imageknife/pngj/UPNG'
|
||||
|
||||
export function handler (e) {
|
||||
var data = e.data;
|
||||
|
|
@ -80,7 +80,7 @@ export * from './src/main/ets/components/imageknife/transform/pixelmap/FitCenter
|
|||
* pngj
|
||||
*/
|
||||
export * from './src/main/ets/components/imageknife/pngj/Pngj'
|
||||
export {handler} from './src/main/ets/components/imageknife/pngj/PngWork'
|
||||
export {handler} from './PngWork'
|
||||
export * from './src/main/ets/components/imageknife/pngj/UPNG'
|
||||
|
||||
|
||||
|
|
@ -91,9 +91,9 @@ export * from './src/main/ets/components/imageknife/pngj/UPNG'
|
|||
export * from './src/main/ets/components/imageknife/ImageKnife'
|
||||
export * from './src/main/ets/components/imageknife/RequestOption'
|
||||
export * from './src/main/ets/components/imageknife/ImageKnifeComponent'
|
||||
export * from './src/main/ets/components/imageknife/ImageKnifeDrawFactory'
|
||||
export * from './src/main/ets/components/imageknife/ImageKnifeOption'
|
||||
export * from './src/main/ets/components/imageknife/ImageKnifeData'
|
||||
export * from './src/main/ets/components/imageknife/PixelMapPack'
|
||||
export * from './src/main/ets/components/imageknife/interface/IAllCacheInfoCallback'
|
||||
export * from './src/main/ets/components/imageknife/interface/IParseImage'
|
||||
export * from './src/main/ets/components/imageknife/networkmanage/IDataFetch'
|
||||
|
|
@ -101,3 +101,19 @@ export * from './src/main/ets/components/imageknife/requestmanage/ICache'
|
|||
export * from './src/main/ets/components/imageknife/utils/FileTypeUtil'
|
||||
export * from './src/main/ets/components/imageknife/utils/ParseImageUtil'
|
||||
|
||||
/**
|
||||
* svg parse
|
||||
*/
|
||||
export * from './src/main/ets/components/imageknife/utils/svg/SVGParseImpl'
|
||||
|
||||
/**
|
||||
* gif parse
|
||||
*/
|
||||
export * from './src/main/ets/components/imageknife/utils/gif/GIFParseImpl'
|
||||
export * from './src/main/ets/components/imageknife/utils/gif/GIFFrame'
|
||||
// 能力增强worker 解析GIF数据
|
||||
export {gifHandler} from './GifWorker'
|
||||
|
||||
// 自定义组件新增
|
||||
// 自定义组件绘制生命周期
|
||||
export * from './src/main/ets/components/imageknife/interface/IDrawLifeCycle'
|
||||
|
|
@ -12,11 +12,14 @@
|
|||
},
|
||||
"main": "index.ets",
|
||||
"repository": "https://gitee.com/openharmony-tpc/ImageKnife",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.4",
|
||||
"dependencies": {
|
||||
"pako": "^1.0.5",
|
||||
"js-binary-schema-parser": "^2.0.3",
|
||||
"@ohos/disklrucache": "^1.0.0",
|
||||
"crc-32": "^1.2.0"
|
||||
"@ohos/svg": "1.1.0",
|
||||
"crc-32": "^1.2.0",
|
||||
"spark-md5": "^3.0.2"
|
||||
},
|
||||
"tags": [
|
||||
"OpenHarmony",
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import {AsyncCallback} from "../imageknife/interface/asynccallback"
|
|||
import {PlaceHolderManager} from "../imageknife/holder/PlaceHolderManager"
|
||||
import {RetryHolderManager} from "../imageknife/holder/RetryHolderManager"
|
||||
import {ErrorHolderManager} from "../imageknife/holder/ErrorHolderManager"
|
||||
import {RequestManager} from "../imageknife/requestmanage/RequstManager"
|
||||
import {RequestManager} from "../imageknife/requestmanage/RequestManager"
|
||||
import {NONE} from "../cache/diskstrategy/enum/NONE"
|
||||
import {FileTypeUtil} from '../imageknife/utils/FileTypeUtil'
|
||||
import {DownloadClient} from '../imageknife/networkmanage/DownloadClient'
|
||||
|
|
|
|||
|
|
@ -24,17 +24,13 @@ import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
|
|||
@Component
|
||||
export struct ImageKnifeComponent {
|
||||
@Watch('watchImageKnifeOption') @Link imageKnifeOption: ImageKnifeOption;
|
||||
|
||||
// 有效onAreaChanged触发计数
|
||||
private onAreaCount:number = 0
|
||||
|
||||
@State componentWidth: string = '100%'
|
||||
@State componentHeight: string = '100%'
|
||||
|
||||
@State gifPixelMap:PixelMap = undefined;
|
||||
|
||||
@State gifPixelMap: PixelMap = undefined;
|
||||
drawLifeCycle: IDrawLifeCycle
|
||||
autoPlay = true
|
||||
// 有效onAreaChanged触发计数
|
||||
private onAreaCount: number = 0
|
||||
private preSize: {
|
||||
width: string,
|
||||
height: string
|
||||
|
|
@ -55,40 +51,34 @@ export struct ImageKnifeComponent {
|
|||
|
||||
// 展示占位图
|
||||
displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.drawPlaceholder(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId)
|
||||
return true;
|
||||
},
|
||||
// 展示加载进度
|
||||
displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.drawProgress(context, progress, imageKnifeOption, compWidth, compHeight, setGifTimeId)
|
||||
return true;
|
||||
},
|
||||
// 展示缩略图
|
||||
displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.drawThumbSizeMultiplier(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId)
|
||||
return true;
|
||||
},
|
||||
|
||||
// 展示主图
|
||||
displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.drawMainSource(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId)
|
||||
return true;
|
||||
},
|
||||
|
||||
// 展示重试图层
|
||||
displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.drawRetryholder(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId)
|
||||
return true;
|
||||
},
|
||||
|
||||
// 展示失败占位图
|
||||
displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
|
||||
// @ts-ignore
|
||||
this.drawErrorholder(context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId)
|
||||
return true;
|
||||
}
|
||||
|
|
@ -96,27 +86,27 @@ export struct ImageKnifeComponent {
|
|||
}
|
||||
|
||||
build() {
|
||||
Canvas(this.context)
|
||||
.width(this.componentWidth)
|
||||
.height(this.componentHeight)
|
||||
.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()
|
||||
}
|
||||
})
|
||||
.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(() => {
|
||||
})
|
||||
.onClick(() => {
|
||||
if (this.imageKnifeOption.canRetryClick && this.hasDisplayRetryholder) {
|
||||
this.retryClick()
|
||||
}
|
||||
})
|
||||
Canvas(this.context)
|
||||
.width(this.componentWidth)
|
||||
.height(this.componentHeight)
|
||||
.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()
|
||||
}
|
||||
})
|
||||
.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(() => {
|
||||
})
|
||||
.onClick(() => {
|
||||
if (this.imageKnifeOption.canRetryClick && this.hasDisplayRetryholder) {
|
||||
this.retryClick()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
watchImageKnifeOption() {
|
||||
|
|
@ -132,22 +122,26 @@ export struct ImageKnifeComponent {
|
|||
this.whetherWaitSize();
|
||||
}
|
||||
}
|
||||
whetherWaitSize(){
|
||||
|
||||
whetherWaitSize() {
|
||||
this.componentWidth = this.imageKnifeOption.size.width
|
||||
this.componentHeight = this.imageKnifeOption.size.height
|
||||
if(this.newSizeEqualPreSize(this.imageKnifeOption.size)){
|
||||
if (this.newSizeEqualPreSize(this.imageKnifeOption.size)) {
|
||||
console.log('whetherWaitSize 宽高不变 直接发送请求')
|
||||
this.imageKnifeExecute()
|
||||
}else{
|
||||
this.onAreaCount ++;
|
||||
} 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){
|
||||
newSizeEqualPreSize(newSize: {
|
||||
width: string,
|
||||
height: string
|
||||
}): boolean {
|
||||
if (this.preSize.width == newSize.width && this.preSize.height == newSize.height) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
|
@ -160,7 +154,7 @@ export struct ImageKnifeComponent {
|
|||
|
||||
aboutToAppear() {
|
||||
console.log('imageKnifeComponent aboutToAppear happened!')
|
||||
this.onAreaCount ++;
|
||||
this.onAreaCount++;
|
||||
this.componentWidth = this.imageKnifeOption.size.width
|
||||
this.componentHeight = this.imageKnifeOption.size.height
|
||||
}
|
||||
|
|
@ -176,7 +170,7 @@ export struct ImageKnifeComponent {
|
|||
if (this.imageKnifeOption.size) {
|
||||
let realSize = {
|
||||
width: this.currentWidth,
|
||||
height:this.currentHeight
|
||||
height: this.currentHeight
|
||||
}
|
||||
request.setImageViewSize(realSize)
|
||||
}
|
||||
|
|
@ -380,7 +374,7 @@ export struct ImageKnifeComponent {
|
|||
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)
|
||||
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!')
|
||||
})
|
||||
|
|
@ -393,7 +387,7 @@ export struct ImageKnifeComponent {
|
|||
context.lineWidth = Math.floor(diameter * 0.03)
|
||||
context.lineCap = "round"
|
||||
context.fillStyle = "#10a5ff"
|
||||
context.font = Math.floor(diameter * 0.3 * px2vp(1))+'px'
|
||||
context.font = Math.floor(diameter * 0.3 * px2vp(1)) + 'px'
|
||||
|
||||
let x0 = (compWidth - diameter) / 2.0 + Math.floor(diameter * 0.5)
|
||||
let y0 = (compHeight - diameter) / 2.0 + Math.floor(diameter * 0.1)
|
||||
|
|
@ -435,7 +429,7 @@ export struct ImageKnifeComponent {
|
|||
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)
|
||||
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!')
|
||||
})
|
||||
|
|
@ -450,7 +444,7 @@ export struct ImageKnifeComponent {
|
|||
console.log('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)
|
||||
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!')
|
||||
})
|
||||
|
|
@ -467,7 +461,7 @@ export struct ImageKnifeComponent {
|
|||
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)
|
||||
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!')
|
||||
})
|
||||
|
|
@ -481,7 +475,7 @@ export struct ImageKnifeComponent {
|
|||
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)
|
||||
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!')
|
||||
})
|
||||
|
|
@ -661,9 +655,9 @@ export struct ImageKnifeComponent {
|
|||
}
|
||||
let scaleType = (typeof this.imageKnifeOption.mainScaleType == 'number') ? this.imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
|
||||
context.save();
|
||||
let frameW = frames[0].dims.left+frames[0].dims.width
|
||||
let frameH = frames[0].dims.top+frames[0].dims.height
|
||||
ScaleTypeHelper.drawImageWithScaleType(context, scaleType, pixelmap, px2vp(frameW), px2vp(frameH), compWidth, compHeight,px2vp(frame.dims.left),px2vp(frame.dims.top))
|
||||
let frameW = frames[0].dims.left + frames[0].dims.width
|
||||
let frameH = frames[0].dims.top + frames[0].dims.height
|
||||
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!')
|
||||
|
|
@ -704,7 +698,7 @@ export enum ScaleType {
|
|||
}
|
||||
|
||||
export class ScaleTypeHelper {
|
||||
static drawImageWithScaleType(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX:number,imageOffsetY:number) {
|
||||
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
|
||||
let scaleH = compHeight / imageHeight
|
||||
let minScale = scaleW > scaleH ? scaleH : scaleW
|
||||
|
|
@ -712,46 +706,46 @@ export class ScaleTypeHelper {
|
|||
|
||||
switch (scaleType) {
|
||||
case ScaleType.FIT_START:
|
||||
ScaleTypeHelper.drawFitStart(context, source, minScale, imageWidth, imageHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawFitStart(context, source, minScale, imageWidth, imageHeight, imageOffsetX, imageOffsetY)
|
||||
break;
|
||||
case ScaleType.FIT_END:
|
||||
ScaleTypeHelper.drawFitEnd(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawFitEnd(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY)
|
||||
break;
|
||||
case ScaleType.FIT_CENTER:
|
||||
ScaleTypeHelper.drawFitCenter(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawFitCenter(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY)
|
||||
break;
|
||||
case ScaleType.CENTER:
|
||||
ScaleTypeHelper.drawCenter(context, source, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawCenter(context, source, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY)
|
||||
break;
|
||||
case ScaleType.CENTER_CROP:
|
||||
ScaleTypeHelper.drawCenterCrop(context, source, maxScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawCenterCrop(context, source, maxScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY)
|
||||
break;
|
||||
case ScaleType.FIT_XY:
|
||||
ScaleTypeHelper.drawFitXY(context, source, scaleW, scaleH, imageWidth, imageHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawFitXY(context, source, scaleW, scaleH, imageWidth, imageHeight, imageOffsetX, imageOffsetY)
|
||||
break;
|
||||
case ScaleType.CENTER_INSIDE:
|
||||
ScaleTypeHelper.drawCenterInside(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawCenterInside(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY)
|
||||
break;
|
||||
case ScaleType.NONE:
|
||||
ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY)
|
||||
break;
|
||||
default:
|
||||
ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawNone(context, source, imageWidth, imageHeight, imageOffsetX, imageOffsetY)
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
static drawFitStart(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, minScale: number, imageWidth: number, imageHeight: number, imageOffsetX?:number,imageOffsetY?:number) {
|
||||
static drawFitStart(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, minScale: number, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
|
||||
context.setTransform(minScale, 0, 0, minScale, 0, 0)
|
||||
let dx = 0
|
||||
let dy = 0
|
||||
let dw = imageWidth;
|
||||
let dh = imageHeight;
|
||||
context.drawImage(source, dx+imageOffsetX, dy+imageOffsetY)
|
||||
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY)
|
||||
}
|
||||
|
||||
static drawFitEnd(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, minScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?:number,imageOffsetY?:number) {
|
||||
static drawFitEnd(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, minScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
|
||||
context.setTransform(minScale, 0, 0, minScale, 0, 0)
|
||||
|
||||
let dx = (compWidth - imageWidth * minScale) / (minScale * 1.0);
|
||||
|
|
@ -759,59 +753,59 @@ export class ScaleTypeHelper {
|
|||
let dw = imageWidth;
|
||||
let dh = imageHeight;
|
||||
|
||||
context.drawImage(source, dx+imageOffsetX, dy+imageOffsetY)
|
||||
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY)
|
||||
}
|
||||
|
||||
static drawFitCenter(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, minScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?:number,imageOffsetY?:number) {
|
||||
static drawFitCenter(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, minScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
|
||||
context.setTransform(minScale, 0, 0, minScale, 0, 0)
|
||||
let dx = (compWidth - imageWidth * minScale) / (minScale * 2.0);
|
||||
let dy = (compHeight - imageHeight * minScale) / (minScale * 2.0);
|
||||
let dw = imageWidth;
|
||||
let dh = imageHeight;
|
||||
|
||||
context.drawImage(source, dx+imageOffsetX, dy+imageOffsetY)
|
||||
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY)
|
||||
}
|
||||
|
||||
static drawCenter(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?:number,imageOffsetY?:number) {
|
||||
static drawCenter(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
|
||||
let dx = (compWidth - imageWidth) / 2.0;
|
||||
let dy = (compHeight - imageHeight) / 2.0;
|
||||
let dw = imageWidth;
|
||||
let dh = imageHeight;
|
||||
context.drawImage(source, dx+imageOffsetX, dy+imageOffsetY)
|
||||
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY)
|
||||
}
|
||||
|
||||
static drawCenterCrop(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, maxScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?:number,imageOffsetY?:number) {
|
||||
static drawCenterCrop(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, maxScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
|
||||
context.setTransform(maxScale, 0, 0, maxScale, 0, 0)
|
||||
let dx = (compWidth - imageWidth * maxScale) / (maxScale * 2.0);
|
||||
let dy = (compHeight - imageHeight * maxScale) / (maxScale * 2.0);
|
||||
let dw = imageWidth;
|
||||
let dh = imageHeight;
|
||||
context.drawImage(source, dx+imageOffsetX, dy+imageOffsetY)
|
||||
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY)
|
||||
}
|
||||
|
||||
static drawFitXY(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, scaleW: number, scaleH: number, imageWidth: number, imageHeight: number, imageOffsetX?:number,imageOffsetY?:number) {
|
||||
static drawFitXY(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, scaleW: number, scaleH: number, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
|
||||
context.setTransform(scaleW, 0, 0, scaleH, 0, 0)
|
||||
let dx = 0;
|
||||
let dy = 0;
|
||||
let dw = imageWidth;
|
||||
let dh = imageHeight;
|
||||
context.drawImage(source, dx+imageOffsetX, dy+imageOffsetY)
|
||||
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY)
|
||||
}
|
||||
|
||||
static drawCenterInside(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, minScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?:number,imageOffsetY?:number) {
|
||||
static drawCenterInside(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, minScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
|
||||
if (minScale < 1) {
|
||||
ScaleTypeHelper.drawFitCenter(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawFitCenter(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY)
|
||||
} else {
|
||||
ScaleTypeHelper.drawCenter(context, source, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX,imageOffsetY)
|
||||
ScaleTypeHelper.drawCenter(context, source, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY)
|
||||
}
|
||||
}
|
||||
|
||||
static drawNone(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, imageOffsetX?:number,imageOffsetY?:number) {
|
||||
static drawNone(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
|
||||
let dx = 0;
|
||||
let dy = 0;
|
||||
let dw = imageWidth;
|
||||
let dh = imageHeight;
|
||||
context.drawImage(source, dx+imageOffsetX, dy+imageOffsetY)
|
||||
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ export class RequestManager {
|
|||
// 使用媒体子系统 ImageSource解析文件 获取PixelMap
|
||||
let fileTypeUtil = new FileTypeUtil();
|
||||
let typeValue = fileTypeUtil.getFileType(arrayBuffer)
|
||||
console.log("RequstManager - 文件类型为= " + typeValue)
|
||||
console.log("RequestManager - 文件类型为= " + typeValue)
|
||||
// gif处理
|
||||
if(ImageKnifeData.GIF == typeValue && !request.dontAnimateFlag){
|
||||
// 处理gif
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
*/
|
||||
import { IParseGif } from './IParseGif'
|
||||
import { GIFFrame } from './GIFFrame'
|
||||
import { LoadType } from './worker/GifWorker'
|
||||
import { LoadType } from '../../../../../../../GifWorker'
|
||||
import { parseBufferToFrame } from './parse/GIFParse'
|
||||
import image from '@ohos.multimedia.image'
|
||||
|
||||
|
|
|
|||
33
package.json
33
package.json
|
|
@ -1,19 +1,20 @@
|
|||
{
|
||||
"license":"ISC",
|
||||
"devDependencies":{},
|
||||
"name":"imageknife",
|
||||
"ohos":{
|
||||
"org":"huawei",
|
||||
"directoryLevel":"project",
|
||||
"buildTool":"hvigor"
|
||||
"license": "ISC",
|
||||
"devDependencies": {},
|
||||
"name": "imageknife",
|
||||
"ohos": {
|
||||
"org": "huawei",
|
||||
"directoryLevel": "project",
|
||||
"buildTool": "hvigor"
|
||||
},
|
||||
"description":"example description",
|
||||
"repository":{},
|
||||
"version":"1.0.0",
|
||||
"dependencies":{
|
||||
"@ohos/hypium":"1.0.1",
|
||||
"@ohos/hvigor-ohos-plugin":"1.1.6",
|
||||
"hypium":"^1.0.0",
|
||||
"@ohos/hvigor":"1.1.6"
|
||||
"description": "example description",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Loading…
Reference in New Issue