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

ComponentV2装饰器适配 

Signed-off-by: zgf <zenggaofeng2@h-partners.com>
This commit is contained in:
zgf 2024-08-05 15:24:59 +08:00
parent d7a14b8833
commit 1b05a2aa2d
32 changed files with 376 additions and 786 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.md
View File

@ -1,3 +1,8 @@
## 3.1.0-rc.0
- ComponentV2装饰器适配
- imageKnifeOption={...}用法改为new ImageKnifeOption({...})
- animatorOption={...}用法改为new AnimatorOption({...})
## 3.0.1
- 修复animatorOption属性设置初始化值失效
- 网络请求code为206、204时返回arraybuffer

62
README.md
View File

@ -57,12 +57,12 @@ await ImageKnife.getInstance().initFileCache(context, 256, 256 * 1024 * 1024)
```
ImageKnifeComponent({
ImageKnifeOption: {
ImageKnifeOption: new ImageKnifeOption({
loadSrc: $r("app.media.app_icon"),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto
}
})
}).width(100).height(100)
```
@ -70,12 +70,12 @@ ImageKnifeComponent({
```
ImageKnifeComponent({
ImageKnifeOption: {
ImageKnifeOption: new ImageKnifeOption({
loadSrc: this.localFile,
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto
}
})
}).width(100).height(100)
```
@ -83,12 +83,12 @@ ImageKnifeComponent({
```
ImageKnifeComponent({
ImageKnifeOption: {
ImageKnifeOption: new ImageKnifeOption({
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto
}
})
}).width(100).height(100)
```
@ -96,13 +96,13 @@ ImageKnifeComponent({
```
ImageKnifeComponent({
ImageKnifeOption: {
ImageKnifeOption: new ImageKnifeOption({
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Auto,
customGetImage: custom
}
})
}).width(100).height(100)
// 自定义实现图片获取方法，如自定义网络下载
@ -118,33 +118,33 @@ async function custom(context: Context, src: string | PixelMap | Resource): Prom
```
ImageKnifeComponent({
ImageKnifeOption: {
ImageKnifeOption: new ImageKnifeOption({
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
progressListener:(progress:number)=>{console.info("ImageKinfe:: call back progress = " + progress)}
}
})
}).width(100).height(100)
```
#### 6.支持option传入border，设置边框，圆角
```
ImageKnifeComponent({ ImageKnifeOption:
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
{
loadSrc: $r("app.media.rabbit"),
border: {radius:50}
}
})
}).width(100).height(100)
```
#### 7.支持option图片变换
```
ImageKnifeComponent({ ImageKnifeOption:
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
{
loadSrc: $r("app.media.rabbit"),
border: {radius:50},
transformation: new BlurTransformation(3)
}
})
}).width(100).height(100)
```
多种组合变换用法
@ -154,14 +154,14 @@ let transformations: collections.Array<PixelMapTransformation> = new collections
transformations.push(new BlurTransformation(5));
transformations.push(new BrightnessTransformation(0.2));
ImageKnifeComponent({
{
imageKnifeOption: new ImageKnifeOption({
loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain,
border: { radius: { topLeft: 50, bottomRight: 50 } }, // 圆角设置
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined // 图形变换组
}
})
}).width(300)
.height(300)
.rotate({ angle: 90 }) // 旋转90度
@ -172,12 +172,12 @@ ImageKnifeComponent({
圆形裁剪变换示例
```
ImageKnifeComponent({ ImageKnifeOption:
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
{
loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover,
border: { radius: 150 }
}
})
}).width(300)
.height(300)
```
@ -185,12 +185,12 @@ ImageKnifeComponent({ ImageKnifeOption:
圆形裁剪带边框变换示例
```
ImageKnifeComponent({ ImageKnifeOption:
ImageKnifeComponent({ ImageKnifeOption:new ImageKnifeOption(
{
loadSrc: $r('app.media.pngSample'),
objectFit: ImageFit.Cover,
border: { radius: 150, color: Color.Red, width: 5 }
}
})
}).width(300)
.height(300)
```
@ -199,9 +199,9 @@ ImageKnifeComponent({ ImageKnifeOption:
```
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: $r('app.media.pngSample')
}
})
}).width(300)
.height(300)
.contrast(12)
@ -211,9 +211,9 @@ ImageKnifeComponent({
```
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: $r('app.media.pngSample')
}
})
}).width(300)
.height(300)
.rotate({angle:90})
@ -223,7 +223,7 @@ ImageKnifeComponent({
#### 8.监听图片加载成功与失败
```
ImageKnifeComponent({ ImageKnifeOption:
ImageKnifeComponent({ ImageKnifeOption: new ImageKnifeOption(
{
loadSrc: $r("app.media.rabbit"),
onLoadListener:{
@ -242,27 +242,27 @@ ImageKnifeComponent({ ImageKnifeOption:
console.info(err)
}
}
}
})
}).width(100).height(100)
```
#### 9.ImageKnifeComponent - syncLoad
设置是否同步加载图片，默认是异步加载。建议加载尺寸较小的本地图片时将syncLoad设为true，因为耗时较短，在主线程上执行即可
```
ImageKnifeComponent({
imageKnifeOption:{
imageKnifeOption:new ImageKnifeOption({
loadSrc:$r("app.media.pngSample"),
placeholderSrc:$r("app.media.loading")
},syncLoad:true
}),syncLoad:true
})
```
#### 10.ImageKnifeAnimatorComponent 示例
```
ImageKnifeAnimatorComponent({
imageKnifeOption:{
imageKnifeOption:new ImageKnifeOption({
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
},animatorOption:this.animatorOption
}),animatorOption:this.animatorOption
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
```
## 接口说明
@ -352,7 +352,7 @@ ImageKnifeAnimatorComponent({
## 约束与限制
在下述版本验证通过：
DevEco Studio 5.0 Canary3（5.0.3.221）--SDK:API12
DevEco Studio 5.0 Canary3（5.0.3.502）--SDK:API12 (5.0.0.31)
## 贡献代码

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

@ -12,15 +12,15 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AnimatorOption, ImageKnifeAnimatorComponent } from "@ohos/libraryimageknife"
import { AnimatorOption, ImageKnifeAnimatorComponent,ImageKnifeOption } from "@ohos/libraryimageknife"
@Entry
@Component
@ComponentV2
struct ImageAnimatorPage {
@State animatorOption: AnimatorOption = {
@Local animatorOption: AnimatorOption = new AnimatorOption({
state: AnimationStatus.Running,
iterations: -1
}
})
build() {
Column(){
Flex(){
@ -44,11 +44,11 @@ struct ImageAnimatorPage {
})
}
ImageKnifeAnimatorComponent({
imageKnifeOption:{
imageKnifeOption:new ImageKnifeOption({
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
},animatorOption:this.animatorOption
}),animatorOption:this.animatorOption
}).width(300).height(300).backgroundColor(Color.Orange).margin({top:30})
}.width("100%").height("100%")
}

16
entry/src/main/ets/pages/ImageTransformation.ets
View File

@ -35,17 +35,17 @@ import {
import { collections } from '@kit.ArkTS'
@Entry
@Component
@ComponentV2
struct ImageTransformation {
@State imageKnifeOption: ImageKnifeOption = {
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain
}
@State isRound: boolean = false;
@State isContrast: boolean = false;
@State isRotate: boolean = false;
})
@Local isRound: boolean = false;
@Local isContrast: boolean = false;
@Local isRotate: boolean = false;
isBlur: boolean = false
isBrightness: boolean = false
isGrayScale: boolean = false;
@ -412,14 +412,14 @@ struct ImageTransformation {
if (this.isMask) {
transformations.push(new MaskTransformation($r('app.media.mask_starfish')));
}
this.imageKnifeOption = {
this.imageKnifeOption = new ImageKnifeOption({
loadSrc: $r('app.media.pngSample'),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain,
border: { radius: this.isRound ? { topLeft: 50, bottomRight: 50 } : 0 },
transformation: transformations.length > 0 ? new MultiTransTransformation(transformations) : undefined
}
})
if (this.isCropCircle) {
this.imageKnifeOption.objectFit = ImageFit.Cover;
this.imageKnifeOption.border = { radius: 150 };

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

@ -15,7 +15,7 @@
import router from '@system.router';
@Entry
@Component
@ComponentV2
struct Index {

4
entry/src/main/ets/pages/ListPage.ets
View File

@ -15,11 +15,11 @@
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife';
@Entry
@Component
@ComponentV2
struct ListPage {
private data: string[] = []
@State ImageKnifeOption: ImageKnifeOption = { loadSrc: $r('app.media.startIcon')}
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({ loadSrc: $r('app.media.startIcon')})
aboutToAppear(): void {

26
entry/src/main/ets/pages/LoadStatePage.ets
View File

@ -16,12 +16,12 @@ import { ImageKnifeComponent, ImageKnifeOption } from "@ohos/libraryimageknife"
import matrix4 from '@ohos.matrix4'
@Entry
@Component
@ComponentV2
struct LoadStatePage {
starTime:number = new Date().getTime()
@State ImageKnifeOption: ImageKnifeOption = {
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc: $r("app.media.rabbit"),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
@ -35,14 +35,14 @@ struct LoadStatePage {
},
},
border: { radius: 50 }
}
@State imageKnifeOption1: ImageKnifeOption = {
})
@Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
loadSrc: $r('app.media.startIcon')
}
@State message: string = ""
@State currentWidth: number = 200
@State currentHeight: number = 200
@State typeValue: string = ""
})
@Local message: string = ""
@Local currentWidth: number = 200
@Local currentHeight: number = 200
@Local typeValue: string = ""
build() {
Column() {
Text('测试失败场景请先关闭网络，并保证本地没有此网络图片的缓存')
@ -50,7 +50,7 @@ struct LoadStatePage {
Row() {
Button('测试失败/成功场景')
.onClick(() => {
this.ImageKnifeOption = {
this.ImageKnifeOption = new ImageKnifeOption({
loadSrc: "https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
@ -75,7 +75,7 @@ struct LoadStatePage {
onComplete:(event)=>{
console.error("Load onComplete width:"+event?.width , " height:"+event?.height , " componentWidth:"+event?.componentWidth," componentHeight:" + event?.componentHeight);
}
}
})
})
}
.margin({ top: 20 })
@ -83,7 +83,7 @@ struct LoadStatePage {
ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption }).height(this.currentHeight).width(this.currentWidth)
.margin({ top: 20 })
Button("自定义下载失败").onClick(()=>{
this.imageKnifeOption1 = {
this.imageKnifeOption1 = new ImageKnifeOption({
loadSrc: "abc",
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed'),
@ -93,7 +93,7 @@ struct LoadStatePage {
this.message = "err:" + err
}
}
}
})
}).margin({ top: 20 })
Text(this.message).fontSize(20).margin({ top: 20 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).height(this.currentHeight).width(this.currentWidth)

8
entry/src/main/ets/pages/LongImagePage.ets
View File

@ -12,10 +12,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry
@Component
@ComponentV2
struct LongImagePage {
build() {
@ -25,13 +25,13 @@ struct LongImagePage {
// Image($r("app.media.aaa")).objectFit(ImageFit.Auto).width(200)
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc:"https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
//src:$r("app.media.aaa"),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
objectFit: ImageFit.Auto
}
})
})
}
.height('100%') .width('100%')

8
entry/src/main/ets/pages/ManyPhotoShowPage.ets
View File

@ -12,12 +12,12 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent } from '@ohos/libraryimageknife';
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife';
@Entry
@Component
@ComponentV2
struct ManyPhotoShowPage {
private data: TestDataSource = new TestDataSource();
@ -36,7 +36,7 @@ struct ManyPhotoShowPage {
// loadSrc: item.thumbnail,
// mainScaleType: ScaleType.FIT_XY,
// } })
ImageKnifeComponent({imageKnifeOption:{
ImageKnifeComponent({imageKnifeOption:new ImageKnifeOption({
loadSrc: item.thumbnail,
//src:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
// src: this.localFile,
@ -44,7 +44,7 @@ struct ManyPhotoShowPage {
errorholderSrc:$r("app.media.failed"),
objectFit: ImageFit.Auto,
border: {radius:50}
}})
})})
}
.width(56).height(56)
//滤镜标题

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

@ -15,49 +15,49 @@
import { ImageKnife, ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry
@Component
@ComponentV2
struct ObjectFitPage {
@State imageKnifeOption: ImageKnifeOption = {
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc: $r("app.media.app_icon"),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Fill
}
})
build() {
Column() {
Button("主图Fill拉伸填充").onClick(()=>{
this.imageKnifeOption = {
this.imageKnifeOption = new ImageKnifeOption({
loadSrc: $r("app.media.app_icon"),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Fill
}
})
})
Button("占位图Contain保持比例填充").margin({top:10}).onClick(async () => {
ImageKnife.getInstance().removeAllMemoryCache()
await ImageKnife.getInstance().removeAllFileCache()
this.imageKnifeOption = {
this.imageKnifeOption = new ImageKnifeOption({
loadSrc: "https://wx2.sinaimg.cn/mw690/006HyQKGgy1hnqp08dw09j30u04twu0x.jpg",
placeholderSrc: $r("app.media.app_icon"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Fill,
placeholderObjectFit: ImageFit.Contain
}
})
})
Button("错误图None不变化").margin({top:10}).onClick(() => {
this.imageKnifeOption = {
this.imageKnifeOption = new ImageKnifeOption({
loadSrc: "http://xxxxx",
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Fill,
errorholderObjectFit: ImageFit.None
}
})
})
ImageKnifeComponent({

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

@ -16,18 +16,18 @@ import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife';
@Entry
@Component
@ComponentV2
struct SignatureTestPage {
@State imageKnifeOption1: ImageKnifeOption =
@Local imageKnifeOption1: ImageKnifeOption =new ImageKnifeOption(
{
loadSrc: $r('app.media.icon'),
placeholderSrc:$r("app.media.loading"),
};
@State imageKnifeOption2: ImageKnifeOption =
});
@Local imageKnifeOption2: ImageKnifeOption =new ImageKnifeOption(
{
loadSrc: $r('app.media.icon'),
placeholderSrc:$r("app.media.loading"),
};
});
build() {
Scroll() {
@ -37,11 +37,11 @@ struct SignatureTestPage {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("加载")
.onClick(() => {
this.imageKnifeOption1 = {
this.imageKnifeOption1 = new ImageKnifeOption({
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
placeholderSrc:$r("app.media.loading"),
signature: "1"
}
})
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
}.width('100%').backgroundColor(Color.Pink)
@ -50,11 +50,11 @@ struct SignatureTestPage {
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Button("加载")
.onClick(() => {
this.imageKnifeOption2 = {
this.imageKnifeOption2 = new ImageKnifeOption({
loadSrc: 'https://img-blog.csdn.net/20140514114029140',
placeholderSrc:$r("app.media.loading"),
signature: new Date().getTime().toString()
}
})
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
}.width('100%').backgroundColor(Color.Pink)

28
entry/src/main/ets/pages/SingleImage.ets
View File

@ -12,19 +12,19 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent,BlurTransformation } from '@ohos/libraryimageknife';
import { ImageKnifeComponent,BlurTransformation,ImageKnifeOption } from '@ohos/libraryimageknife';
import fs from '@ohos.file.fs';
import image from '@ohos.multimedia.image';
import { common2D, drawing } from '@kit.ArkGraphics2D';
@Entry
@Component
@ComponentV2
struct SingleImage {
resource: string = "app.media.svgSample"
scroller: Scroller = new Scroller;
localFile: string = getContext(this).filesDir + "/icon.png"
@State pixelMap:PixelMap | undefined = undefined;
@State DrawingColorFilter: ColorFilter | undefined = undefined
@Local pixelMap:PixelMap | undefined = undefined;
@Local DrawingColorFilter: ColorFilter | undefined = undefined
private color: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 };
aboutToAppear(): void {
// 拷贝本地文件
@ -46,12 +46,12 @@ struct SingleImage {
.fontSize(30)
.fontWeight(FontWeight.Bold)
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: $r("app.media.svgSample"),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
objectFit: ImageFit.Contain
}
})
}).width(100).height(100)
.onClick(()=>{
this.DrawingColorFilter = drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
@ -60,48 +60,48 @@ struct SingleImage {
.fontSize(30)
.fontWeight(FontWeight.Bold)
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: this.localFile,
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
objectFit: ImageFit.Contain
}
})
}).width(100).height(100)
Text("网络图片")
.fontSize(30)
.fontWeight(FontWeight.Bold)
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc:"https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png",
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
objectFit: ImageFit.Contain,
progressListener:(progress:number)=>{console.info("ImageKnife:: call back progress = " + progress)}
}
})
}).width(100).height(100)
Text("自定义下载")
.fontSize(30)
.fontWeight(FontWeight.Bold)
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: "https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg",
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
objectFit: ImageFit.Contain,
customGetImage: custom,
transformation: new BlurTransformation(10)
}
})
}).width(100).height(100)
Text("pixelMap加载图片")
.fontSize(30)
.fontWeight(FontWeight.Bold)
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: this.pixelMap!,
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
objectFit: ImageFit.Contain,
}
})
}).width(100).height(100)
}
.width('100%')

8
entry/src/main/ets/pages/TestCommonImage.ets
View File

@ -12,10 +12,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent } from '@ohos/libraryimageknife';
import { ImageKnifeComponent ,ImageKnifeOption} from '@ohos/libraryimageknife';
@Entry
@Component
@ComponentV2
struct TestCommonImage {
private data: Array<string> = []
aboutToAppear(): void {
@ -30,13 +30,13 @@ struct TestCommonImage {
FlowItem() {
Column(){
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: item,
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.failed"),
objectFit: ImageFit.Contain,
signature: "aaa"
}
})
}).width("50%").height(200)
}
}.height(200)

16
entry/src/main/ets/pages/TestErrorHolderPage.ets
View File

@ -12,34 +12,34 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry
@Component
@ComponentV2
struct TestErrorHolderPage {
build() {
Column() {
Text("ImageKnifeComponent1").fontSize(20)
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: "abc",
errorholderSrc:$r('app.media.failed')
}
})
}).width(200).height(200)
Text("ImageKnifeComponent2").fontSize(20)
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: "abc",
errorholderSrc:$r('app.media.startIcon')
}
})
}).width(200).height(200)
Text("ImageKnifeComponent2").fontSize(20)
ImageKnifeComponent({
imageKnifeOption: {
imageKnifeOption: new ImageKnifeOption({
loadSrc: "abc",
errorholderSrc:$r('app.media.mask_starfish')
}
})
}).width(200).height(200)
}
.height('100%') .width('100%')

6
entry/src/main/ets/pages/TestHeader.ets
View File

@ -15,9 +15,9 @@
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry
@Component
@ComponentV2
struct TestPrefetchToFileCachePage {
@State imageKnifeOption: ImageKnifeOption = {
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc:"https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658",
placeholderSrc:$r('app.media.loading'),
headerOption:[
@ -26,7 +26,7 @@ struct TestPrefetchToFileCachePage {
value:"单个"
}
]
}
})
build() {
Column() {

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

@ -15,7 +15,7 @@
import { IndexComponent } from "@ohos/libraryimageknife"
@Entry
@Component
@ComponentV2
struct TestHspPreLoadImage {
build() {
Column() {

28
entry/src/main/ets/pages/TestImageFlash.ets
View File

@ -12,9 +12,9 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { ImageKnifeComponent } from '@ohos/libraryimageknife'
import { ImageKnifeComponent,ImageKnifeOption } from '@ohos/libraryimageknife'
@Observed
@ObservedV2
export class MsgModel {
id: string
cId: string
@ -30,10 +30,10 @@ export class MsgModel {
}
@Reusable
@Component
// @Reusable
@ComponentV2
export struct MsgItem {
count: number = 0
@Param count: number = 0
private data: Array<string> = [
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
@ -59,37 +59,37 @@ export struct MsgItem {
build(){
if (this.count % 2 == 0 && this.count <6){
ImageKnifeComponent({
imageKnifeOption:{
imageKnifeOption:new ImageKnifeOption({
loadSrc:$r("app.media.startIcon"),
placeholderSrc:$r("app.media.loading")
},syncLoad:true
}),syncLoad:true
})
}else if (this.count > 6 && this.count - 6 < this.data.length){
ImageKnifeComponent({
imageKnifeOption:{
imageKnifeOption:new ImageKnifeOption({
loadSrc:this.data[this.count - 6],
placeholderSrc:$r("app.media.loading")
},syncLoad:true
}),syncLoad:true
})
}else {
ImageKnifeComponent({
imageKnifeOption:{
imageKnifeOption:new ImageKnifeOption({
loadSrc:$r("app.media.pngSample"),
placeholderSrc:$r("app.media.loading")
},syncLoad:true
}),syncLoad:true
})
}
}
}
@Entry
@Component
@ComponentV2
struct ImageTestPage {
count : number = 0
rCount: number = 0
scroller: Scroller = new Scroller()
@State list: MsgModel[] = []
@State imageSize: number =100
@Local list: MsgModel[] = []
@Local imageSize: number =100
handAdd(){
this.count++
const msgItem = new MsgModel('add_id'+this.count, 'addBody'+this.count,'cId'+ this.count)

10
entry/src/main/ets/pages/TestIsUrlExist.ets
View File

@ -15,15 +15,15 @@
import { ImageKnifeComponent, ImageKnife, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife'
@Entry
@Component
@ComponentV2
struct TestIsUrlExist {
@State imageKnifeOption: ImageKnifeOption = {
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc: $r('app.media.startIcon'),
placeholderSrc: $r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
}
@State source: PixelMap | string | Resource = $r("app.media.startIcon")
@State source1: PixelMap | string | Resource = $r("app.media.startIcon")
})
@Local source: PixelMap | string | Resource = $r("app.media.startIcon")
@Local source1: PixelMap | string | Resource = $r("app.media.startIcon")
build() {
Column() {

8
entry/src/main/ets/pages/TestPrefetchToFileCache.ets
View File

@ -15,19 +15,19 @@
import { ImageKnifeComponent,ImageKnife,ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry
@Component
@ComponentV2
struct TestPrefetchToFileCachePage {
@State imageKnifeOption: ImageKnifeOption = {
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc:$r('app.media.startIcon'),
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
}
})
async preload(url:string) {
let fileCachePath = await ImageKnife.getInstance().preLoadCache(url)
console.log("preload-fileCachePath=="+ fileCachePath)
}
async preload1(url:string) {
let fileCachePath = await ImageKnife.getInstance().preLoadCache({ loadSrc: url })
let fileCachePath = await ImageKnife.getInstance().preLoadCache(new ImageKnifeOption({ loadSrc: url }))
console.log("preload-fileCachePath1=="+ fileCachePath)
}
build() {

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

@ -15,16 +15,16 @@
import { ImageKnifeComponent, ImageKnife, ImageKnifeOption, CacheStrategy } from '@ohos/libraryimageknife'
@Entry
@Component
@ComponentV2
struct TestRemoveCache {
@State imageKnifeOption: ImageKnifeOption = {
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc: $r('app.media.startIcon'),
placeholderSrc: $r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
}
@State source: PixelMap | string | Resource = $r("app.media.startIcon");
@State source1: PixelMap | string | Resource = $r("app.media.startIcon");
@State url: string = '';
})
@Local source: PixelMap | string | Resource = $r("app.media.startIcon");
@Local source1: PixelMap | string | Resource = $r("app.media.startIcon");
@Local url: string = '';
build() {
Column() {

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

@ -15,12 +15,12 @@
import { ImageKnifeComponent, ImageKnife, ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry
@Component
@ComponentV2
struct TestSetCustomImagePage {
@State imageKnifeOption: ImageKnifeOption = {
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc: $r('app.media.startIcon'),
placeholderSrc: $r('app.media.loading')
}
})
aboutToAppear(): void {
ImageKnife.getInstance().setCustomGetImage(custom)
}
@ -30,22 +30,22 @@ struct TestSetCustomImagePage {
build() {
Column() {
Button("自定义下载a").onClick(()=>{
this.imageKnifeOption = {
this.imageKnifeOption = new ImageKnifeOption({
loadSrc: "aaa",
placeholderSrc: $r('app.media.loading')
}
})
})
Button("自定义下载b").onClick(()=>{
this.imageKnifeOption = {
this.imageKnifeOption = new ImageKnifeOption({
loadSrc: "bbb",
placeholderSrc: $r('app.media.loading')
}
})
})
Button("自定义下载c").onClick(()=>{
this.imageKnifeOption = {
this.imageKnifeOption = new ImageKnifeOption({
loadSrc: "ccc",
placeholderSrc: $r('app.media.loading')
}
})
})
ImageKnifeComponent({
imageKnifeOption: this.imageKnifeOption

26
entry/src/main/ets/pages/TestWriteCacheStage.ets
View File

@ -15,55 +15,55 @@
import { ImageKnifeComponent,CacheStrategy,ImageKnifeOption } from '@ohos/libraryimageknife'
@Entry
@Component
@ComponentV2
struct TestWriteCacheStage {
@State imageKnifeOption1: ImageKnifeOption = {
@Local imageKnifeOption1: ImageKnifeOption = new ImageKnifeOption({
loadSrc:$r('app.media.startIcon'),
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
}
@State imageKnifeOption2: ImageKnifeOption = {
})
@Local imageKnifeOption2: ImageKnifeOption = new ImageKnifeOption({
loadSrc:$r('app.media.startIcon'),
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
}
@State imageKnifeOption3: ImageKnifeOption = {
})
@Local imageKnifeOption3: ImageKnifeOption = new ImageKnifeOption({
loadSrc:$r('app.media.startIcon'),
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed')
}
})
build() {
Column() {
Button("写入内存文件缓存").margin({top:10}).onClick(async ()=>{
this.imageKnifeOption1 = {
this.imageKnifeOption1 = new ImageKnifeOption({
loadSrc:'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed'),
writeCacheStrategy:CacheStrategy.Default
}
})
})
ImageKnifeComponent({
imageKnifeOption: this.imageKnifeOption1
}).width(200).height(200).margin({top:10})
Button("写入内存缓存").margin({top:10}).onClick(async ()=>{
this.imageKnifeOption2 = {
this.imageKnifeOption2 = new ImageKnifeOption({
loadSrc:"https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed'),
writeCacheStrategy:CacheStrategy.Memory
}
})
})
ImageKnifeComponent({
imageKnifeOption: this.imageKnifeOption2
}).width(200).height(200).margin({top:10})
Button("写入文件缓存").margin({top:10}).onClick(async ()=>{
this.imageKnifeOption3 = {
this.imageKnifeOption3 = new ImageKnifeOption({
loadSrc:'https://img-blog.csdn.net/20140514114029140',
placeholderSrc:$r('app.media.loading'),
errorholderSrc:$r('app.media.failed'),
writeCacheStrategy:CacheStrategy.File
}
})
})
ImageKnifeComponent({
imageKnifeOption: this.imageKnifeOption3

8
entry/src/main/ets/pages/TransformPage.ets
View File

@ -17,17 +17,17 @@ import matrix4 from '@ohos.matrix4'
@Entry
@Component
@ComponentV2
struct TransformPage {
private custom_scale:number = 1
@State matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
@State ImageKnifeOption: ImageKnifeOption = {
@Local matrix1:object = matrix4.identity().scale({ x: 1, y: 1 })
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc: $r("app.media.rabbit"),
placeholderSrc: $r("app.media.loading"),
errorholderSrc: $r("app.media.app_icon"),
objectFit: ImageFit.Contain,
border: { radius: 50 }
}
})
build() {
Column() {

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

@ -15,24 +15,50 @@
import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/libraryimageknife'
// const logger = new imUtils.logger.IMLogger('Avatar')
class MyImageOption extends ImageKnifeOption {
account?: string
@ObservedV2
export class MyStorage {
static instance:MyStorage | undefined = undefined
static getInstance(){
if(MyStorage.instance == undefined) {
MyStorage.instance = new MyStorage()
}
return MyStorage.instance
}
@Trace WeLink_Mob_fontSize_multiple: number = 1
}
@Component
@ComponentV2
export struct UserAvatar {
@Prop @Watch('userInfoUpdate') userInfo: string = ""
// @Prop userInfo: string = ""
imgSize: number = 100
radius: number = 12
borderSize: number = 0
imgSizes: number = 1
@State ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
@StorageProp('WeLink_Mob_fontSize_multiple') @Watch('updateImgSize') WeLink_Mob_fontSize_multiple: number = 0
@Local ImageKnifeOption: ImageKnifeOption = new ImageKnifeOption()
scalable: boolean = true;
@State calcImgSize: number = 100
@Local calcImgSize: number = 100
@Param userInfo: string = ""
@Monitor('userInfo')
userInfoUpdate() {
// if (uri === 'userInfo' && this.imageKnifeOption.account !== this.userInfo.contactId) return;
// // logger.info(`userInfoUpdate uri=${uri} oldAcc=${this.imageKnifeOption.loadSrc} nowAcc=${this.userInfo.externalHeadUrl}`)
// if (this.userInfo.externalHeadUrl === this.imageKnifeOption.loadSrc && this.userInfo.infoUpdateTime.getTime()
// .toString() === this.imageKnifeOption?.signature?.getKey()) return;
this.ImageKnifeOption = new ImageKnifeOption({
//TODO:写死loadSRC，场景：变更组件大小，所有图片不显示
loadSrc: this.userInfo,
placeholderSrc: $r('app.media.loading'),
errorholderSrc: $r('app.media.failed'),
border: { radius:20,width:5,color:$r('app.color.start_window_background') },
objectFit:ImageFit.Contain
// signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString())
})
}
@Local storage: MyStorage = MyStorage.getInstance()
@Monitor('storage.WeLink_Mob_fontSize_multiple')
updateImgSize() {
this.setImageSize()
}
aboutToAppear(): void {
this.userInfoUpdate()
this.setImageSize()
@ -41,39 +67,19 @@ export struct UserAvatar {
setImageSize() {
if (!this.scalable) {
this.calcImgSize = this.imgSize
} else if (this.WeLink_Mob_fontSize_multiple < 0.9) {
} else if (this.storage.WeLink_Mob_fontSize_multiple < 0.9) {
this.calcImgSize = this.imgSize * 0.9
} else if (this.WeLink_Mob_fontSize_multiple > 1.6) {
} else if (this.storage.WeLink_Mob_fontSize_multiple > 1.6) {
this.calcImgSize = this.imgSize * 1.6
} else {
this.calcImgSize = this.imgSize * this.WeLink_Mob_fontSize_multiple
this.calcImgSize = this.imgSize * this.storage.WeLink_Mob_fontSize_multiple
}
}
updateImgSize() {
this.setImageSize()
}
aboutToReuse(param: ESObject) {
this.userInfoUpdate()
}
userInfoUpdate() {
// if (uri === 'userInfo' && this.imageKnifeOption.account !== this.userInfo.contactId) return;
// // logger.info(`userInfoUpdate uri=${uri} oldAcc=${this.imageKnifeOption.loadSrc} nowAcc=${this.userInfo.externalHeadUrl}`)
// if (this.userInfo.externalHeadUrl === this.imageKnifeOption.loadSrc && this.userInfo.infoUpdateTime.getTime()
// .toString() === this.imageKnifeOption?.signature?.getKey()) return;
this.ImageKnifeOption = {
//TODO:写死loadSRC，场景：变更组件大小，所有图片不显示
loadSrc: this.userInfo,
placeholderSrc: $r('app.media.loading'),
errorholderSrc: $r('app.media.failed'),
border: { radius:20,width:5,color:$r('app.color.start_window_background') },
objectFit:ImageFit.Contain
// signature: new ObjectKey(this.userInfo.infoUpdateTime.getTime().toString())
}
}
build() {
Row() {
// Image(this.imageKnifeOption.loadSrc)

48
entry/src/main/ets/pages/UserPage.ets
View File

@ -12,7 +12,7 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { UserAvatar } from './User'
import { MyStorage, UserAvatar } from './User'
class CommonDataSource <T> implements IDataSource {
private dataArray: T[] = []
@ -55,9 +55,9 @@ class CommonDataSource <T> implements IDataSource {
}
}
@Entry
@Component
@ComponentV2
struct Index {
@State hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
@Local hotCommendList:CommonDataSource<string> = new CommonDataSource<string>([])
private data:string[] = [
"http://e.hiphotos.baidu.com/image/pic/item/a1ec08fa513d2697e542494057fbb2fb4316d81e.jpg",
"http://c.hiphotos.baidu.com/image/pic/item/30adcbef76094b36de8a2fe5a1cc7cd98d109d99.jpg",
@ -85,25 +85,41 @@ struct Index {
'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp',
]
aboutToAppear(): void {
this.hotCommendList.addData(this.hotCommendList.totalCount(),this.data)
AppStorage.set("WeLink_Mob_fontSize_multiple",1)
MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1
}
build() {
Column() {
Button("bigger").onClick(()=>{
AppStorage.set("WeLink_Mob_fontSize_multiple",1.6)
MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 1.6
})
Button("small").onClick(()=>{
AppStorage.set("WeLink_Mob_fontSize_multiple",0.8)
MyStorage.getInstance().WeLink_Mob_fontSize_multiple = 0.8
})
List(){
LazyForEach(this.hotCommendList,(item:string)=>{
// LazyForEach(this.hotCommendList,(item:string)=>{
// ListItem(){
// ReuseImage({
// userInfo:item
// }).width("100%").height("100%").backgroundColor(Color.Yellow)
// }.width(200).height(200).margin({bottom:5})
// })
Repeat(this.data)
.each((repeatItem)=>{
ListItem(){
ReuseImage({
userInfo:item
userInfo:repeatItem.item
}).width("100%").height("100%").backgroundColor(Color.Yellow)
}.width(200).height(200).margin({bottom:5})
}.width(200).height(200).margin({bottom:5}).key("reuse")
})
.key(item => item+"reuse")
.virtualScroll()
.template("1",(repeatItem)=>{
ListItem(){
ReuseImage({
userInfo:repeatItem.item
}).width("100%").height("100%").backgroundColor(Color.Yellow)
}.width(200).height(200).margin({bottom:5}).key("reuse")
})
}
// .cachedCount(20)
@ -115,13 +131,13 @@ struct Index {
}
@Reusable
@Component
// @Reusable
@ComponentV2
struct ReuseImage {
@State userInfo:string = ""
aboutToReuse(params: ESObject): void {
this.userInfo = params.userInfo
}
@Param userInfo:string = ""
// aboutToReuse(params: ESObject): void {
// this.userInfo = params.userInfo
// }
build() {
Column(){

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

@ -18,15 +18,15 @@ import { photoAccessHelper } from '@kit.MediaLibraryKit';
@Entry
@Component
@ComponentV2
struct DataShareUriLoadPage {
@State imageKnifeOption1: ImageKnifeOption =
{
@Local imageKnifeOption1: ImageKnifeOption =
new ImageKnifeOption({
loadSrc: $r('app.media.icon'),
placeholderSrc: $r('app.media.loading'),
errorholderSrc: $r('app.media.failed')
};
});
build() {
@ -43,10 +43,10 @@ struct DataShareUriLoadPage {
let photoViewPicker = new photoAccessHelper.PhotoViewPicker();
let photoSelectResult: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
uris = photoSelectResult.photoUris;
this.imageKnifeOption1 = {
this.imageKnifeOption1 = new ImageKnifeOption({
loadSrc: uris[0],
placeholderSrc:$r('app.media.loading')
}
})
}).margin({ top: 5, left: 3 })
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(300).height(300)
}.width('100%').backgroundColor(Color.Pink)

494
entry/src/main/ets/pages/transformsPage.ets
View File

@ -1,494 +0,0 @@
/*
* Copyright (C) 2024 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,
ImageKnifeOption,
RotateImageTransformation,
SketchFilterTransformation,
CropCircleTransformation,
ToonFilterTransform,
VignetteFilterTransform,
BaseTransform,
BlurTransformation,
BrightnessFilterTransformation,
InvertFilterTransformation,
CropCircleWithBorderTransformation,
CropSquareTransformation,
CropTransformation,
CropType,
ContrastFilterTransformation,
PixelationFilterTransformation,
RoundedCornersTransformation,
SepiaFilterTransformation,
MaskTransformation,
SwirlFilterTransformation,
KuwaharaFilterTransform
} from '@ohos/libraryimageknife'
@Entry
@Component
struct transformsPage {
@State imageKnifeOption: ImageKnifeOption =
{
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed')
};
@State option1: ImageKnifeOption = {
loadSrc: $r('app.media.pngSample'),
}
@State option2: ImageKnifeOption = {
loadSrc: $r('app.media.pngSample'),
}
private transformations: Array<BaseTransform<PixelMap>> = new Array();
private blurTransformation: BlurTransformation = new BlurTransformation(15, 3);
private brightnessFilterTransformation: BrightnessFilterTransformation = new BrightnessFilterTransformation(0.5);
private contrastFilterTransformation: ContrastFilterTransformation = new ContrastFilterTransformation(2.0);
private cropCircleTransformation: CropCircleTransformation = new CropCircleTransformation();
private cropCircleWithBorderTransformation: CropCircleWithBorderTransformation =
new CropCircleWithBorderTransformation(16, { r_color: 100, g_color: 100, b_color: 100 });
private cropSquareTransformation: CropSquareTransformation = new CropSquareTransformation();
private cropTransformation: CropTransformation = new CropTransformation(100, 100, CropType.CENTER);
private grayscaleTransformation: GrayscaleTransformation = new GrayscaleTransformation();
private invertFilterTransformation: InvertFilterTransformation = new InvertFilterTransformation();
private pixelationFilterTransformation: PixelationFilterTransformation = new PixelationFilterTransformation(5.0);
private rotateImageTransformation: RotateImageTransformation = new RotateImageTransformation(90);
private roundedCornersTransformation: RoundedCornersTransformation = new RoundedCornersTransformation({
top_left: 5,
bottom_left: 5,
top_right: 5,
bottom_right: 5
});
private sepiaFilterTransformation: SepiaFilterTransformation = new SepiaFilterTransformation();
private sketchFilterTransformation: SketchFilterTransformation = new SketchFilterTransformation();
private maskTransformation: MaskTransformation = new MaskTransformation($r('app.media.mask_starfish'));
private swirlFilterTransformation: SwirlFilterTransformation = new SwirlFilterTransformation(80);
private kuwaharaFilterTransform: KuwaharaFilterTransform = new KuwaharaFilterTransform(10);
private toonFilterTransform: ToonFilterTransform = new ToonFilterTransform(0.3, 10.0);
private vignetteFilterTransform: VignetteFilterTransform = new VignetteFilterTransform([0.5, 0.5], [0.0, 0.0, 0.0], [0.3, 0.75]);
build() {
Scroll() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '模糊' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.blurTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.blurTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('模糊变换').margin({ left: 16 })
}.margin({ left: 16 })
Row() {
Checkbox({ name: '亮度滤波' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.brightnessFilterTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.brightnessFilterTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('亮度滤波').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '对比度' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.contrastFilterTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.contrastFilterTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('对比度').margin({ left: 16 })
}.margin({ left: 16 })
Row() {
Checkbox({ name: '圆形裁剪' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.cropCircleTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.cropCircleTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('圆形裁剪').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '圆环' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.cropCircleWithBorderTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.cropCircleWithBorderTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('圆环').margin({ left: 16 })
}.margin({ left: 16 })
Row() {
Checkbox({ name: '正方形裁剪' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.cropSquareTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.cropSquareTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('正方形裁剪').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '自定义矩形' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.cropTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.cropTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('自定义矩形').margin({ left: 16 })
}.margin({ left: 16 })
Row() {
Checkbox({ name: '灰度' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.grayscaleTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.grayscaleTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('灰度').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '反转' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.invertFilterTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.invertFilterTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('反转').margin({ left: 16 })
}.margin({ left: 16 })
Row() {
Checkbox({ name: '像素化' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.pixelationFilterTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.pixelationFilterTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('像素化').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '旋转' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.rotateImageTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.rotateImageTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('旋转').margin({ left: 16 })
}.margin({ left: 16 })
Row() {
Checkbox({ name: '圆角' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.roundedCornersTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.roundedCornersTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('圆角').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '乌墨色滤波' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.sepiaFilterTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.sepiaFilterTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('乌墨色滤波').margin({ left: 16 })
}.margin({ left: 16 })
Row() {
Checkbox({ name: '素描' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.sketchFilterTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.sketchFilterTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('素描').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '遮罩' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.maskTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.maskTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('遮罩').margin({ left: 16 })
}.margin({ left: 16 })
Row() {
Checkbox({ name: '扭曲滤波' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.swirlFilterTransformation);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.swirlFilterTransformation.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('扭曲滤波').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '桑原滤波' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.kuwaharaFilterTransform);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.kuwaharaFilterTransform.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('桑原滤波').margin({ left: 16 })
}.margin({ left: 16 })
Row() {
Checkbox({ name: '动画滤波' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.toonFilterTransform);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.toonFilterTransform.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('动画滤波').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Flex({ direction: FlexDirection.Row }) {
Row() {
Checkbox({ name: '装饰滤波' })
.width(32)
.height(32)
.onChange((value: boolean) => {
if (value) {
this.transformations.push(this.vignetteFilterTransform);
} else {
for (let index = 0; index < this.transformations.length; index++) {
if (this.transformations[index].getClassName() == this.vignetteFilterTransform.getClassName()) {
this.transformations.splice(index, 1);
}
}
}
})
Text('装饰滤波').margin({ left: 16 })
}.margin({ left: 16 })
}.margin({ top: 32, left: 16 })
Button("显示效果").onClick(() => {
this.imageKnifeOption = {
loadSrc: $r('app.media.jpgSample'),
placeholderSrc: $r('app.media.icon_loading'),
errorholderSrc: $r('app.media.icon_failed'),
enableGpu: true,
transformations: this.transformations
};
}).margin({ left: 5 }).backgroundColor(Color.Blue)
Text("下面为展示图片区域").margin({ top: 5 })
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption }).width(300).height(300)
}.width(400).height(400).margin({ top: 10 }).backgroundColor(Color.Pink)
Button("同资源不同转换效果").onClick(() => {
this.option1 = {
loadSrc: $r('app.media.pngSample'),
errorholderSrc: $r("app.media.app_icon"),
transformation: new CropCircleTransformation()
}
this.option2 = {
loadSrc: $r('app.media.pngSample'),
errorholderSrc: $r("app.media.app_icon"),
transformations: [new RotateImageTransformation(45), new InvertFilterTransformation()]
}
}).margin(10).backgroundColor(Color.Blue)
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
ImageKnifeComponent({
imageKnifeOption: this.option1
}).width(300)
.height(300)
.margin(10)
.borderWidth(3)
ImageKnifeComponent({
imageKnifeOption: this.option2
}).width(300)
.height(300)
.margin(10)
.borderWidth(3)
}
}
}
.width('100%')
.height('100%')
}
}

10
library/src/main/ets/ImageKnife.ets
View File

@ -191,10 +191,10 @@ export class ImageKnife {
*/
getCacheImage(loadSrc: string,
cacheType: CacheStrategy = CacheStrategy.Default, signature?: string): Promise<ImageKnifeData | undefined> {
let option: ImageKnifeOption = {
let option: ImageKnifeOption = new ImageKnifeOption({
loadSrc: loadSrc,
signature:signature
}
})
let engineKeyImpl: IEngineKey = this.getEngineKeyImpl();
return new Promise((resolve, reject) => {
@ -218,7 +218,7 @@ export class ImageKnife {
*/
putCacheImage(url: string, pixelMap: PixelMap, cacheType: CacheStrategy = CacheStrategy.Default, signature?: string) {
let memoryKey = this.getEngineKeyImpl()
.generateMemoryKey(url, ImageKnifeRequestSource.SRC, { loadSrc: url, signature: signature });
.generateMemoryKey(url, ImageKnifeRequestSource.SRC, new ImageKnifeOption({ loadSrc: url, signature: signature }));
let fileKey = this.getEngineKeyImpl().generateFileKey(url, signature);
let imageKnifeData: ImageKnifeData = { source: pixelMap, imageWidth: 0, imageHeight: 0 };
switch (cacheType) {
@ -252,9 +252,9 @@ export class ImageKnife {
if (url instanceof ImageKnifeOption) {
imageKnifeOption = url;
} else {
imageKnifeOption = {
imageKnifeOption = new ImageKnifeOption({
loadSrc: url
};
});
}
let key = this.getEngineKeyImpl().generateFileKey(imageKnifeOption.loadSrc, imageKnifeOption.signature);
if (this.fileCache !== undefined) {

95
library/src/main/ets/ImageKnifeOption.ets
View File

@ -22,28 +22,36 @@ export interface HeaderOptions {
key: string;
value: Object;
}
@Observed
export class AnimatorOption {
@Track
state?: AnimationStatus = AnimationStatus.Running
@Track
iterations?: number = -1
@Track
reverse?: boolean = false
interface AnimatorType {
state?: AnimationStatus
iterations?: number
reverse?: boolean
}
@ObservedV2
export class AnimatorOption {
@Trace
state?: AnimationStatus = AnimationStatus.Running
@Trace
iterations?: number = -1
@Trace
reverse?: boolean = false
@Observed
export class ImageKnifeOption {
constructor(option?:AnimatorType) {
this.state = option?.state
this.iterations = option?.iterations
this.reverse = option?.reverse
}
}
interface ImageOption {
// 主图资源
loadSrc: string | PixelMap | Resource = "";
loadSrc: string | PixelMap | Resource
// 占位图
placeholderSrc?: string | PixelMap | Resource;
placeholderSrc?: string | PixelMap | Resource
// 失败占位图
errorholderSrc?: string | PixelMap | Resource;
errorholderSrc?: string | PixelMap | Resource
headerOption?: Array<HeaderOptions>;
// 自定义缓存关键字
signature?: string;
signature?: string
// 主图填充效果
objectFit?: ImageFit
// 占位图填充效果
@ -55,16 +63,65 @@ export class ImageKnifeOption {
// 缓存策略
writeCacheStrategy?: CacheStrategy
// 仅使用缓存加载数据
onlyRetrieveFromCache?: boolean = false;
priority?: taskpool.Priority = taskpool.Priority.LOW
onlyRetrieveFromCache?: boolean;
priority?: taskpool.Priority
context?: common.UIAbilityContext;
progressListener?: (progress: number) => void;
transformation?: PixelMapTransformation
onLoadListener?: OnLoadCallBack | undefined;
onComplete?:(event:EventImage | undefined) => void
drawingColorFilter?: ColorFilter | drawing.ColorFilter
constructor() {
}
@ObservedV2
export class ImageKnifeOption {
// 主图资源
@Trace loadSrc: string | PixelMap | Resource = "";
// 占位图
placeholderSrc?: string | PixelMap | Resource;
// 失败占位图
errorholderSrc?: string | PixelMap | Resource;
headerOption?: Array<HeaderOptions>;
// 自定义缓存关键字
@Trace signature?: string;
// 主图填充效果
@Trace objectFit?: ImageFit
// 占位图填充效果
placeholderObjectFit?: ImageFit
// 错误图填充效果
errorholderObjectFit?: ImageFit
customGetImage?: (context: Context, src: string | PixelMap | Resource) => Promise<ArrayBuffer | undefined>
@Trace border?: BorderOptions
// 缓存策略
writeCacheStrategy?: CacheStrategy
// 仅使用缓存加载数据
onlyRetrieveFromCache?: boolean = false;
priority?: taskpool.Priority = taskpool.Priority.LOW
context?: common.UIAbilityContext;
progressListener?: (progress: number) => void;
@Trace transformation?: PixelMapTransformation
onLoadListener?: OnLoadCallBack | undefined;
onComplete?:(event:EventImage | undefined) => void
drawingColorFilter?: ColorFilter | drawing.ColorFilter
constructor(option?:ImageOption) {
this.loadSrc = option?.loadSrc == undefined ? "" : option?.loadSrc
this.placeholderSrc = option?.placeholderSrc
this.errorholderSrc = option?.errorholderSrc
this.headerOption = option?.headerOption
this.signature = option?.signature
this.objectFit = option?.objectFit
this.placeholderObjectFit = option?.placeholderObjectFit
this.errorholderObjectFit = option?.errorholderObjectFit
this.customGetImage = option?.customGetImage
this.border = option?.border
this.writeCacheStrategy = option?.writeCacheStrategy
this.onlyRetrieveFromCache = option?.onlyRetrieveFromCache
this.priority = option?.priority
this.context = option?.context
this.progressListener = option?.progressListener
this.transformation = option?.transformation
this.onLoadListener = option?.onLoadListener
this.onComplete = option?.onComplete
this.drawingColorFilter = option?.drawingColorFilter
}
}

36
library/src/main/ets/components/ImageKnifeAnimatorComponent.ets
View File

@ -19,15 +19,14 @@ import { ImageKnife } from '../ImageKnife';
import { LogUtil } from '../utils/LogUtil';
import { ImageKnifeRequestSource } from '../model/ImageKnifeData';
@Component
@ComponentV2
export struct ImageKnifeAnimatorComponent {
@Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
@State animatorOption: AnimatorOption = new AnimatorOption();
@State pixelMap: PixelMap | string | undefined = undefined
@State imageAnimator: Array<ImageFrameInfo> | undefined = undefined
@State adaptiveWidth: Length = '100%'
@State adaptiveHeight: Length = '100%'
@State objectFit: ImageFit = ImageFit.Contain
@Param animatorOption: AnimatorOption = new AnimatorOption();
@Local pixelMap: PixelMap | string | undefined = undefined
@Local imageAnimator: Array<ImageFrameInfo> | undefined = undefined
@Local adaptiveWidth: Length = '100%'
@Local adaptiveHeight: Length = '100%'
@Local objectFit: ImageFit = ImageFit.Contain
private request: ImageKnifeRequest | undefined
private lastWidth: number = 0
private lastHeight: number = 0
@ -35,7 +34,17 @@ export struct ImageKnifeAnimatorComponent {
private currentHeight: number = 0
private componentVersion: number = 0
private currentContext: common.UIAbilityContext | undefined = undefined
@Param imageKnifeOption: ImageKnifeOption = new ImageKnifeOption();
@Monitor('imageKnifeOption',
"imageKnifeOption.loadSrc","imageKnifeOption.signature","imageKnifeOption.transformation","imageKnifeOption.border","imageKnifeOption.objectFit")
watchImageKnifeOption() {
if (this.request !== undefined) {
this.request.requestState = ImageKnifeRequestState.DESTROY
}
this.request = undefined
this.componentVersion++
ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
}
aboutToAppear(): void {
this.objectFit = this.imageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.imageKnifeOption.objectFit
}
@ -81,15 +90,6 @@ export struct ImageKnifeAnimatorComponent {
})
}
watchImageKnifeOption() {
if (this.request !== undefined) {
this.request.requestState = ImageKnifeRequestState.DESTROY
}
this.request = undefined
this.componentVersion++
ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight),true)
}
getCurrentContext(): common.UIAbilityContext {
if (this.currentContext == undefined) {
this.currentContext = getContext(this) as common.UIAbilityContext

34
library/src/main/ets/components/ImageKnifeComponent.ets
View File

@ -21,14 +21,13 @@ import { ImageKnifeData, ImageKnifeRequestSource } from '../model/ImageKnifeData
import { IEngineKey } from '../key/IEngineKey';
import { DefaultEngineKey } from '../key/DefaultEngineKey';
@Component
@ComponentV2
export struct ImageKnifeComponent {
@Watch('watchImageKnifeOption') @ObjectLink imageKnifeOption: ImageKnifeOption;
@State pixelMap: PixelMap | string | undefined = undefined
@State syncLoad: boolean = false
@State adaptiveWidth: Length = '100%'
@State adaptiveHeight: Length = '100%'
@State objectFit: ImageFit = ImageFit.Contain
@Local pixelMap: PixelMap | string | undefined = undefined
@Param syncLoad: boolean = false
@Local adaptiveWidth: Length = '100%'
@Local adaptiveHeight: Length = '100%'
@Local objectFit: ImageFit = ImageFit.Contain
private request: ImageKnifeRequest | undefined
private lastWidth: number = 0
private lastHeight: number = 0
@ -36,7 +35,17 @@ export struct ImageKnifeComponent {
private currentHeight: number = 0
private componentVersion: number = 0
private currentContext: common.UIAbilityContext | undefined = undefined
@Param imageKnifeOption: ImageKnifeOption = new ImageKnifeOption();
@Monitor('imageKnifeOption',
"imageKnifeOption.loadSrc","imageKnifeOption.signature","imageKnifeOption.transformation","imageKnifeOption.border","imageKnifeOption.objectFit")
watchImageKnifeOption() {
if (this.request !== undefined) {
this.request.requestState = ImageKnifeRequestState.DESTROY
}
this.request = undefined
this.componentVersion++
ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
}
aboutToAppear(): void {
//闪动问题失效，注释相应代码后续修复
if(this.syncLoad) {
@ -102,15 +111,6 @@ export struct ImageKnifeComponent {
})
}
watchImageKnifeOption() {
if (this.request !== undefined) {
this.request.requestState = ImageKnifeRequestState.DESTROY
}
this.request = undefined
this.componentVersion++
ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
}
getCurrentContext(): common.UIAbilityContext {
if (this.currentContext == undefined) {
this.currentContext = getContext(this) as common.UIAbilityContext

6
sharedlibrary/src/main/ets/pages/Index.ets
View File

@ -14,11 +14,11 @@
*/
import { ImageKnife , ImageKnifeComponent ,ImageKnifeOption } from "@ohos/imageknife"
@Component
@ComponentV2
export struct IndexComponent {
@State imageKnifeOption: ImageKnifeOption = {
@Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption({
loadSrc: $r('app.media.startIcon')
}
})
build() {
Column() {
Button("预加载").onClick((event: ClickEvent) => {