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

1.ArkTs整改14 整改imageknife核心代码整改 

Signed-off-by: zhoulisheng1 <zhoulisheng1@huawei.com>
This commit is contained in:
zhoulisheng1 2023-09-21 16:17:14 +08:00
parent 9fedc69e8e
commit 68acab45ff
7 changed files with 459 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
imageknife/index.ets
View File

@ -94,10 +94,10 @@ export * from './src/main/ets/components/3rd_party/upng/UPNG'
*/ */
export * from './src/main/ets/components/imageknife/ImageKnife' export * from './src/main/ets/components/imageknife/ImageKnife'
export * from './src/main/ets/components/imageknife/ImageKnifeGlobal' export * from './src/main/ets/components/imageknife/ImageKnifeGlobal'
export * from './src/main/ets/components/imageknife/RequestOption' export {RequestOption,Size} from './src/main/ets/components/imageknife/RequestOption'
export * from './src/main/ets/components/imageknife/ImageKnifeComponent' export * from './src/main/ets/components/imageknife/ImageKnifeComponent'
export * from './src/main/ets/components/imageknife/ImageKnifeDrawFactory' export * from './src/main/ets/components/imageknife/ImageKnifeDrawFactory'
export * from './src/main/ets/components/imageknife/ImageKnifeOption' export {ImageKnifeOption,CropCircleWithBorder,Crop,GifOptions,TransformOptions} from './src/main/ets/components/imageknife/ImageKnifeOption'
export * from './src/main/ets/components/imageknife/ImageKnifeData' export * from './src/main/ets/components/imageknife/ImageKnifeData'
export type {IAllCacheInfoCallback} from './src/main/ets/components/imageknife/interface/IAllCacheInfoCallback' export type {IAllCacheInfoCallback} from './src/main/ets/components/imageknife/interface/IAllCacheInfoCallback'
export type {AllCacheInfo} from './src/main/ets/components/imageknife/interface/IAllCacheInfoCallback' export type {AllCacheInfo} from './src/main/ets/components/imageknife/interface/IAllCacheInfoCallback'

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

@ -26,23 +26,24 @@ import {RequestManager} from "../imageknife/requestmanage/RequestManager"
import {NONE} from "../cache/diskstrategy/enum/NONE" import {NONE} from "../cache/diskstrategy/enum/NONE"
import {FileTypeUtil} from '../imageknife/utils/FileTypeUtil' import {FileTypeUtil} from '../imageknife/utils/FileTypeUtil'
import {DownloadClient} from '../imageknife/networkmanage/DownloadClient' import {DownloadClient} from '../imageknife/networkmanage/DownloadClient'
import type {IDataFetch} from '../imageknife/networkmanage/IDataFetch' import {IDataFetch} from '../imageknife/networkmanage/IDataFetch'
import {ParseResClient} from '../imageknife/resourcemanage/ParseResClient' import {ParseResClient} from '../imageknife/resourcemanage/ParseResClient'
import type {IResourceFetch} from '../imageknife/resourcemanage/IResourceFetch' import {IResourceFetch} from '../imageknife/resourcemanage/IResourceFetch'
import {ImageKnifeData,ImageKnifeType} from '../imageknife/ImageKnifeData' import {ImageKnifeData,ImageKnifeType} from '../imageknife/ImageKnifeData'
import {ImageKnifeGlobal} from '../imageknife/ImageKnifeGlobal' import {ImageKnifeGlobal} from '../imageknife/ImageKnifeGlobal'
import image from "@ohos.multimedia.image" import image from "@ohos.multimedia.image"
import {CompressBuilder} from "../imageknife/compress/CompressBuilder" import {CompressBuilder} from "../imageknife/compress/CompressBuilder"
import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import {LogUtil} from '../imageknife/utils/LogUtil' import {LogUtil} from '../imageknife/utils/LogUtil'
import worker from '@ohos.worker'
export class ImageKnife { export class ImageKnife {
static readonly SEPARATOR: string = '/' static readonly SEPARATOR: string = '/'
private memoryCache: LruCache<string, any>; private memoryCache: LruCache<string, ImageKnifeData>;
private diskMemoryCache: DiskLruCache; private diskMemoryCache: DiskLruCache;
private dataFetch: IDataFetch; private dataFetch: IDataFetch;
private resourceFetch: IResourceFetch; private resourceFetch: IResourceFetch<ArrayBuffer>;
private filesPath: string = ""; // data/data/包名/files目录 private filesPath: string = ""; // data/data/包名/files目录
@ -56,9 +57,9 @@ export class ImageKnife {
private defaultListener: AsyncCallback<ImageKnifeData>; // 全局监听器 private defaultListener: AsyncCallback<ImageKnifeData>; // 全局监听器
// gifWorker // gifWorker
private gifWorker; private gifWorker: worker.ThreadWorker|undefined = undefined;
private defaultLifeCycle: IDrawLifeCycle; private defaultLifeCycle: IDrawLifeCycle|undefined = undefined;
// 开发者可配置全局缓存 // 开发者可配置全局缓存
private engineKeyImpl: EngineKeyInterface; private engineKeyImpl: EngineKeyInterface;
@ -66,7 +67,7 @@ export class ImageKnife {
private constructor() { private constructor() {
// 构造方法传入size 为保存文件个数 // 构造方法传入size 为保存文件个数
this.memoryCache = new LruCache<string, any>(100); this.memoryCache = new LruCache<string, ImageKnifeData>(100);
// 创建disk缓存 传入的size 为多少比特 比如20KB 传入20*1024 // 创建disk缓存 传入的size 为多少比特 比如20KB 传入20*1024
this.diskMemoryCache = DiskLruCache.create(ImageKnifeGlobal.getInstance().getHapContext()); this.diskMemoryCache = DiskLruCache.create(ImageKnifeGlobal.getInstance().getHapContext());
@ -89,7 +90,7 @@ export class ImageKnife {
this.engineKeyImpl = new EngineKeyFactories(); this.engineKeyImpl = new EngineKeyFactories();
} }
getMemoryCache(): LruCache<string, any>{ getMemoryCache(): LruCache<string, ImageKnifeData>{
return this.memoryCache; return this.memoryCache;
} }
@ -125,7 +126,7 @@ export class ImageKnife {
return ImageKnifeGlobal.getInstance().getHapContext(); return ImageKnifeGlobal.getInstance().getHapContext();
} }
setMemoryCache(lrucache: LruCache<string, any>) { setMemoryCache(lrucache: LruCache<string, ImageKnifeData>) {
this.memoryCache = lrucache; this.memoryCache = lrucache;
} }
@ -133,7 +134,7 @@ export class ImageKnife {
return this.defaultListener; return this.defaultListener;
} }
setGifWorker(worker){ setGifWorker(worker:worker.ThreadWorker){
this.gifWorker = worker this.gifWorker = worker
} }
getGifWorker(){ getGifWorker(){
@ -165,10 +166,10 @@ export class ImageKnife {
// 替代原来的LruCache // 替代原来的LruCache
public replaceLruCache(size:number){ public replaceLruCache(size:number){
if(this.memoryCache.map.size() <= 0) { if(this.memoryCache.map.size() <= 0) {
this.memoryCache = new LruCache<string, any>(size); this.memoryCache = new LruCache<string, ImageKnifeData>(size);
}else{ }else{
let newLruCache = new LruCache<string, any>(size); let newLruCache = new LruCache<string, ImageKnifeData>(size);
this.memoryCache.foreachLruCache(function (value, key, map) { this.memoryCache.foreachLruCache( (value:ImageKnifeData, key:string, map:Object)=> {
newLruCache.put(key, value); newLruCache.put(key, value);
}) })
this.memoryCache = newLruCache; this.memoryCache = newLruCache;
@ -185,7 +186,7 @@ export class ImageKnife {
this.diskMemoryCache = DiskLruCache.create(ImageKnifeGlobal.getInstance().getHapContext(), size); this.diskMemoryCache = DiskLruCache.create(ImageKnifeGlobal.getInstance().getHapContext(), size);
} else { } else {
let newDiskLruCache = DiskLruCache.create(ImageKnifeGlobal.getInstance().getHapContext(), size); let newDiskLruCache = DiskLruCache.create(ImageKnifeGlobal.getInstance().getHapContext(), size);
this.diskMemoryCache.foreachDiskLruCache(function (value, key, map) { this.diskMemoryCache.foreachDiskLruCache( (value:string|ArrayBuffer, key:string, map:Object)=> {
newDiskLruCache.set(key, value); newDiskLruCache.set(key, value);
}) })
this.diskMemoryCache = newDiskLruCache; this.diskMemoryCache = newDiskLruCache;
@ -193,7 +194,7 @@ export class ImageKnife {
} }
// 预加载 resource资源一级缓存，string资源实现二级缓存 // 预加载 resource资源一级缓存，string资源实现二级缓存
preload(request: RequestOption) { preload(request: RequestOption):void {
// 每个request 公共信息补充 // 每个request 公共信息补充
request.setFilesPath(this.filesPath); request.setFilesPath(this.filesPath);
@ -201,7 +202,7 @@ export class ImageKnife {
} }
// 正常加载 // 正常加载
call(request: RequestOption) { call(request: RequestOption):void {
// 添加全局监听 // 添加全局监听
if(this.defaultListener) { if(this.defaultListener) {
request.addListener(this.defaultListener) request.addListener(this.defaultListener)
@ -227,10 +228,10 @@ export class ImageKnife {
} }
loadResources(request: RequestOption) { loadResources(request: RequestOption) {
let factories; let factories:EngineKeyInterface;
let cacheKey; let cacheKey:string;
let transferKey; let transferKey:string;
let dataKey; let dataKey:string;
if(this.engineKeyImpl){ if(this.engineKeyImpl){
factories = this.engineKeyImpl; factories = this.engineKeyImpl;
}else { }else {
@ -331,7 +332,7 @@ export class ImageKnife {
// 加载下一个key的请求 // 加载下一个key的请求
loadNextPending(request) { loadNextPending(request:RequestOption) {
// 首先寻找被移除key相同的request // 首先寻找被移除key相同的request
let index = -1; let index = -1;
for (let i = 0; i < this.pendingRequest.length; i++) { for (let i = 0; i < this.pendingRequest.length; i++) {
@ -422,7 +423,7 @@ export class ImageKnife {
return false; return false;
} }
parseSource(request: RequestOption) { parseSource(request: RequestOption):void {
if ((typeof (request.loadSrc as image.PixelMap).isEditable) == 'boolean') { if ((typeof (request.loadSrc as image.PixelMap).isEditable) == 'boolean') {
let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, request.loadSrc as PixelMap) let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, request.loadSrc as PixelMap)
request.loadComplete(imageKnifeData); request.loadComplete(imageKnifeData);

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

@ -16,12 +16,12 @@
import { ImageKnifeOption } from '../imageknife/ImageKnifeOption' import { ImageKnifeOption } from '../imageknife/ImageKnifeOption'
import { ImageKnifeGlobal } from '../imageknife/ImageKnifeGlobal' import { ImageKnifeGlobal } from '../imageknife/ImageKnifeGlobal'
import { TransformType } from '../imageknife/transform/TransformType' import { TransformType } from '../imageknife/transform/TransformType'
import { RequestOption } from '../imageknife/RequestOption' import { RequestOption, Size } from '../imageknife/RequestOption'
import { ImageKnifeData } from '../imageknife/ImageKnifeData' import { ImageKnifeData } from '../imageknife/ImageKnifeData'
import { GIFFrame } from '../imageknife/utils/gif/GIFFrame' import { GIFFrame } from '../imageknife/utils/gif/GIFFrame'
import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import { LogUtil } from '../imageknife/utils/LogUtil' import { LogUtil } from '../imageknife/utils/LogUtil'
import { BusinessError } from '@ohos.base'
@Component @Component
export struct ImageKnifeComponent { export struct ImageKnifeComponent {
@ -79,7 +79,8 @@ export struct ImageKnifeComponent {
} }
private canvasHasReady: boolean = false; private canvasHasReady: boolean = false;
private firstDrawFlag: boolean = false; private firstDrawFlag: boolean = false;
private onReadyNext: () => void = undefined private onReadyNext?: (data:ImageKnifeData|number|undefined) => void = undefined
private onReadyNextData:ImageKnifeData|number|undefined = undefined
build() { build() {
Canvas(this.context) Canvas(this.context)
@ -105,11 +106,12 @@ export struct ImageKnifeComponent {
this.canvasHasReady = true; this.canvasHasReady = true;
if (this.onReadyNext) { if (this.onReadyNext) {
LogUtil.log('ImageKnifeComponent onReadyNext is running!') LogUtil.log('ImageKnifeComponent onReadyNext is running!')
this.onReadyNext() this.onReadyNext(this.onReadyNextData)
this.onReadyNext = undefined; this.onReadyNext = undefined;
this.onReadyNextData = undefined
} }
}) })
.onClick((event: ClickEvent) => { .onClick((event?: ClickEvent) => {
// 需要将点击事件回传 // 需要将点击事件回传
if (this.imageKnifeOption.onClick) { if (this.imageKnifeOption.onClick) {
this.imageKnifeOption.onClick(event) this.imageKnifeOption.onClick(event)
@ -153,25 +155,26 @@ export struct ImageKnifeComponent {
* 待onReady执行的时候执行 * 待onReady执行的时候执行
* @param nextFunction 下一个方法 * @param nextFunction 下一个方法
*/ */
runNextFunction(nextFunction: () => void) { runNextFunction(nextFunction: (data:ImageKnifeData|number|undefined) => void,data:ImageKnifeData|number|undefined) {
if (!this.canvasHasReady) { if (!this.canvasHasReady) {
// canvas未初始化完成 // canvas未初始化完成
this.onReadyNext = nextFunction; this.onReadyNext = nextFunction;
this.onReadyNextData = data;
} else { } else {
nextFunction(); nextFunction(data);
} }
} }
configNecessary(request: RequestOption) { configNecessary(request: RequestOption) {
request.load(this.imageKnifeOption.loadSrc) request.load(this.imageKnifeOption.loadSrc)
.addListener({ callback: (err, data) => { .addListener({ callback: (err:BusinessError|string, data:ImageKnifeData) => {
LogUtil.log('ImageKnifeComponent request.load callback') LogUtil.log('ImageKnifeComponent request.load callback')
this.runNextFunction(this.displayMainSource.bind(this, data)); this.runNextFunction(this.displayMainSource,data);
return false; return false;
} }
}) })
let realSize = { let realSize:Size = {
width: this.currentWidth, width: this.currentWidth,
height: this.currentHeight height: this.currentHeight
} }
@ -198,22 +201,22 @@ export struct ImageKnifeComponent {
configDisplay(request: RequestOption) { configDisplay(request: RequestOption) {
if (this.imageKnifeOption.placeholderSrc) { if (this.imageKnifeOption.placeholderSrc) {
request.placeholder(this.imageKnifeOption.placeholderSrc, {asyncSuccess:(data) => { request.placeholder(this.imageKnifeOption.placeholderSrc, {asyncSuccess:(data:ImageKnifeData) => {
LogUtil.log('ImageKnifeComponent request.placeholder callback') LogUtil.log('ImageKnifeComponent request.placeholder callback')
this.runNextFunction(this.displayPlaceholder.bind(this, data)) this.runNextFunction(this.displayPlaceholder,data)
} }
}) })
} }
if (this.imageKnifeOption.thumbSizeMultiplier) { if (this.imageKnifeOption.thumbSizeMultiplier) {
request.thumbnail(this.imageKnifeOption.thumbSizeMultiplier, {asyncSuccess:(data) => { request.thumbnail(this.imageKnifeOption.thumbSizeMultiplier, {asyncSuccess:(data:ImageKnifeData) => {
LogUtil.log('ImageKnifeComponent request.thumbnail callback') LogUtil.log('ImageKnifeComponent request.thumbnail callback')
this.runNextFunction(this.displayThumbSizeMultiplier.bind(this, data)) this.runNextFunction(this.displayThumbSizeMultiplier,data)
}}, this.imageKnifeOption.thumbSizeDelay) }}, this.imageKnifeOption.thumbSizeDelay)
} }
if (this.imageKnifeOption.errorholderSrc) { if (this.imageKnifeOption.errorholderSrc) {
request.errorholder(this.imageKnifeOption.errorholderSrc, {asyncSuccess:(data) => { request.errorholder(this.imageKnifeOption.errorholderSrc, {asyncSuccess:(data:ImageKnifeData) => {
LogUtil.log('ImageKnifeComponent request.errorholder callback') LogUtil.log('ImageKnifeComponent request.errorholder callback')
this.runNextFunction(this.displayErrorholder.bind(this, data)) this.runNextFunction(this.displayErrorholder,data)
}}) }})
} }
@ -235,15 +238,15 @@ export struct ImageKnifeComponent {
request.addProgressListener({asyncSuccess:(percentValue: number) => { request.addProgressListener({asyncSuccess:(percentValue: number) => {
// 如果进度条百分比 未展示大小,展示其动画 // 如果进度条百分比 未展示大小,展示其动画
LogUtil.log('ImageKnifeComponent request.addProgressListener callback') LogUtil.log('ImageKnifeComponent request.addProgressListener callback')
this.runNextFunction(this.displayProgress.bind(this, percentValue)) this.runNextFunction(this.displayProgress,percentValue)
}}) }})
} }
if (this.imageKnifeOption.retryholderSrc) { if (this.imageKnifeOption.retryholderSrc) {
request.retryholder(this.imageKnifeOption.retryholderSrc,{asyncSuccess: (data) => { request.retryholder(this.imageKnifeOption.retryholderSrc,{asyncSuccess: (data:ImageKnifeData) => {
LogUtil.log('ImageKnifeComponent request.retryholder callback') LogUtil.log('ImageKnifeComponent request.retryholder callback')
this.hasDisplayRetryholder = true this.hasDisplayRetryholder = true
this.runNextFunction(this.displayRetryholder.bind(this, data)) this.runNextFunction(this.displayRetryholder,data)
}}) }})
} }
} }
@ -273,108 +276,140 @@ export struct ImageKnifeComponent {
this.configCacheStrategy(request); this.configCacheStrategy(request);
this.configDisplay(request); this.configDisplay(request);
this.configRenderGpu(request); this.configRenderGpu(request);
ImageKnifeGlobal.getInstance().getImageKnife().call(request); if(ImageKnifeGlobal.getInstance().getImageKnife()!=undefined) {
ImageKnifeGlobal.getInstance().getImageKnife()?.call(request);
}
} }
displayPlaceholder(data: ImageKnifeData) { displayPlaceholder = (data: ImageKnifeData|number|undefined)=> {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayPlaceholder', this.context, data, this.imageKnifeOption, if(data == undefined || typeof data == 'number'){
return
}
if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayPlaceholder', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
this.defaultLifeCycle.displayPlaceholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { if(this.defaultLifeCycle.displayPlaceholder != undefined) {
this.setGifTimeId(gifTimeId) this.defaultLifeCycle.displayPlaceholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
}) this.setGifTimeId(gifTimeId)
})
}
} }
} }
} }
displayProgress(percent: number) { displayProgress = (percent: ImageKnifeData|number|undefined)=> {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayProgress', this.context, percent, this.imageKnifeOption, if(typeof percent != 'number'){
return
}
if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayProgress', this.context, percent, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
this.defaultLifeCycle.displayProgress(this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { if(this.defaultLifeCycle.displayProgress != undefined) {
this.setGifTimeId(gifTimeId) this.defaultLifeCycle.displayProgress(this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
}) this.setGifTimeId(gifTimeId)
})
}
} }
} }
} }
displayThumbSizeMultiplier(data: ImageKnifeData) { displayThumbSizeMultiplier = (data: ImageKnifeData|number|undefined)=> {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, if(data == undefined || typeof data == 'number'){
return
}
if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
this.defaultLifeCycle.displayThumbSizeMultiplier(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { if(this.defaultLifeCycle.displayThumbSizeMultiplier != undefined) {
this.setGifTimeId(gifTimeId) this.defaultLifeCycle.displayThumbSizeMultiplier(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
}) this.setGifTimeId(gifTimeId)
})
}
} }
} }
} }
displayMainSource(data: ImageKnifeData) { displayMainSource = (data: ImageKnifeData|number|undefined)=> {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayMainSource', this.context, data, this.imageKnifeOption, if(data == undefined || typeof data == 'number'){
return
}
if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayMainSource', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
this.defaultLifeCycle.displayMainSource(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { if(this.defaultLifeCycle.displayMainSource != undefined) {
this.setGifTimeId(gifTimeId) this.defaultLifeCycle.displayMainSource(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
}) this.setGifTimeId(gifTimeId)
})
}
} }
} }
} }
displayRetryholder(data: ImageKnifeData) { displayRetryholder = (data: ImageKnifeData|number)=> {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayRetryholder', this.context, data, this.imageKnifeOption, if(data == undefined || typeof data == 'number'){
return
}
if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayRetryholder', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
this.defaultLifeCycle.displayRetryholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { if( this.defaultLifeCycle.displayRetryholder != undefined) {
this.setGifTimeId(gifTimeId) this.defaultLifeCycle.displayRetryholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
}) this.setGifTimeId(gifTimeId)
})
}
} }
} }
} }
displayErrorholder(data: ImageKnifeData) { displayErrorholder = (data: ImageKnifeData|number)=> {
if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayErrorholder', this.context, data, this.imageKnifeOption, if(data == undefined || typeof data == 'number'){
return
}
if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },this.imageKnifeOption.drawLifeCycle)) {
if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayErrorholder', this.context, data, this.imageKnifeOption, if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption,
this.currentWidth, this.currentHeight, (gifTimeId) => { this.currentWidth, this.currentHeight, (gifTimeId) => {
this.setGifTimeId(gifTimeId) this.setGifTimeId(gifTimeId)
})) { },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) {
this.defaultLifeCycle.displayErrorholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { if(this.defaultLifeCycle.displayErrorholder != undefined) {
this.setGifTimeId(gifTimeId) this.defaultLifeCycle.displayErrorholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => {
}) this.setGifTimeId(gifTimeId)
})
}
} }
} }
@ -383,13 +418,13 @@ export struct ImageKnifeComponent {
drawPlaceholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { drawPlaceholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
LogUtil.log('ImageKnifeComponent default drawPlaceholder start!') LogUtil.log('ImageKnifeComponent default drawPlaceholder start!')
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
let scaleType = (typeof imageKnifeOption.placeholderScaleType == 'number') ? imageKnifeOption.placeholderScaleType : ScaleType.FIT_CENTER let scaleType = (typeof imageKnifeOption.placeholderScaleType == 'number') ? imageKnifeOption.placeholderScaleType : ScaleType.FIT_CENTER
context.save(); context.save();
context.clearRect(0, 0, compWidth, compHeight) 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(); context.restore();
LogUtil.log('ImageKnifeComponent default drawPlaceholder end!') LogUtil.log('ImageKnifeComponent default drawPlaceholder end!')
}) })
@ -438,13 +473,13 @@ export struct ImageKnifeComponent {
drawThumbSizeMultiplier(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { drawThumbSizeMultiplier(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier start!') LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier start!')
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
let scaleType = (typeof imageKnifeOption.thumbSizeMultiplierScaleType == 'number') ? imageKnifeOption.thumbSizeMultiplierScaleType : ScaleType.FIT_CENTER let scaleType = (typeof imageKnifeOption.thumbSizeMultiplierScaleType == 'number') ? imageKnifeOption.thumbSizeMultiplierScaleType : ScaleType.FIT_CENTER
context.save(); context.save();
context.clearRect(0, 0, compWidth, compHeight) 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(); context.restore();
LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier end!') LogUtil.log('ImageKnifeComponent default drawThumbSizeMultiplier end!')
}) })
@ -453,13 +488,13 @@ export struct ImageKnifeComponent {
drawMainSource(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { drawMainSource(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
LogUtil.log('ImageKnifeComponent default drawMainSource start!') LogUtil.log('ImageKnifeComponent default drawMainSource start!')
if (data.isPixelMap()) { if (data.isPixelMap()) {
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType) LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType)
context.save(); context.save();
context.clearRect(0, 0, compWidth, compHeight) 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(); context.restore();
LogUtil.log('ImageKnifeComponent default drawMainSource end!') LogUtil.log('ImageKnifeComponent default drawMainSource end!')
}) })
@ -470,13 +505,13 @@ export struct ImageKnifeComponent {
drawRetryholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { drawRetryholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
LogUtil.log('ImageKnifeComponent default drawRetryholder start!') LogUtil.log('ImageKnifeComponent default drawRetryholder start!')
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height) LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
let scaleType = (typeof imageKnifeOption.retryholderScaleType == 'number') ? imageKnifeOption.retryholderScaleType : ScaleType.FIT_CENTER let scaleType = (typeof imageKnifeOption.retryholderScaleType == 'number') ? imageKnifeOption.retryholderScaleType : ScaleType.FIT_CENTER
context.save(); context.save();
context.clearRect(0, 0, compWidth, compHeight) 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(); context.restore();
LogUtil.log('ImageKnifeComponent default drawRetryholder end!') LogUtil.log('ImageKnifeComponent default drawRetryholder end!')
}) })
@ -484,56 +519,56 @@ export struct ImageKnifeComponent {
drawErrorholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { drawErrorholder(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
LogUtil.log('ImageKnifeComponent default drawErrorholder start!') LogUtil.log('ImageKnifeComponent default drawErrorholder start!')
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { data.drawPixelMap?.imagePixelMap?.getImageInfo().then((imageInfo) => {
LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height) LogUtil.log('ImageKnifeComponent imageinfo widht =' + imageInfo.size.width + ' height=' + imageInfo.size.height)
let scaleType = (typeof imageKnifeOption.errorholderSrcScaleType == 'number') ? imageKnifeOption.errorholderSrcScaleType : ScaleType.FIT_CENTER let scaleType = (typeof imageKnifeOption.errorholderSrcScaleType == 'number') ? imageKnifeOption.errorholderSrcScaleType : ScaleType.FIT_CENTER
context.save(); context.save();
context.clearRect(0, 0, compWidth, compHeight) 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(); context.restore();
LogUtil.log('ImageKnifeComponent default drawErrorholder end!') LogUtil.log('ImageKnifeComponent default drawErrorholder end!')
}) })
} }
requestAddTransform(request: RequestOption) { requestAddTransform(request: RequestOption) {
if (TransformType.BlurTransformation == this.imageKnifeOption.transform.transformType) { if (TransformType.BlurTransformation == this.imageKnifeOption.transform?.transformType) {
request.blur(this.imageKnifeOption.transform.blur) request.blur(this.imageKnifeOption.transform?.blur)
} else if (TransformType.BrightnessFilterTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.BrightnessFilterTransformation == this.imageKnifeOption.transform?.transformType) {
request.brightnessFilter(this.imageKnifeOption.transform.brightnessFilter) request.brightnessFilter(this.imageKnifeOption.transform?.brightnessFilter)
} else if (TransformType.ContrastFilterTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.ContrastFilterTransformation == this.imageKnifeOption.transform?.transformType) {
request.contrastFilter(this.imageKnifeOption.transform.contrastFilter) request.contrastFilter(this.imageKnifeOption.transform?.contrastFilter)
} else if (TransformType.CropCircleTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.CropCircleTransformation == this.imageKnifeOption.transform?.transformType) {
request.cropCircle() request.cropCircle()
} else if (TransformType.CropCircleWithBorderTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.CropCircleWithBorderTransformation == this.imageKnifeOption.transform?.transformType) {
request.cropCircleWithBorder(this.imageKnifeOption.transform.cropCircleWithBorder.border, this.imageKnifeOption.transform.cropCircleWithBorder.obj) request.cropCircleWithBorder(this.imageKnifeOption.transform?.cropCircleWithBorder?.border, this.imageKnifeOption.transform?.cropCircleWithBorder?.obj)
} else if (TransformType.CropSquareTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.CropSquareTransformation == this.imageKnifeOption.transform?.transformType) {
request.cropSquare() request.cropSquare()
} else if (TransformType.CropTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.CropTransformation == this.imageKnifeOption.transform?.transformType) {
request.crop(this.imageKnifeOption.transform.crop.width, this.imageKnifeOption.transform.crop.height, this.imageKnifeOption.transform.crop.cropType) request.crop(this.imageKnifeOption.transform?.crop?.width, this.imageKnifeOption.transform?.crop?.height, this.imageKnifeOption.transform?.crop?.cropType)
} else if (TransformType.GrayscaleTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.GrayscaleTransformation == this.imageKnifeOption.transform?.transformType) {
request.grayscale() request.grayscale()
} else if (TransformType.InvertFilterTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.InvertFilterTransformation == this.imageKnifeOption.transform?.transformType) {
request.invertFilter() request.invertFilter()
} else if (TransformType.MaskTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.MaskTransformation == this.imageKnifeOption.transform?.transformType) {
request.mask(this.imageKnifeOption.transform.mask) request.mask(this.imageKnifeOption.transform?.mask)
} else if (TransformType.PixelationFilterTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.PixelationFilterTransformation == this.imageKnifeOption.transform?.transformType) {
request.pixelationFilter(this.imageKnifeOption.transform.pixelationFilter) request.pixelationFilter(this.imageKnifeOption.transform?.pixelationFilter)
} else if (TransformType.RotateImageTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.RotateImageTransformation == this.imageKnifeOption.transform?.transformType) {
request.rotateImage(this.imageKnifeOption.transform.rotateImage) request.rotateImage(this.imageKnifeOption.transform?.rotateImage)
} else if (TransformType.RoundedCornersTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.RoundedCornersTransformation == this.imageKnifeOption.transform?.transformType) {
request.roundedCorners(this.imageKnifeOption.transform.roundedCorners) request.roundedCorners(this.imageKnifeOption.transform?.roundedCorners)
} else if (TransformType.SepiaFilterTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.SepiaFilterTransformation == this.imageKnifeOption.transform?.transformType) {
request.sepiaFilter() request.sepiaFilter()
} else if (TransformType.SketchFilterTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.SketchFilterTransformation == this.imageKnifeOption.transform?.transformType) {
request.sketchFilter() request.sketchFilter()
} else if (TransformType.SwirlFilterTransformation == this.imageKnifeOption.transform.transformType) { } else if (TransformType.SwirlFilterTransformation == this.imageKnifeOption.transform?.transformType) {
request.swirlFilter(this.imageKnifeOption.transform.swirlFilter) request.swirlFilter(this.imageKnifeOption.transform?.swirlFilter)
} else if (TransformType.CenterCrop == this.imageKnifeOption.transform.transformType) { } else if (TransformType.CenterCrop == this.imageKnifeOption.transform?.transformType) {
request.centerCrop() request.centerCrop()
} else if (TransformType.CenterInside == this.imageKnifeOption.transform.transformType) { } else if (TransformType.CenterInside == this.imageKnifeOption.transform?.transformType) {
request.centerInside() request.centerInside()
} else if (TransformType.FitCenter == this.imageKnifeOption.transform.transformType) { } else if (TransformType.FitCenter == this.imageKnifeOption.transform?.transformType) {
request.fitCenter() request.fitCenter()
} }
} }
@ -562,17 +597,17 @@ export struct ImageKnifeComponent {
this.gifTimerId = timeId; this.gifTimerId = timeId;
} }
private drawLifeCycleHasConsumed<K, T>(drawLifeCycle: IDrawLifeCycle, methodName: string, private drawLifeCycleHasConsumed<K, T>( methodName: string,
context: CanvasRenderingContext2D, data: K, imageKnifeOption: T, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void context: CanvasRenderingContext2D, data: K, imageKnifeOption: T, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void,drawLifeCycle?: IDrawLifeCycle
) { ):boolean {
if (drawLifeCycle && drawLifeCycle[methodName]) { if (drawLifeCycle && (drawLifeCycle as Record<string,Function>)[methodName]) {
return drawLifeCycle[methodName](context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId) return (drawLifeCycle as Record<string,Function>)[methodName](context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId)
} }
return false; return false;
} }
private drawGIFFrame(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) { private drawGIFFrame(context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) {
let frames = data.drawGIFFrame.imageGIFFrames as GIFFrame[] let frames = data.drawGIFFrame?.imageGIFFrames as GIFFrame[]
LogUtil.log('ImageKnifeComponent gifFrameLength =' + frames.length); LogUtil.log('ImageKnifeComponent gifFrameLength =' + frames.length);
if (imageKnifeOption.gif && (typeof (imageKnifeOption.gif.seekTo) == 'number') && imageKnifeOption.gif.seekTo >= 0) { if (imageKnifeOption.gif && (typeof (imageKnifeOption.gif.seekTo) == 'number') && imageKnifeOption.gif.seekTo >= 0) {
this.autoPlay = false; this.autoPlay = false;
@ -581,7 +616,14 @@ export struct ImageKnifeComponent {
} else { } else {
this.autoPlay = true this.autoPlay = true
context.clearRect(0, 0, compWidth, compHeight) context.clearRect(0, 0, compWidth, compHeight)
this.renderFrames.bind(this, frames, 0, context, compWidth, compHeight)()
this.renderFrames_frames = frames,
this.renderFrames_index = 0,
this.renderFrames_context = context,
this.renderFrames_compWidth = compWidth,
this.renderFrames_compHeight = compHeight
this.renderFrames()
} }
} }
@ -596,22 +638,30 @@ export struct ImageKnifeComponent {
* 绘制直接到第几帧方法，由于gif非第一帧数据可能是不全的，这里采用逐帧渲染的方式来绘制保证图像的完整性 * 绘制直接到第几帧方法，由于gif非第一帧数据可能是不全的，这里采用逐帧渲染的方式来绘制保证图像的完整性
*/ */
private drawSeekToFrame(frames: GIFFrame[], context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { private drawSeekToFrame(frames: GIFFrame[], context: CanvasRenderingContext2D, compWidth: number, compHeight: number) {
for (let i = 0; i < this.imageKnifeOption.gif.seekTo; i++) { if(this.imageKnifeOption.gif != undefined && this.imageKnifeOption.gif.seekTo != undefined) {
this.drawFrame(frames, i, context, compWidth, compHeight); for (let i = 0; i < this.imageKnifeOption.gif.seekTo; i++) {
this.drawFrame(frames, i, context, compWidth, compHeight);
}
} }
} }
private renderFrames(frames: GIFFrame[], index: number, context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { renderFrames_frames: GIFFrame[] | undefined = undefined
LogUtil.log('ImageKnifeComponent renderFrames frames length =' + frames.length) renderFrames_index: number = 0;
renderFrames_context: CanvasRenderingContext2D | undefined = undefined;
renderFrames_compWidth: number = 0;
renderFrames_compHeight: number = 0
renderFrames = ()=> {
LogUtil.log('ImageKnifeComponent renderFrames frames length =' + this.renderFrames_frames.length)
let start = new Date().getTime(); let start = new Date().getTime();
if (index === 0) { if (this.renderFrames_index === 0) {
// 如果是第一帧，我们只从开始渲染前记录时间 // 如果是第一帧，我们只从开始渲染前记录时间
this.startGifLoopTime = start; this.startGifLoopTime = start;
} }
// draw Frame // draw Frame
this.drawFrame(frames, index, context, compWidth, compHeight); this.drawFrame(this.renderFrames_frames, this.renderFrames_index, this.renderFrames_context, this.renderFrames_compWidth, this.renderFrames_compHeight);
//如果gif动图只有一帧的情况下，不进行后面代码的逐帧绘制循环 //如果gif动图只有一帧的情况下，不进行后面代码的逐帧绘制循环
if (frames.length <= 1) { if (this.renderFrames_frames.length <= 1) {
return return
} }
@ -622,9 +672,9 @@ export struct ImageKnifeComponent {
if (this.autoPlay) { if (this.autoPlay) {
// 理论上该帧在屏幕上保留的时间 // 理论上该帧在屏幕上保留的时间
let stayTime = frames[index].delay; let stayTime = this.renderFrames_frames[this.renderFrames_index].delay;
if (this.imageKnifeOption.gif && this.imageKnifeOption.gif.speedFactory) { if (this.imageKnifeOption.gif && this.imageKnifeOption.gif.speedFactory) {
stayTime = frames[index].delay / (this.imageKnifeOption.gif.speedFactory * 1.0); stayTime = this.renderFrames_frames[this.renderFrames_index].delay / (this.imageKnifeOption.gif.speedFactory * 1.0);
} }
// 减去程序执行消耗，剩余的准确延迟时间 // 减去程序执行消耗，剩余的准确延迟时间
let delayTime = Math.max(0, Math.floor(stayTime - diff)); let delayTime = Math.max(0, Math.floor(stayTime - diff));
@ -636,17 +686,22 @@ export struct ImageKnifeComponent {
// 整个gif累计的时长; // 整个gif累计的时长;
this.gifLoopDuration += loopStayTime; this.gifLoopDuration += loopStayTime;
// 返回gif一次循环结束回调，并且把当前循环的时间给出 // 返回gif一次循环结束回调，并且把当前循环的时间给出
if (index === (frames.length - 1) && this.imageKnifeOption.gif && this.imageKnifeOption.gif.loopFinish) { if (this.renderFrames_index === (this.renderFrames_frames.length - 1) && this.imageKnifeOption.gif && this.imageKnifeOption.gif.loopFinish) {
this.imageKnifeOption.gif.loopFinish(this.gifLoopDuration) this.imageKnifeOption.gif.loopFinish(this.gifLoopDuration)
this.gifLoopDuration = 0; this.gifLoopDuration = 0;
} }
// update the frame index // update the frame index
index++ this.renderFrames_index++
if (index >= frames.length) { if (this.renderFrames_index >= this.renderFrames_frames.length) {
index = 0; this.renderFrames_index = 0;
} }
// @ts-ignore
this.gifTimerId = setTimeout(this.renderFrames.bind(this, frames, index, context, compWidth, compHeight), delayTime) // this.renderFrames_frames,
// this.renderFrames_index,
// this.renderFrames_context,
// this.renderFrames_compWidth,
// this.renderFrames_compHeight
this.gifTimerId = setTimeout(this.renderFrames, delayTime)
} }
} }
@ -678,7 +733,8 @@ export struct ImageKnifeComponent {
disposal = preFrame.disposalType disposal = preFrame.disposalType
if (disposal === FrameDisposalType.DISPOSE_RestoreBackground) { if (disposal === FrameDisposalType.DISPOSE_RestoreBackground) {
const {left, top } = preFrame.dims; let left:number = preFrame.dims.left;
let top:number = preFrame.dims.top
context.clearRect(left, top, compWidth, compHeight); context.clearRect(left, top, compWidth, compHeight);
} }
} else { } else {
@ -733,7 +789,7 @@ export enum ScaleType {
export class ScaleTypeHelper { 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 | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX: number, imageOffsetY: number) {
let scaleW = compWidth / imageWidth let scaleW = compWidth / imageWidth
let scaleH = compHeight / imageHeight let scaleH = compHeight / imageHeight
let minScale = scaleW > scaleH ? scaleH : scaleW let minScale = scaleW > scaleH ? scaleH : scaleW
@ -771,63 +827,73 @@ export class ScaleTypeHelper {
} }
static drawFitStart(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, minScale: number, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) { static drawFitStart(context: CanvasRenderingContext2D, source: PixelMap | undefined, minScale: number, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
context.setTransform(minScale, 0, 0, minScale, 0, 0) context.setTransform(minScale, 0, 0, minScale, 0, 0)
let dx = 0 let dx:number = 0
let dy = 0 let dy:number = 0
let dw = imageWidth; let dw:number = imageWidth;
let dh = imageHeight; let dh:number = imageHeight;
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) if(source!= undefined) {
context.drawImage(source, dx + (imageOffsetX != undefined ? imageOffsetX : 0), dy + (imageOffsetY != undefined ? imageOffsetY : 0))
}
} }
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 | undefined, minScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
context.setTransform(minScale, 0, 0, minScale, 0, 0) context.setTransform(minScale, 0, 0, minScale, 0, 0)
let dx = (compWidth - imageWidth * minScale) / (minScale * 1.0); let dx:number = (compWidth - imageWidth * minScale) / (minScale * 1.0);
let dy = (compHeight - imageHeight * minScale) / (minScale * 1.0); let dy:number = (compHeight - imageHeight * minScale) / (minScale * 1.0);
let dw = imageWidth; let dw:number = imageWidth;
let dh = imageHeight; let dh:number = imageHeight;
if(source!= undefined) {
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) context.drawImage(source, dx + (imageOffsetX != undefined ? imageOffsetX : 0), dy + (imageOffsetY != undefined ? imageOffsetY : 0))
}
} }
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 | undefined, minScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
context.setTransform(minScale, 0, 0, minScale, 0, 0) context.setTransform(minScale, 0, 0, minScale, 0, 0)
let dx = (compWidth - imageWidth * minScale) / (minScale * 2.0); let dx:number = (compWidth - imageWidth * minScale) / (minScale * 2.0);
let dy = (compHeight - imageHeight * minScale) / (minScale * 2.0); let dy:number = (compHeight - imageHeight * minScale) / (minScale * 2.0);
let dw = imageWidth; let dw:number = imageWidth;
let dh = imageHeight; let dh:number = imageHeight;
if(source!= undefined) {
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) context.drawImage(source, dx + (imageOffsetX != undefined ? imageOffsetX : 0), dy + (imageOffsetY != undefined ? imageOffsetY : 0))
}
} }
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 | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
let dx = (compWidth - imageWidth) / 2.0; let dx:number = (compWidth - imageWidth) / 2.0;
let dy = (compHeight - imageHeight) / 2.0; let dy:number = (compHeight - imageHeight) / 2.0;
let dw = imageWidth; let dw:number = imageWidth;
let dh = imageHeight; let dh:number = imageHeight;
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) if(source!= undefined) {
context.drawImage(source, dx + (imageOffsetX != undefined ? imageOffsetX : 0), dy + (imageOffsetY != undefined ? imageOffsetY : 0))
}
} }
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 | undefined, maxScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
context.setTransform(maxScale, 0, 0, maxScale, 0, 0) context.setTransform(maxScale, 0, 0, maxScale, 0, 0)
let dx = (compWidth - imageWidth * maxScale) / (maxScale * 2.0); let dx:number = (compWidth - imageWidth * maxScale) / (maxScale * 2.0);
let dy = (compHeight - imageHeight * maxScale) / (maxScale * 2.0); let dy:number = (compHeight - imageHeight * maxScale) / (maxScale * 2.0);
let dw = imageWidth; let dw:number = imageWidth;
let dh = imageHeight; let dh:number = imageHeight;
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) if(source!= undefined) {
context.drawImage(source, dx + (imageOffsetX != undefined ? imageOffsetX : 0), dy + (imageOffsetY != undefined ? imageOffsetY : 0))
}
} }
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 | undefined, scaleW: number, scaleH: number, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
context.setTransform(scaleW, 0, 0, scaleH, 0, 0) context.setTransform(scaleW, 0, 0, scaleH, 0, 0)
let dx = 0; let dx:number = 0;
let dy = 0; let dy:number = 0;
let dw = imageWidth; let dw:number = imageWidth;
let dh = imageHeight; let dh:number = imageHeight;
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) if(source!= undefined) {
context.drawImage(source, dx + (imageOffsetX != undefined ? imageOffsetX : 0), dy + (imageOffsetY != undefined ? imageOffsetY : 0))
}
} }
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 | undefined, minScale: number, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
if (minScale < 1) { 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 { } else {
@ -835,13 +901,15 @@ export class ScaleTypeHelper {
} }
} }
static drawNone(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) { static drawNone(context: CanvasRenderingContext2D, source: PixelMap | undefined, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) {
let dx = 0; let dx:number = 0;
let dy = 0; let dy:number = 0;
let dw = imageWidth; let dw:number = imageWidth;
let dh = imageHeight; let dh:number = imageHeight;
context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) if(source!= undefined) {
} context.drawImage(source, dx + (imageOffsetX != undefined ? imageOffsetX : 0), dy + (imageOffsetY != undefined ? imageOffsetY : 0))
}
}
} }

18
imageknife/src/main/ets/components/imageknife/ImageKnifeData.ets
View File

@ -22,19 +22,19 @@ export enum ImageKnifeType {
} }
export class DrawPixelMap { export class DrawPixelMap {
imagePixelMap: PixelMap imagePixelMap: PixelMap | undefined = undefined
} }
export class DrawString { export class DrawString {
imageString: string imageString: string | undefined = undefined
} }
export class DrawResource { export class DrawResource {
imageResource: Resource imageResource: Resource | undefined = undefined
} }
export class DrawGIFFrame { export class DrawGIFFrame {
imageGIFFrames: GIFFrame[] imageGIFFrames: GIFFrame[] | undefined = undefined
} }
export class ImageKnifeData { export class ImageKnifeData {
@ -47,11 +47,11 @@ export class ImageKnifeData {
waitSaveDisk = false; waitSaveDisk = false;
imageKnifeType: ImageKnifeType; imageKnifeType: ImageKnifeType | undefined = undefined;
drawPixelMap: DrawPixelMap; drawPixelMap: DrawPixelMap | undefined = undefined;
drawGIFFrame: DrawGIFFrame; drawGIFFrame: DrawGIFFrame | undefined = undefined;
drawResource: DrawResource; drawResource: DrawResource | undefined = undefined;
drawString: DrawString; drawString: DrawString | undefined = undefined;
static createImagePixelMap(type: ImageKnifeType, value: PixelMap) { static createImagePixelMap(type: ImageKnifeType, value: PixelMap) {
let data = new ImageKnifeData(); let data = new ImageKnifeData();

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

@ -26,10 +26,10 @@ export class ImageKnifeDrawFactory{
* @param colorString 例如 "#FF00FF" * @param colorString 例如 "#FF00FF"
*/ */
public static createOvalLifeCycle(borderWidth:number, colorString:string):IDrawLifeCycle{ public static createOvalLifeCycle(borderWidth:number, colorString:string):IDrawLifeCycle{
let viewLifeCycle = { let viewLifeCycle:IDrawLifeCycle = {
// 展示占位图 // 展示占位图
displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
return false; return false;
}, },
// 展示加载进度 // 展示加载进度
@ -38,14 +38,14 @@ export class ImageKnifeDrawFactory{
}, },
// 展示缩略图 // 展示缩略图
displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
return false; return false;
}, },
// 展示主图 // 展示主图
displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
if (data.isPixelMap()) { if (data.isPixelMap()) {
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
@ -60,7 +60,7 @@ export class ImageKnifeDrawFactory{
context.save(); context.save();
context.globalCompositeOperation = 'destination-in' context.globalCompositeOperation = 'destination-in'
context.beginPath(); context.beginPath();
this.setOval(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight,0,0,borderWidth) ImageKnifeDrawFactory.setOval(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight,0,0,borderWidth)
context.closePath(); context.closePath();
context.fill() context.fill()
context.restore(); context.restore();
@ -72,7 +72,7 @@ export class ImageKnifeDrawFactory{
context.lineWidth = borderWidth; context.lineWidth = borderWidth;
context.globalCompositeOperation = 'source-over' context.globalCompositeOperation = 'source-over'
context.beginPath(); context.beginPath();
this.setOval(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0, borderWidth) ImageKnifeDrawFactory.setOval(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0, borderWidth)
context.closePath(); context.closePath();
context.stroke() context.stroke()
context.restore(); context.restore();
@ -189,10 +189,10 @@ export class ImageKnifeDrawFactory{
* @param connerRadius 圆角半径 * @param connerRadius 圆角半径
*/ */
public static createRoundLifeCycle(borderWidth:number, colorString:string, connerRadius:number){ public static createRoundLifeCycle(borderWidth:number, colorString:string, connerRadius:number){
let viewLifeCycle = { let viewLifeCycle:IDrawLifeCycle = {
// 展示占位图 // 展示占位图
displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
return false; return false;
}, },
// 展示加载进度 // 展示加载进度
@ -201,14 +201,14 @@ export class ImageKnifeDrawFactory{
}, },
// 展示缩略图 // 展示缩略图
displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
return false; return false;
}, },
// 展示主图 // 展示主图
displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
if (data.isPixelMap()) { if (data.isPixelMap()) {
// @ts-ignore
data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => {
let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER
@ -223,7 +223,7 @@ export class ImageKnifeDrawFactory{
// 通过 destination-in 裁剪出圆角 // 通过 destination-in 裁剪出圆角
context.save(); context.save();
context.globalCompositeOperation = 'destination-in' context.globalCompositeOperation = 'destination-in'
this.setRect(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight,0,0,borderWidth,connerRadius) ImageKnifeDrawFactory.setRect(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight,0,0,borderWidth,connerRadius)
context.fill() context.fill()
context.restore(); context.restore();
if(borderWidth > 0){ if(borderWidth > 0){
@ -232,7 +232,7 @@ export class ImageKnifeDrawFactory{
context.strokeStyle = colorString context.strokeStyle = colorString
context.lineWidth = borderWidth context.lineWidth = borderWidth
context.globalCompositeOperation = 'source-over' context.globalCompositeOperation = 'source-over'
this.setRect(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight,0,0,borderWidth,connerRadius) ImageKnifeDrawFactory.setRect(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight,0,0,borderWidth,connerRadius)
context.stroke() context.stroke()
context.restore(); context.restore();
} }
@ -284,21 +284,21 @@ export class ImageKnifeDrawFactory{
y1 = borderWidth/2 y1 = borderWidth/2
w1 = imageWidth * minScale - borderWidth; w1 = imageWidth * minScale - borderWidth;
h1 = imageHeight * minScale - borderWidth; h1 = imageHeight * minScale - borderWidth;
this.roundRect(context, x1, y1, w1, h1, cornerRadius) ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius)
break break
case ScaleType.FIT_END: case ScaleType.FIT_END:
x1 = compWidth - imageWidth * minScale + borderWidth / 2 x1 = compWidth - imageWidth * minScale + borderWidth / 2
y1 = compHeight - imageHeight * minScale + borderWidth / 2 y1 = compHeight - imageHeight * minScale + borderWidth / 2
w1 = imageWidth * minScale - borderWidth; w1 = imageWidth * minScale - borderWidth;
h1 = imageHeight * minScale - borderWidth; h1 = imageHeight * minScale - borderWidth;
this.roundRect(context, x1, y1, w1, h1, cornerRadius) ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius)
break break
case ScaleType.FIT_CENTER: case ScaleType.FIT_CENTER:
x1 = (compWidth - imageWidth * minScale) / 2 + borderWidth / 2 x1 = (compWidth - imageWidth * minScale) / 2 + borderWidth / 2
y1 = (compHeight - imageHeight * minScale) / 2 + borderWidth / 2 y1 = (compHeight - imageHeight * minScale) / 2 + borderWidth / 2
w1 = imageWidth * minScale - borderWidth w1 = imageWidth * minScale - borderWidth
h1 = imageHeight * minScale - borderWidth h1 = imageHeight * minScale - borderWidth
this.roundRect(context, x1, y1, w1, h1, cornerRadius) ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius)
break break
case ScaleType.CENTER: case ScaleType.CENTER:
x1 = Math.max(0,(compWidth - Math.min(compWidth, imageWidth)))/2 + borderWidth/2 x1 = Math.max(0,(compWidth - Math.min(compWidth, imageWidth)))/2 + borderWidth/2
@ -307,7 +307,7 @@ export class ImageKnifeDrawFactory{
w1 = Math.min(compWidth, imageWidth) - borderWidth; w1 = Math.min(compWidth, imageWidth) - borderWidth;
h1 = Math.min(compHeight, imageHeight) - borderWidth; h1 = Math.min(compHeight, imageHeight) - borderWidth;
this.roundRect(context, x1, y1, w1, h1, cornerRadius) ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius)
break break
case ScaleType.CENTER_CROP: case ScaleType.CENTER_CROP:
x1 = borderWidth/2 x1 = borderWidth/2
@ -315,7 +315,7 @@ export class ImageKnifeDrawFactory{
w1 = compWidth - borderWidth; w1 = compWidth - borderWidth;
h1 = compHeight - borderWidth; h1 = compHeight - borderWidth;
this.roundRect(context, x1, y1, w1, h1, cornerRadius) ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius)
break break
case ScaleType.FIT_XY: case ScaleType.FIT_XY:
x1 = borderWidth/2 x1 = borderWidth/2
@ -323,7 +323,7 @@ export class ImageKnifeDrawFactory{
w1 = compWidth - borderWidth; w1 = compWidth - borderWidth;
h1 = compHeight - borderWidth; h1 = compHeight - borderWidth;
this.roundRect(context, x1, y1, w1, h1, cornerRadius) ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius)
break break
case ScaleType.CENTER_INSIDE: case ScaleType.CENTER_INSIDE:
if(minScale < 1){ // FIT_CENTER if(minScale < 1){ // FIT_CENTER
@ -331,7 +331,7 @@ export class ImageKnifeDrawFactory{
y1 = (compHeight - imageHeight * minScale) / 2 + borderWidth / 2 y1 = (compHeight - imageHeight * minScale) / 2 + borderWidth / 2
w1 = imageWidth * minScale - borderWidth w1 = imageWidth * minScale - borderWidth
h1 = imageHeight * minScale - borderWidth h1 = imageHeight * minScale - borderWidth
this.roundRect(context, x1, y1, w1, h1, cornerRadius) ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius)
}else{ // CENTER }else{ // CENTER
x1 = Math.max(0,(compWidth - Math.min(compWidth, imageWidth)))/2 + borderWidth/2 x1 = Math.max(0,(compWidth - Math.min(compWidth, imageWidth)))/2 + borderWidth/2
y1 = Math.max(0,(compHeight - Math.min(compHeight, imageHeight)))/2 + borderWidth/2 y1 = Math.max(0,(compHeight - Math.min(compHeight, imageHeight)))/2 + borderWidth/2
@ -339,7 +339,7 @@ export class ImageKnifeDrawFactory{
w1 = Math.min(compWidth, imageWidth) - borderWidth; w1 = Math.min(compWidth, imageWidth) - borderWidth;
h1 = Math.min(compHeight, imageHeight) - borderWidth; h1 = Math.min(compHeight, imageHeight) - borderWidth;
this.roundRect(context, x1, y1, w1, h1, cornerRadius) ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius)
} }
break; break;
@ -351,7 +351,7 @@ export class ImageKnifeDrawFactory{
w1 = Math.min(compWidth, imageWidth) - borderWidth; w1 = Math.min(compWidth, imageWidth) - borderWidth;
h1 = Math.min(compHeight, imageHeight) - borderWidth; h1 = Math.min(compHeight, imageHeight) - borderWidth;
this.roundRect(context, x1, y1, w1, h1, cornerRadius) ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius)
break; break;
} }
} }
@ -390,36 +390,36 @@ export class ImageKnifeDrawFactory{
let viewLifeCycle: IDrawLifeCycle = { let viewLifeCycle: IDrawLifeCycle = {
// 展示占位图 // 展示占位图
displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
return false; return false;
}, },
// 展示加载进度 // 展示加载进度
displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
this.drawDefaultProgress(context, progress, imageKnifeOption, compWidth, compHeight,fontColor,fontSizeRate,setGifTimeId) ImageKnifeDrawFactory.drawDefaultProgress(context, progress, imageKnifeOption, compWidth, compHeight,fontColor,fontSizeRate,setGifTimeId)
return true; return true;
}, },
// 展示缩略图 // 展示缩略图
displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
return false; return false;
}, },
// 展示主图 // 展示主图
displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
return false; return false;
}, },
// 展示重试图层 // 展示重试图层
displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
return false; return false;
}, },
// 展示失败占位图 // 展示失败占位图
displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => {
// @ts-ignore
return false; return false;
} }
} }

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

@ -22,12 +22,44 @@ import { CropType } from '../imageknife/transform/CropTransformation'
import { AllCacheInfo, IAllCacheInfoCallback } from '../imageknife/interface/IAllCacheInfoCallback' import { AllCacheInfo, IAllCacheInfoCallback } from '../imageknife/interface/IAllCacheInfoCallback'
import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle'
import { ScaleType } from '../imageknife/ImageKnifeComponent' import { ScaleType } from '../imageknife/ImageKnifeComponent'
import { rgbColor } from './transform/CropCircleWithBorderTransformation'
import { RoundCorner } from './transform/RoundedCornersTransformation'
export interface CropCircleWithBorder{
border: number,
obj: rgbColor
}
export interface Crop{
width: number,
height: number,
cropType: CropType
}
export interface GifOptions{
loopFinish?: (loopTime?:number) => void
speedFactory?: number
seekTo?: number
}
export interface TransformOptions{
transformType: number,
blur?: number,
roundedCorners?: RoundCorner
cropCircleWithBorder?: CropCircleWithBorder
crop?:Crop
brightnessFilter?: number,
contrastFilter?: number,
pixelationFilter?: number,
swirlFilter?: number,
mask?: Resource,
rotateImage?: number
}
@Observed @Observed
export class ImageKnifeOption { export class ImageKnifeOption {
// 主图资源 // 主图资源
loadSrc: string | PixelMap | Resource; loadSrc: string | PixelMap | Resource = '';
mainScaleType?: ScaleType = ScaleType.FIT_CENTER mainScaleType?: ScaleType = ScaleType.FIT_CENTER
enableGpu?:boolean = true; enableGpu?:boolean = true;
@ -77,43 +109,11 @@ export class ImageKnifeOption {
// 设置点击事件回调 // 设置点击事件回调
onClick?:(event?: ClickEvent) => void onClick?:(event?: ClickEvent) => void
gif?: { gif?: GifOptions = undefined;
loopFinish?: (loopTime?) => void
speedFactory?: number
seekTo?: number
}
// 变换相关 不推荐使用该接口 建议直接使用transformation transformations这2个接口实现 // 变换相关 不推荐使用该接口 建议直接使用transformation transformations这2个接口实现
transform?: { transform?:TransformOptions = undefined
transformType: number,
blur?: number,
roundedCorners?: {
top_left: number,
top_right: number,
bottom_left: number,
bottom_right: number
}
cropCircleWithBorder?: {
border: number,
obj: {
r_color: number,
g_color: number,
b_color: number
}
}
crop?: {
width: number,
height: number,
cropType: CropType
}
brightnessFilter?: number,
contrastFilter?: number,
pixelationFilter?: number,
swirlFilter?: number,
mask?: Resource,
rotateImage?: number
}
transformation?: BaseTransform<PixelMap>; transformation?: BaseTransform<PixelMap>;
transformations?: Array<BaseTransform<PixelMap>>; transformations?: Array<BaseTransform<PixelMap>>;

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

@ -14,9 +14,9 @@
*/ */
import { DiskStrategy } from "../cache/diskstrategy/DiskStrategy" import { DiskStrategy } from "../cache/diskstrategy/DiskStrategy"
import type { AsyncCallback } from "../imageknife/interface/AsyncCallback" import { AsyncCallback } from "../imageknife/interface/AsyncCallback"
import type { AsyncSuccess } from "../imageknife/interface/AsyncSuccess" import { AsyncSuccess } from "../imageknife/interface/AsyncSuccess"
import type { IAllCacheInfoCallback } from "../imageknife/interface/IAllCacheInfoCallback" import { IAllCacheInfoCallback } from "../imageknife/interface/IAllCacheInfoCallback"
import { AUTOMATIC } from "../cache/diskstrategy/enum/AUTOMATIC" import { AUTOMATIC } from "../cache/diskstrategy/enum/AUTOMATIC"
import { BaseTransform } from "../imageknife/transform/BaseTransform" import { BaseTransform } from "../imageknife/transform/BaseTransform"
import { RotateImageTransformation } from "../imageknife/transform/RotateImageTransformation" import { RotateImageTransformation } from "../imageknife/transform/RotateImageTransformation"
@ -24,11 +24,11 @@ import { ImageKnifeData } from "../imageknife/ImageKnifeData"
import { CenterCrop } from '../imageknife/transform/pixelmap/CenterCrop' import { CenterCrop } from '../imageknife/transform/pixelmap/CenterCrop'
import { CenterInside } from '../imageknife/transform/pixelmap/CenterInside' import { CenterInside } from '../imageknife/transform/pixelmap/CenterInside'
import { FitCenter } from '../imageknife/transform/pixelmap/FitCenter' import { FitCenter } from '../imageknife/transform/pixelmap/FitCenter'
import { RoundedCornersTransformation } from '../imageknife/transform/RoundedCornersTransformation' import { RoundedCornersTransformation, RoundCorner } from '../imageknife/transform/RoundedCornersTransformation'
import { CropCircleTransformation } from '../imageknife/transform/CropCircleTransformation' import { CropCircleTransformation } from '../imageknife/transform/CropCircleTransformation'
import { CropCircleWithBorderTransformation } from '../imageknife/transform/CropCircleWithBorderTransformation' import { CropCircleWithBorderTransformation, rgbColor } from '../imageknife/transform/CropCircleWithBorderTransformation'
import { CropSquareTransformation } from '../imageknife/transform/CropSquareTransformation' import { CropSquareTransformation } from '../imageknife/transform/CropSquareTransformation'
import { CropTransformation } from '../imageknife/transform/CropTransformation' import { CropTransformation } from '../imageknife/transform/CropTransformation'
import { CropType } from '../imageknife/transform/CropTransformation' import { CropType } from '../imageknife/transform/CropTransformation'
@ -53,35 +53,32 @@ export interface Size {
height: number height: number
} }
export class RequestOption { export class RequestOption {
loadSrc: string | PixelMap | Resource; loadSrc: string | PixelMap | Resource = '';
strategy: DiskStrategy = new AUTOMATIC(); strategy: DiskStrategy = new AUTOMATIC();
dontAnimateFlag = false; dontAnimateFlag = false;
placeholderSrc: PixelMap | Resource; placeholderSrc: PixelMap | Resource | undefined = undefined;
placeholderFunc: AsyncSuccess<ImageKnifeData>; placeholderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
errorholderSrc: PixelMap | Resource; errorholderSrc: PixelMap | Resource | undefined = undefined;
errorholderFunc: AsyncSuccess<ImageKnifeData>; errorholderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
errorholderData: ImageKnifeData; errorholderData: ImageKnifeData | undefined = undefined;;
thumbSizeMultiplier: number; thumbSizeMultiplier: number = 0;
// 如果存在缩略图，则主图延时1s加载 // 如果存在缩略图，则主图延时1s加载
thumbDelayTime: number = 1000 thumbDelayTime: number = 1000
thumbHolderFunc: AsyncSuccess<ImageKnifeData>; thumbHolderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
requestListeners: Array<AsyncCallback<ImageKnifeData>>; requestListeners: Array<AsyncCallback<ImageKnifeData>> | undefined = undefined;
// 进度条 // 进度条
progressFunc: AsyncSuccess<number>; progressFunc: AsyncSuccess<number> | undefined = undefined;
// 重试图层 // 重试图层
retryholderSrc: PixelMap | Resource; retryholderSrc: PixelMap | Resource | undefined = undefined;
retryholderFunc: AsyncSuccess<ImageKnifeData> retryholderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
retryholderData: ImageKnifeData retryholderData: ImageKnifeData | undefined = undefined;
size: { size:Size= { width: -1, height: -1 };
width: number,
height: number
} = { width: -1, height: -1 };
// 网络下载数据回调 // 网络下载数据回调
allCacheInfoCallback: IAllCacheInfoCallback; allCacheInfoCallback: IAllCacheInfoCallback | undefined = undefined;
onlyRetrieveFromCache: boolean = false; onlyRetrieveFromCache: boolean = false;
isCacheable: boolean = true; isCacheable: boolean = true;
@ -194,7 +191,9 @@ export class RequestOption {
} }
addListener(func: AsyncCallback<ImageKnifeData>) { addListener(func: AsyncCallback<ImageKnifeData>) {
this.requestListeners.push(func); if(this.requestListeners != undefined) {
this.requestListeners?.push(func);
}
return this; return this;
} }
@ -212,7 +211,10 @@ export class RequestOption {
this.onlyRetrieveFromCache = flag; this.onlyRetrieveFromCache = flag;
} }
rotateImage(degreesToRotate: number) { rotateImage(degreesToRotate: number|undefined) {
if(degreesToRotate == undefined){
return
}
let rotateImage = new RotateImageTransformation(degreesToRotate); let rotateImage = new RotateImageTransformation(degreesToRotate);
this.transformations.push(rotateImage); this.transformations.push(rotateImage);
return this; return this;
@ -233,12 +235,10 @@ export class RequestOption {
return this; return this;
} }
roundedCorners(obj: { roundedCorners(obj: RoundCorner) {
top_left: number, if(obj == undefined){
top_right: number, return
bottom_left: number, }
bottom_right: number
}) {
let transformation = new RoundedCornersTransformation({ let transformation = new RoundedCornersTransformation({
top_left: obj.top_left, top_left: obj.top_left,
top_right: obj.top_right, top_right: obj.top_right,
@ -255,11 +255,10 @@ export class RequestOption {
return this; return this;
} }
cropCircleWithBorder(border: number, obj: { cropCircleWithBorder(border: number, obj: rgbColor) {
r_color: number, if(border == undefined || obj == undefined){
g_color: number, return
b_color: number }
}) {
let transformation = new CropCircleWithBorderTransformation(border, obj) let transformation = new CropCircleWithBorderTransformation(border, obj)
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
@ -271,7 +270,10 @@ export class RequestOption {
return this; return this;
} }
crop(width: number, height: number, cropType: CropType) { crop(width: number|undefined, height: number|undefined, cropType: CropType|undefined) {
if(width == undefined || height == undefined || cropType == undefined){
return
}
let transformation = new CropTransformation(width, height, cropType) let transformation = new CropTransformation(width, height, cropType)
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
@ -283,13 +285,19 @@ export class RequestOption {
return this; return this;
} }
brightnessFilter(brightness: number) { brightnessFilter(brightness: number|undefined) {
if(brightness == undefined){
return
}
let transformation = new BrightnessFilterTransformation(brightness) let transformation = new BrightnessFilterTransformation(brightness)
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
} }
contrastFilter(contrast: number) { contrastFilter(contrast: number|undefined) {
if(contrast == undefined){
return
}
let transformation = new ContrastFilterTransformation(contrast) let transformation = new ContrastFilterTransformation(contrast)
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
@ -313,43 +321,64 @@ export class RequestOption {
return this; return this;
} }
blur(radius: number) { blur(radius: number|undefined) {
if(radius == undefined){
return
}
let transformation = new BlurTransformation(radius) let transformation = new BlurTransformation(radius)
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
} }
pixelationFilter(pixel: number) { pixelationFilter(pixel: number|undefined) {
if(pixel == undefined){
return
}
let transformation = new PixelationFilterTransformation(pixel) let transformation = new PixelationFilterTransformation(pixel)
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
} }
swirlFilter(degree: number) { swirlFilter(degree: number|undefined) {
if(degree == undefined){
return
}
let transformation = new SwirlFilterTransformation(degree) let transformation = new SwirlFilterTransformation(degree)
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
} }
mask(maskResource: Resource) { mask(maskResource: Resource|undefined) {
if(maskResource == undefined){
return
}
let transformation = new MaskTransformation(maskResource) let transformation = new MaskTransformation(maskResource)
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
} }
kuwaharaFilter(radius: number) { kuwaharaFilter(radius: number|undefined) {
if(radius == undefined){
return
}
let transformation = new KuwaharaFilterTransform(radius); let transformation = new KuwaharaFilterTransform(radius);
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
} }
toonFilter(threshold: number, quantizationLevels: number) { toonFilter(threshold: number|undefined, quantizationLevels: number|undefined) {
if(threshold == undefined || quantizationLevels == undefined){
return
}
let transformation = new ToonFilterTransform(threshold, quantizationLevels); let transformation = new ToonFilterTransform(threshold, quantizationLevels);
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
} }
vignetteFilter(centerPoint: Array<number>, vignetteColor: Array<number>, vignetteSpace: Array<number>) { vignetteFilter(centerPoint: Array<number>|undefined, vignetteColor: Array<number>|undefined, vignetteSpace: Array<number>|undefined) {
if(centerPoint == undefined || vignetteColor == undefined || vignetteSpace == undefined){
return
}
let transformation = new VignetteFilterTransform(centerPoint, vignetteColor, vignetteSpace); let transformation = new VignetteFilterTransform(centerPoint, vignetteColor, vignetteSpace);
this.transformations.push(transformation); this.transformations.push(transformation);
return this; return this;
@ -376,12 +405,14 @@ export class RequestOption {
LogUtil.log("Main Image is Ready:" + this.loadMainReady); LogUtil.log("Main Image is Ready:" + this.loadMainReady);
if (!this.loadMainReady && !(this.loadErrorReady || this.loadRetryReady) && !this.loadThumbnailReady) { if (!this.loadMainReady && !(this.loadErrorReady || this.loadRetryReady) && !this.loadThumbnailReady) {
// 主图未加载成功,并且未加载失败 显示占位图 主图加载成功或者加载失败后=>不展示占位图 // 主图未加载成功,并且未加载失败 显示占位图 主图加载成功或者加载失败后=>不展示占位图
this.placeholderFunc.asyncSuccess(imageKnifeData) if(this.placeholderSrc != undefined) {
this.placeholderFunc?.asyncSuccess(imageKnifeData)
}
} }
} }
// 占位图解析失败 // 占位图解析失败
placeholderOnError = (error)=>{ placeholderOnError = (error:BusinessError|string)=>{
LogUtil.log("占位图解析失败 error =" + error) LogUtil.log("占位图解析失败 error =" + error)
} }
@ -390,7 +421,9 @@ export class RequestOption {
thumbholderOnComplete = (imageKnifeData: ImageKnifeData)=> { thumbholderOnComplete = (imageKnifeData: ImageKnifeData)=> {
if (!this.loadMainReady && !(this.loadErrorReady || this.loadRetryReady)) { if (!this.loadMainReady && !(this.loadErrorReady || this.loadRetryReady)) {
//主图未加载成功,并且未加载失败 显示占位图 主图加载成功或者加载失败后=>不展示占位图 //主图未加载成功,并且未加载失败 显示占位图 主图加载成功或者加载失败后=>不展示占位图
this.thumbHolderFunc.asyncSuccess(imageKnifeData) if(this.thumbHolderFunc != undefined) {
this.thumbHolderFunc?.asyncSuccess(imageKnifeData)
}
} }
} }
@ -404,33 +437,40 @@ export class RequestOption {
// 如果有错误占位图 先解析并保存在RequestOption中 等到加载失败时候进行调用 // 如果有错误占位图 先解析并保存在RequestOption中 等到加载失败时候进行调用
this.errorholderData = imageKnifeData; this.errorholderData = imageKnifeData;
if (this.loadErrorReady) { if (this.loadErrorReady) {
this.errorholderFunc.asyncSuccess(imageKnifeData) if(this.errorholderFunc != undefined) {
this.errorholderFunc.asyncSuccess(imageKnifeData)
}
} }
} }
//加载失败 占位图解析失败 //加载失败 占位图解析失败
errorholderOnError = (error)=> { errorholderOnError = (error:BusinessError|string)=> {
LogUtil.log("失败占位图解析失败 error =" + error) LogUtil.log("失败占位图解析失败 error =" + error)
} }
retryholderOnComplete = (imageKnifeData: ImageKnifeData)=>{ retryholderOnComplete = (imageKnifeData: ImageKnifeData)=>{
this.retryholderData = imageKnifeData; this.retryholderData = imageKnifeData;
if (this.loadRetryReady) { if (this.loadRetryReady) {
this.retryholderFunc.asyncSuccess(imageKnifeData) if(this.retryholderFunc != undefined) {
this.retryholderFunc?.asyncSuccess(imageKnifeData)
}
} }
} }
retryholderOnError = (error)=>{ retryholderOnError = (error:BusinessError|string)=>{
LogUtil.log("重试占位图解析失败 error =" + error) LogUtil.log("重试占位图解析失败 error =" + error)
} }
loadComplete = (imageKnifeData: ImageKnifeData)=>{ loadComplete = (imageKnifeData: ImageKnifeData)=>{
this.loadMainReady = true; this.loadMainReady = true;
// 三级缓存数据加载成功 // 三级缓存数据加载成功
for (let requestListener of this.requestListeners) { if(this.requestListeners != undefined) {
var ret = requestListener.callback("", imageKnifeData); for (let i = 0;i < this.requestListeners.length; i++) {
if (ret) { let requestListener = this.requestListeners[i];
break; let boolInterception = requestListener.callback("", imageKnifeData);
if (boolInterception) {
break;
}
} }
} }
@ -438,16 +478,22 @@ export class RequestOption {
// 等落盘结束后主动调用#removeCurrentAndSearchNext方法 // 等落盘结束后主动调用#removeCurrentAndSearchNext方法
}else{ }else{
// 非落盘情况,直接进行寻找下一个加载 // 非落盘情况,直接进行寻找下一个加载
(ImageKnifeGlobal.getInstance().getImageKnife()).removeRunning(this); if(ImageKnifeGlobal.getInstance().getImageKnife() != undefined) {
(ImageKnifeGlobal.getInstance().getImageKnife())?.removeRunning(this);
}
} }
// 加载成功之后 // 加载成功之后
(ImageKnifeGlobal.getInstance().getImageKnife()).removeRunning(this); if(ImageKnifeGlobal.getInstance().getImageKnife() != undefined) {
(ImageKnifeGlobal.getInstance().getImageKnife())?.removeRunning(this);
}
} }
// 图片文件落盘之后会自动去寻找下一个数据加载 // 图片文件落盘之后会自动去寻找下一个数据加载
removeCurrentAndSearchNext =()=>{ removeCurrentAndSearchNext =()=>{
(ImageKnifeGlobal.getInstance().getImageKnife()).removeRunning(this); if(ImageKnifeGlobal.getInstance().getImageKnife() != undefined) {
(ImageKnifeGlobal.getInstance().getImageKnife())?.removeRunning(this);
}
} }
loadError = (err:BusinessError|string)=>{ loadError = (err:BusinessError|string)=>{
@ -463,11 +509,15 @@ export class RequestOption {
// 失败图层标记,如果已经有数据直接展示失败图层 // 失败图层标记,如果已经有数据直接展示失败图层
this.loadErrorReady = true; this.loadErrorReady = true;
if (this.errorholderData != null) { if (this.errorholderData != null) {
this.errorholderFunc.asyncSuccess(this.errorholderData) if(this.errorholderFunc != undefined) {
this.errorholderFunc.asyncSuccess(this.errorholderData)
}
} }
} }
// 加载失败之后 // 加载失败之后
(ImageKnifeGlobal.getInstance().getImageKnife()).removeRunning(this); if(ImageKnifeGlobal.getInstance().getImageKnife() != undefined) {
(ImageKnifeGlobal.getInstance().getImageKnife())?.removeRunning(this);
}
} }
} }