135 lines
5.2 KiB
Plaintext
135 lines
5.2 KiB
Plaintext
/*
|
||
* 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 { ImageKnifeOption } from '../ImageKnifeOption';
|
||
import { ImageKnifeRequest, ImageKnifeRequestState } from '../ImageKnifeRequest';
|
||
import common from '@ohos.app.ability.common';
|
||
import { ImageKnife } from '../ImageKnife';
|
||
import { LogUtil } from '../utils/LogUtil';
|
||
import componentUtils from '@ohos.arkui.componentUtils'
|
||
import util from '@ohos.util'
|
||
import inspector from '@ohos.arkui.inspector'
|
||
|
||
@Component
|
||
export struct ImageKnifeComponent {
|
||
@Watch('watchImageKnifeOption') @ObjectLink ImageKnifeOption: ImageKnifeOption;
|
||
@State pixelMap: PixelMap | string | undefined = undefined
|
||
@State adaptiveWidth: Length = '100%'
|
||
@State adaptiveHeight: Length = '100%'
|
||
private request: ImageKnifeRequest | undefined
|
||
private lastWidth: number = 0
|
||
private lastHeight: number = 0
|
||
private currentWidth: number = 0
|
||
private currentHeight: number = 0
|
||
private lastSrc: string | PixelMap | Resource = "";
|
||
private componentVersion: number = 0
|
||
@State keyCanvas: KeyCanvas = {
|
||
keyId: util.generateRandomUUID()
|
||
}
|
||
private listener: inspector.ComponentObserver = inspector.createComponentObserver(this.keyCanvas.keyId)
|
||
|
||
aboutToAppear(): void {
|
||
this.listener.on("layout", this.onLayoutComplete)
|
||
}
|
||
|
||
aboutToDisappear(): void {
|
||
if (this.request !== undefined) {
|
||
this.request.requestState = ImageKnifeRequestState.DESTROY
|
||
this.request = undefined
|
||
}
|
||
this.listener.off("layout", this.onLayoutComplete)
|
||
}
|
||
|
||
build() {
|
||
Image(this.pixelMap)
|
||
.objectFit(this.ImageKnifeOption.objectFit === undefined ? ImageFit.Contain : this.ImageKnifeOption.objectFit)
|
||
.width(this.adaptiveWidth)
|
||
.height(this.adaptiveHeight)
|
||
.key(this.keyCanvas.keyId)
|
||
.border(this.ImageKnifeOption.border)
|
||
}
|
||
|
||
watchImageKnifeOption() {
|
||
if (this.lastSrc !== this.ImageKnifeOption.loadSrc) {
|
||
if (this.request !== undefined) {
|
||
this.request.requestState = ImageKnifeRequestState.DESTROY
|
||
}
|
||
this.request = undefined
|
||
this.componentVersion++
|
||
ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
|
||
}
|
||
}
|
||
|
||
getRequest(width: number, height: number): ImageKnifeRequest {
|
||
if (this.request == undefined) {
|
||
this.lastSrc = this.ImageKnifeOption.loadSrc
|
||
this.request = new ImageKnifeRequest(
|
||
this.ImageKnifeOption,
|
||
this.ImageKnifeOption.context !== undefined ? this.ImageKnifeOption.context : getContext(this) as common.UIAbilityContext,
|
||
width,
|
||
height,
|
||
this.componentVersion,
|
||
{
|
||
showPixelMap: async (version: number, pixelMap: PixelMap | string) => {
|
||
if (version !== this.componentVersion) {
|
||
return //针对reuse场景，不显示历史图片
|
||
}
|
||
this.pixelMap = pixelMap
|
||
if (typeof this.pixelMap !== 'string') {
|
||
if (this.ImageKnifeOption.objectFit === ImageFit.Auto) {
|
||
let info = await this.pixelMap.getImageInfo()
|
||
|
||
this.adaptiveWidth = this.currentWidth
|
||
this.adaptiveHeight = info.size.height * this.currentWidth / info.size.width
|
||
|
||
// if (this.currentWidth / this.currentHeight > info.size.width / info.size.height) {
|
||
// this.adaptiveWidth = this.currentWidth
|
||
// this.adaptiveHeight = info.size.height * this.currentWidth / this.currentHeight
|
||
// }
|
||
// else {
|
||
// this.adaptiveWidth = info.size.width * this.currentWidth / this.currentHeight
|
||
// this.adaptiveHeight = this.currentHeight
|
||
// }
|
||
}
|
||
} else {
|
||
//console.info("KKKKKKKKKKK:" + pixelMap)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
return this.request
|
||
}
|
||
|
||
onLayoutComplete: () => void = (): void => {
|
||
let value: componentUtils.ComponentInfo = componentUtils.getRectangleById(this.keyCanvas.keyId);
|
||
this.currentWidth = px2vp(value.size.width)
|
||
this.currentHeight = px2vp(value.size.height)
|
||
if (this.currentWidth <= 0 || this.currentHeight <= 0) {
|
||
// 存在宽或者高为0,此次重回无意义,无需进行request请求
|
||
} else {
|
||
// 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同 条件2:当前是第一次绘制
|
||
if (this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) {
|
||
this.lastWidth = this.currentWidth
|
||
this.lastHeight = this.currentHeight
|
||
LogUtil.log("execute request:width=" + this.currentWidth + " height= " + this.currentHeight)
|
||
ImageKnife.getInstance().execute(this.getRequest(this.currentWidth, this.currentHeight))
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
interface KeyCanvas {
|
||
keyId: string
|
||
} |