98 lines
3.4 KiB
Plaintext
98 lines
3.4 KiB
Plaintext
/*
|
||
* 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 {
|
||
ImageKnifeComponent,
|
||
ImageKnifeOption,
|
||
ImageKnifeGlobal,
|
||
ImageKnife,
|
||
ImageKnifeDrawFactory,
|
||
ScaleType
|
||
} from '@ohos/libraryimageknife'
|
||
import worker from '@ohos.worker';
|
||
@Entry
|
||
@Component
|
||
struct tempUrlTestPage {
|
||
|
||
@State imageKnifeOption1: ImageKnifeOption =
|
||
{
|
||
loadSrc: $r('app.media.icon'),
|
||
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed')
|
||
};
|
||
|
||
@State imageKnifeOption2: ImageKnifeOption =
|
||
{
|
||
loadSrc: $r('app.media.icon'),
|
||
|
||
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("简单示例1：加载一张本地png图片").fontSize(15)
|
||
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||
Button("加载PNG")
|
||
.onClick(() => {
|
||
this.imageKnifeOption1 = {
|
||
// loadSrc:"https://res.vmallres.com/cmscdn/CN/2023-03/a11790b9335a4d598d59f14795368e14.png.75.webp",
|
||
loadSrc:"https://xximg1.meitudata.com/2LqS1vmqv0.png!thumb-w321-webp75",
|
||
mainScaleType: ScaleType.FIT_XY,
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
drawLifeCycle:ImageKnifeDrawFactory.createRoundLifeCycle(0,'#00000000',30)
|
||
}
|
||
}).margin({ top: 5, left: 3 })
|
||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width('100%').height(300).backgroundColor(Color.Orange)
|
||
}
|
||
.width('100%').height(400).backgroundColor(Color.Pink)
|
||
|
||
Text("简单示例2：加载一张网络gif图片").fontSize(15)
|
||
Text("gif解析在子线程,请在页面构建后创建worker,注入imageknife").fontSize(15)
|
||
Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
|
||
Button("加载GIF")
|
||
.onClick(() => {
|
||
this.imageKnifeOption2 = {
|
||
loadSrc: 'https://res.vmallres.com/cmscdn/CN/2023-03/7052a601ac3e428c84c9415ad9734735.gif',
|
||
|
||
placeholderSrc: $r('app.media.icon_loading'),
|
||
errorholderSrc: $r('app.media.icon_failed'),
|
||
displayProgress:true,
|
||
}
|
||
}).margin({ top: 5, left: 3 })
|
||
ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 }).width(300).height(300)
|
||
}.width('100%').backgroundColor(Color.Pink)
|
||
|
||
|
||
}.width('100%')
|
||
}
|
||
.width('100%')
|
||
.height('100%')
|
||
}
|
||
|
||
aboutToAppear() {
|
||
|
||
}
|
||
aboutToDisappear(){
|
||
|
||
}
|
||
|
||
onBackPress() {
|
||
|
||
}
|
||
} |