diff --git a/imageknife/index.ets b/imageknife/index.ets index 5d0c3ac..bbce11a 100644 --- a/imageknife/index.ets +++ b/imageknife/index.ets @@ -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/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/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 type {IAllCacheInfoCallback} from './src/main/ets/components/imageknife/interface/IAllCacheInfoCallback' export type {AllCacheInfo} from './src/main/ets/components/imageknife/interface/IAllCacheInfoCallback' diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnife.ets b/imageknife/src/main/ets/components/imageknife/ImageKnife.ets index cffa632..6244b91 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnife.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnife.ets @@ -26,23 +26,24 @@ import {RequestManager} from "../imageknife/requestmanage/RequestManager" import {NONE} from "../cache/diskstrategy/enum/NONE" import {FileTypeUtil} from '../imageknife/utils/FileTypeUtil' import {DownloadClient} from '../imageknife/networkmanage/DownloadClient' -import type {IDataFetch} from '../imageknife/networkmanage/IDataFetch' +import {IDataFetch} from '../imageknife/networkmanage/IDataFetch' 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 {ImageKnifeGlobal} from '../imageknife/ImageKnifeGlobal' import image from "@ohos.multimedia.image" import {CompressBuilder} from "../imageknife/compress/CompressBuilder" import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' import {LogUtil} from '../imageknife/utils/LogUtil' +import worker from '@ohos.worker' export class ImageKnife { static readonly SEPARATOR: string = '/' - private memoryCache: LruCache; + private memoryCache: LruCache; private diskMemoryCache: DiskLruCache; private dataFetch: IDataFetch; - private resourceFetch: IResourceFetch; + private resourceFetch: IResourceFetch; private filesPath: string = ""; // data/data/包名/files目录 @@ -56,9 +57,9 @@ export class ImageKnife { private defaultListener: AsyncCallback; // 全局监听器 // gifWorker - private gifWorker; + private gifWorker: worker.ThreadWorker|undefined = undefined; - private defaultLifeCycle: IDrawLifeCycle; + private defaultLifeCycle: IDrawLifeCycle|undefined = undefined; // 开发者可配置全局缓存 private engineKeyImpl: EngineKeyInterface; @@ -66,7 +67,7 @@ export class ImageKnife { private constructor() { // 构造方法传入size 为保存文件个数 - this.memoryCache = new LruCache(100); + this.memoryCache = new LruCache(100); // 创建disk缓存 传入的size 为多少比特 比如20KB 传入20*1024 this.diskMemoryCache = DiskLruCache.create(ImageKnifeGlobal.getInstance().getHapContext()); @@ -89,7 +90,7 @@ export class ImageKnife { this.engineKeyImpl = new EngineKeyFactories(); } - getMemoryCache(): LruCache{ + getMemoryCache(): LruCache{ return this.memoryCache; } @@ -125,7 +126,7 @@ export class ImageKnife { return ImageKnifeGlobal.getInstance().getHapContext(); } - setMemoryCache(lrucache: LruCache) { + setMemoryCache(lrucache: LruCache) { this.memoryCache = lrucache; } @@ -133,7 +134,7 @@ export class ImageKnife { return this.defaultListener; } - setGifWorker(worker){ + setGifWorker(worker:worker.ThreadWorker){ this.gifWorker = worker } getGifWorker(){ @@ -165,10 +166,10 @@ export class ImageKnife { // 替代原来的LruCache public replaceLruCache(size:number){ if(this.memoryCache.map.size() <= 0) { - this.memoryCache = new LruCache(size); + this.memoryCache = new LruCache(size); }else{ - let newLruCache = new LruCache(size); - this.memoryCache.foreachLruCache(function (value, key, map) { + let newLruCache = new LruCache(size); + this.memoryCache.foreachLruCache( (value:ImageKnifeData, key:string, map:Object)=> { newLruCache.put(key, value); }) this.memoryCache = newLruCache; @@ -185,7 +186,7 @@ export class ImageKnife { this.diskMemoryCache = DiskLruCache.create(ImageKnifeGlobal.getInstance().getHapContext(), size); } else { 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); }) this.diskMemoryCache = newDiskLruCache; @@ -193,7 +194,7 @@ export class ImageKnife { } // 预加载 resource资源一级缓存，string资源实现二级缓存 - preload(request: RequestOption) { + preload(request: RequestOption):void { // 每个request 公共信息补充 request.setFilesPath(this.filesPath); @@ -201,7 +202,7 @@ export class ImageKnife { } // 正常加载 - call(request: RequestOption) { + call(request: RequestOption):void { // 添加全局监听 if(this.defaultListener) { request.addListener(this.defaultListener) @@ -227,10 +228,10 @@ export class ImageKnife { } loadResources(request: RequestOption) { - let factories; - let cacheKey; - let transferKey; - let dataKey; + let factories:EngineKeyInterface; + let cacheKey:string; + let transferKey:string; + let dataKey:string; if(this.engineKeyImpl){ factories = this.engineKeyImpl; }else { @@ -331,7 +332,7 @@ export class ImageKnife { // 加载下一个key的请求 - loadNextPending(request) { + loadNextPending(request:RequestOption) { // 首先寻找被移除key相同的request let index = -1; for (let i = 0; i < this.pendingRequest.length; i++) { @@ -422,7 +423,7 @@ export class ImageKnife { return false; } - parseSource(request: RequestOption) { + parseSource(request: RequestOption):void { if ((typeof (request.loadSrc as image.PixelMap).isEditable) == 'boolean') { let imageKnifeData = ImageKnifeData.createImagePixelMap(ImageKnifeType.PIXELMAP, request.loadSrc as PixelMap) request.loadComplete(imageKnifeData); diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets index 7ee3017..88ec7d6 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeComponent.ets @@ -16,12 +16,12 @@ import { ImageKnifeOption } from '../imageknife/ImageKnifeOption' import { ImageKnifeGlobal } from '../imageknife/ImageKnifeGlobal' import { TransformType } from '../imageknife/transform/TransformType' -import { RequestOption } from '../imageknife/RequestOption' +import { RequestOption, Size } from '../imageknife/RequestOption' import { ImageKnifeData } from '../imageknife/ImageKnifeData' import { GIFFrame } from '../imageknife/utils/gif/GIFFrame' import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' import { LogUtil } from '../imageknife/utils/LogUtil' - +import { BusinessError } from '@ohos.base' @Component export struct ImageKnifeComponent { @@ -79,7 +79,8 @@ export struct ImageKnifeComponent { } private canvasHasReady: 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() { Canvas(this.context) @@ -105,11 +106,12 @@ export struct ImageKnifeComponent { this.canvasHasReady = true; if (this.onReadyNext) { LogUtil.log('ImageKnifeComponent onReadyNext is running!') - this.onReadyNext() + this.onReadyNext(this.onReadyNextData) this.onReadyNext = undefined; + this.onReadyNextData = undefined } }) - .onClick((event: ClickEvent) => { + .onClick((event?: ClickEvent) => { // 需要将点击事件回传 if (this.imageKnifeOption.onClick) { this.imageKnifeOption.onClick(event) @@ -153,25 +155,26 @@ export struct ImageKnifeComponent { * 待onReady执行的时候执行 * @param nextFunction 下一个方法 */ - runNextFunction(nextFunction: () => void) { + runNextFunction(nextFunction: (data:ImageKnifeData|number|undefined) => void,data:ImageKnifeData|number|undefined) { if (!this.canvasHasReady) { // canvas未初始化完成 this.onReadyNext = nextFunction; + this.onReadyNextData = data; } else { - nextFunction(); + nextFunction(data); } } configNecessary(request: RequestOption) { request.load(this.imageKnifeOption.loadSrc) - .addListener({ callback: (err, data) => { + .addListener({ callback: (err:BusinessError|string, data:ImageKnifeData) => { LogUtil.log('ImageKnifeComponent request.load callback') - this.runNextFunction(this.displayMainSource.bind(this, data)); + this.runNextFunction(this.displayMainSource,data); return false; } }) - let realSize = { + let realSize:Size = { width: this.currentWidth, height: this.currentHeight } @@ -198,22 +201,22 @@ export struct ImageKnifeComponent { configDisplay(request: RequestOption) { 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') - this.runNextFunction(this.displayPlaceholder.bind(this, data)) + this.runNextFunction(this.displayPlaceholder,data) } }) } 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') - this.runNextFunction(this.displayThumbSizeMultiplier.bind(this, data)) + this.runNextFunction(this.displayThumbSizeMultiplier,data) }}, this.imageKnifeOption.thumbSizeDelay) } 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') - this.runNextFunction(this.displayErrorholder.bind(this, data)) + this.runNextFunction(this.displayErrorholder,data) }}) } @@ -235,15 +238,15 @@ export struct ImageKnifeComponent { request.addProgressListener({asyncSuccess:(percentValue: number) => { // 如果进度条百分比 未展示大小,展示其动画 LogUtil.log('ImageKnifeComponent request.addProgressListener callback') - this.runNextFunction(this.displayProgress.bind(this, percentValue)) + this.runNextFunction(this.displayProgress,percentValue) }}) } 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') 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.configDisplay(request); this.configRenderGpu(request); - ImageKnifeGlobal.getInstance().getImageKnife().call(request); + if(ImageKnifeGlobal.getInstance().getImageKnife()!=undefined) { + ImageKnifeGlobal.getInstance().getImageKnife()?.call(request); + } } - displayPlaceholder(data: ImageKnifeData) { - if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayPlaceholder', this.context, data, this.imageKnifeOption, + displayPlaceholder = (data: ImageKnifeData|number|undefined)=> { + if(data == undefined || typeof data == 'number'){ + return + } + if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayPlaceholder', this.context, data, this.imageKnifeOption, + },this.imageKnifeOption.drawLifeCycle)) { + if (!this.drawLifeCycleHasConsumed( 'displayPlaceholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - this.defaultLifeCycle.displayPlaceholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { - this.setGifTimeId(gifTimeId) - }) + },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { + if(this.defaultLifeCycle.displayPlaceholder != undefined) { + this.defaultLifeCycle.displayPlaceholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { + this.setGifTimeId(gifTimeId) + }) + } } } } - displayProgress(percent: number) { - if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayProgress', this.context, percent, this.imageKnifeOption, + displayProgress = (percent: ImageKnifeData|number|undefined)=> { + if(typeof percent != 'number'){ + return + } + if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayProgress', this.context, percent, this.imageKnifeOption, + },this.imageKnifeOption.drawLifeCycle)) { + if (!this.drawLifeCycleHasConsumed( 'displayProgress', this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - this.defaultLifeCycle.displayProgress(this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { - this.setGifTimeId(gifTimeId) - }) + },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { + if(this.defaultLifeCycle.displayProgress != undefined) { + this.defaultLifeCycle.displayProgress(this.context, percent, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { + this.setGifTimeId(gifTimeId) + }) + } } } } - displayThumbSizeMultiplier(data: ImageKnifeData) { - if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, + displayThumbSizeMultiplier = (data: ImageKnifeData|number|undefined)=> { + if(data == undefined || typeof data == 'number'){ + return + } + if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, + },this.imageKnifeOption.drawLifeCycle)) { + if (!this.drawLifeCycleHasConsumed( 'displayThumbSizeMultiplier', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - this.defaultLifeCycle.displayThumbSizeMultiplier(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { - this.setGifTimeId(gifTimeId) - }) + },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { + if(this.defaultLifeCycle.displayThumbSizeMultiplier != undefined) { + this.defaultLifeCycle.displayThumbSizeMultiplier(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { + this.setGifTimeId(gifTimeId) + }) + } } } } - displayMainSource(data: ImageKnifeData) { - if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayMainSource', this.context, data, this.imageKnifeOption, + displayMainSource = (data: ImageKnifeData|number|undefined)=> { + if(data == undefined || typeof data == 'number'){ + return + } + if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayMainSource', this.context, data, this.imageKnifeOption, + },this.imageKnifeOption.drawLifeCycle)) { + if (!this.drawLifeCycleHasConsumed( 'displayMainSource', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - this.defaultLifeCycle.displayMainSource(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { - this.setGifTimeId(gifTimeId) - }) + },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { + if(this.defaultLifeCycle.displayMainSource != undefined) { + this.defaultLifeCycle.displayMainSource(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { + this.setGifTimeId(gifTimeId) + }) + } } } } - displayRetryholder(data: ImageKnifeData) { - if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayRetryholder', this.context, data, this.imageKnifeOption, + displayRetryholder = (data: ImageKnifeData|number)=> { + if(data == undefined || typeof data == 'number'){ + return + } + if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayRetryholder', this.context, data, this.imageKnifeOption, + },this.imageKnifeOption.drawLifeCycle)) { + if (!this.drawLifeCycleHasConsumed( 'displayRetryholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - this.defaultLifeCycle.displayRetryholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { - this.setGifTimeId(gifTimeId) - }) + },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { + if( this.defaultLifeCycle.displayRetryholder != undefined) { + this.defaultLifeCycle.displayRetryholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { + this.setGifTimeId(gifTimeId) + }) + } } } } - displayErrorholder(data: ImageKnifeData) { - if (!this.drawLifeCycleHasConsumed(this.imageKnifeOption.drawLifeCycle, 'displayErrorholder', this.context, data, this.imageKnifeOption, + displayErrorholder = (data: ImageKnifeData|number)=> { + if(data == undefined || typeof data == 'number'){ + return + } + if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - if (!this.drawLifeCycleHasConsumed((ImageKnifeGlobal.getInstance().getImageKnife()).getDefaultLifeCycle(), 'displayErrorholder', this.context, data, this.imageKnifeOption, + },this.imageKnifeOption.drawLifeCycle)) { + if (!this.drawLifeCycleHasConsumed( 'displayErrorholder', this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { this.setGifTimeId(gifTimeId) - })) { - this.defaultLifeCycle.displayErrorholder(this.context, data, this.imageKnifeOption, this.currentWidth, this.currentHeight, (gifTimeId) => { - this.setGifTimeId(gifTimeId) - }) + },(ImageKnifeGlobal.getInstance().getImageKnife())?.getDefaultLifeCycle())) { + if(this.defaultLifeCycle.displayErrorholder != undefined) { + 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) { 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) let scaleType = (typeof imageKnifeOption.placeholderScaleType == 'number') ? imageKnifeOption.placeholderScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) - ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) + ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); 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) { 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) let scaleType = (typeof imageKnifeOption.thumbSizeMultiplierScaleType == 'number') ? imageKnifeOption.thumbSizeMultiplierScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) - ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) + ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); 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) { LogUtil.log('ImageKnifeComponent default drawMainSource start!') 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 LogUtil.log('ImageKnifeComponent imageinfo width =' + imageInfo.size.width + ' height=' + imageInfo.size.height + 'scaleType=' + scaleType) context.save(); context.clearRect(0, 0, compWidth, compHeight) - ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) + ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); 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) { 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) let scaleType = (typeof imageKnifeOption.retryholderScaleType == 'number') ? imageKnifeOption.retryholderScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) - ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) + ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); 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) { 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) let scaleType = (typeof imageKnifeOption.errorholderSrcScaleType == 'number') ? imageKnifeOption.errorholderSrcScaleType : ScaleType.FIT_CENTER context.save(); context.clearRect(0, 0, compWidth, compHeight) - ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) + ScaleTypeHelper.drawImageWithScaleType(context, scaleType, data.drawPixelMap?.imagePixelMap, px2vp(imageInfo.size.width), px2vp(imageInfo.size.height), compWidth, compHeight, 0, 0) context.restore(); LogUtil.log('ImageKnifeComponent default drawErrorholder end!') }) } requestAddTransform(request: RequestOption) { - if (TransformType.BlurTransformation == this.imageKnifeOption.transform.transformType) { - request.blur(this.imageKnifeOption.transform.blur) - } else if (TransformType.BrightnessFilterTransformation == this.imageKnifeOption.transform.transformType) { - request.brightnessFilter(this.imageKnifeOption.transform.brightnessFilter) - } else if (TransformType.ContrastFilterTransformation == this.imageKnifeOption.transform.transformType) { - request.contrastFilter(this.imageKnifeOption.transform.contrastFilter) - } else if (TransformType.CropCircleTransformation == this.imageKnifeOption.transform.transformType) { + if (TransformType.BlurTransformation == this.imageKnifeOption.transform?.transformType) { + request.blur(this.imageKnifeOption.transform?.blur) + } else if (TransformType.BrightnessFilterTransformation == this.imageKnifeOption.transform?.transformType) { + request.brightnessFilter(this.imageKnifeOption.transform?.brightnessFilter) + } else if (TransformType.ContrastFilterTransformation == this.imageKnifeOption.transform?.transformType) { + request.contrastFilter(this.imageKnifeOption.transform?.contrastFilter) + } else if (TransformType.CropCircleTransformation == this.imageKnifeOption.transform?.transformType) { request.cropCircle() - } else if (TransformType.CropCircleWithBorderTransformation == this.imageKnifeOption.transform.transformType) { - request.cropCircleWithBorder(this.imageKnifeOption.transform.cropCircleWithBorder.border, this.imageKnifeOption.transform.cropCircleWithBorder.obj) - } else if (TransformType.CropSquareTransformation == this.imageKnifeOption.transform.transformType) { + } else if (TransformType.CropCircleWithBorderTransformation == this.imageKnifeOption.transform?.transformType) { + request.cropCircleWithBorder(this.imageKnifeOption.transform?.cropCircleWithBorder?.border, this.imageKnifeOption.transform?.cropCircleWithBorder?.obj) + } else if (TransformType.CropSquareTransformation == this.imageKnifeOption.transform?.transformType) { request.cropSquare() - } 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) - } else if (TransformType.GrayscaleTransformation == 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) + } else if (TransformType.GrayscaleTransformation == this.imageKnifeOption.transform?.transformType) { request.grayscale() - } else if (TransformType.InvertFilterTransformation == this.imageKnifeOption.transform.transformType) { + } else if (TransformType.InvertFilterTransformation == this.imageKnifeOption.transform?.transformType) { request.invertFilter() - } else if (TransformType.MaskTransformation == this.imageKnifeOption.transform.transformType) { - request.mask(this.imageKnifeOption.transform.mask) - } else if (TransformType.PixelationFilterTransformation == this.imageKnifeOption.transform.transformType) { - request.pixelationFilter(this.imageKnifeOption.transform.pixelationFilter) - } else if (TransformType.RotateImageTransformation == this.imageKnifeOption.transform.transformType) { - request.rotateImage(this.imageKnifeOption.transform.rotateImage) - } else if (TransformType.RoundedCornersTransformation == this.imageKnifeOption.transform.transformType) { - request.roundedCorners(this.imageKnifeOption.transform.roundedCorners) - } else if (TransformType.SepiaFilterTransformation == this.imageKnifeOption.transform.transformType) { + } else if (TransformType.MaskTransformation == this.imageKnifeOption.transform?.transformType) { + request.mask(this.imageKnifeOption.transform?.mask) + } else if (TransformType.PixelationFilterTransformation == this.imageKnifeOption.transform?.transformType) { + request.pixelationFilter(this.imageKnifeOption.transform?.pixelationFilter) + } else if (TransformType.RotateImageTransformation == this.imageKnifeOption.transform?.transformType) { + request.rotateImage(this.imageKnifeOption.transform?.rotateImage) + } else if (TransformType.RoundedCornersTransformation == this.imageKnifeOption.transform?.transformType) { + request.roundedCorners(this.imageKnifeOption.transform?.roundedCorners) + } else if (TransformType.SepiaFilterTransformation == this.imageKnifeOption.transform?.transformType) { request.sepiaFilter() - } else if (TransformType.SketchFilterTransformation == this.imageKnifeOption.transform.transformType) { + } else if (TransformType.SketchFilterTransformation == this.imageKnifeOption.transform?.transformType) { request.sketchFilter() - } else if (TransformType.SwirlFilterTransformation == this.imageKnifeOption.transform.transformType) { - request.swirlFilter(this.imageKnifeOption.transform.swirlFilter) - } else if (TransformType.CenterCrop == this.imageKnifeOption.transform.transformType) { + } else if (TransformType.SwirlFilterTransformation == this.imageKnifeOption.transform?.transformType) { + request.swirlFilter(this.imageKnifeOption.transform?.swirlFilter) + } else if (TransformType.CenterCrop == this.imageKnifeOption.transform?.transformType) { request.centerCrop() - } else if (TransformType.CenterInside == this.imageKnifeOption.transform.transformType) { + } else if (TransformType.CenterInside == this.imageKnifeOption.transform?.transformType) { request.centerInside() - } else if (TransformType.FitCenter == this.imageKnifeOption.transform.transformType) { + } else if (TransformType.FitCenter == this.imageKnifeOption.transform?.transformType) { request.fitCenter() } } @@ -562,17 +597,17 @@ export struct ImageKnifeComponent { this.gifTimerId = timeId; } - private drawLifeCycleHasConsumed(drawLifeCycle: IDrawLifeCycle, methodName: string, - context: CanvasRenderingContext2D, data: K, imageKnifeOption: T, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void - ) { - if (drawLifeCycle && drawLifeCycle[methodName]) { - return drawLifeCycle[methodName](context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId) + private drawLifeCycleHasConsumed( methodName: string, + context: CanvasRenderingContext2D, data: K, imageKnifeOption: T, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void,drawLifeCycle?: IDrawLifeCycle + ):boolean { + if (drawLifeCycle && (drawLifeCycle as Record)[methodName]) { + return (drawLifeCycle as Record)[methodName](context, data, imageKnifeOption, compWidth, compHeight, setGifTimeId) } return false; } 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); if (imageKnifeOption.gif && (typeof (imageKnifeOption.gif.seekTo) == 'number') && imageKnifeOption.gif.seekTo >= 0) { this.autoPlay = false; @@ -581,7 +616,14 @@ export struct ImageKnifeComponent { } else { this.autoPlay = true 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非第一帧数据可能是不全的，这里采用逐帧渲染的方式来绘制保证图像的完整性 */ private drawSeekToFrame(frames: GIFFrame[], context: CanvasRenderingContext2D, compWidth: number, compHeight: number) { - for (let i = 0; i < this.imageKnifeOption.gif.seekTo; i++) { - this.drawFrame(frames, i, context, compWidth, compHeight); + if(this.imageKnifeOption.gif != undefined && this.imageKnifeOption.gif.seekTo != undefined) { + 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) { - LogUtil.log('ImageKnifeComponent renderFrames frames length =' + frames.length) + renderFrames_frames: GIFFrame[] | undefined = undefined + 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(); - if (index === 0) { + if (this.renderFrames_index === 0) { // 如果是第一帧，我们只从开始渲染前记录时间 this.startGifLoopTime = start; } // 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动图只有一帧的情况下，不进行后面代码的逐帧绘制循环 - if (frames.length <= 1) { + if (this.renderFrames_frames.length <= 1) { return } @@ -622,9 +672,9 @@ export struct ImageKnifeComponent { 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) { - 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)); @@ -636,17 +686,22 @@ export struct ImageKnifeComponent { // 整个gif累计的时长; this.gifLoopDuration += loopStayTime; // 返回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.gifLoopDuration = 0; } // update the frame index - index++ - if (index >= frames.length) { - index = 0; + this.renderFrames_index++ + if (this.renderFrames_index >= this.renderFrames_frames.length) { + 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 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); } } else { @@ -733,7 +789,7 @@ export enum ScaleType { export class ScaleTypeHelper { - static drawImageWithScaleType(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX: number, imageOffsetY: number) { + static drawImageWithScaleType(context: CanvasRenderingContext2D, scaleType: ScaleType, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX: number, imageOffsetY: number) { let scaleW = compWidth / imageWidth let scaleH = compHeight / imageHeight let minScale = scaleW > scaleH ? scaleH : scaleW @@ -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) - let dx = 0 - let dy = 0 - let dw = imageWidth; - let dh = imageHeight; - context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) + let dx:number = 0 + let dy:number = 0 + let dw:number = imageWidth; + let dh:number = imageHeight; + 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) - let dx = (compWidth - imageWidth * minScale) / (minScale * 1.0); - let dy = (compHeight - imageHeight * minScale) / (minScale * 1.0); - let dw = imageWidth; - let dh = imageHeight; - - context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) + let dx:number = (compWidth - imageWidth * minScale) / (minScale * 1.0); + let dy:number = (compHeight - imageHeight * minScale) / (minScale * 1.0); + let dw:number = imageWidth; + let dh:number = imageHeight; + if(source!= undefined) { + 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) - let dx = (compWidth - imageWidth * minScale) / (minScale * 2.0); - let dy = (compHeight - imageHeight * minScale) / (minScale * 2.0); - let dw = imageWidth; - let dh = imageHeight; - - context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) + let dx:number = (compWidth - imageWidth * minScale) / (minScale * 2.0); + let dy:number = (compHeight - imageHeight * minScale) / (minScale * 2.0); + let dw:number = imageWidth; + let dh:number = imageHeight; + if(source!= undefined) { + 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) { - let dx = (compWidth - imageWidth) / 2.0; - let dy = (compHeight - imageHeight) / 2.0; - let dw = imageWidth; - let dh = imageHeight; - context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) + static drawCenter(context: CanvasRenderingContext2D, source: PixelMap | undefined, imageWidth: number, imageHeight: number, compWidth: number, compHeight: number, imageOffsetX?: number, imageOffsetY?: number) { + let dx:number = (compWidth - imageWidth) / 2.0; + let dy:number = (compHeight - imageHeight) / 2.0; + let dw:number = imageWidth; + let dh:number = imageHeight; + 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) - let dx = (compWidth - imageWidth * maxScale) / (maxScale * 2.0); - let dy = (compHeight - imageHeight * maxScale) / (maxScale * 2.0); - let dw = imageWidth; - let dh = imageHeight; - context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) + let dx:number = (compWidth - imageWidth * maxScale) / (maxScale * 2.0); + let dy:number = (compHeight - imageHeight * maxScale) / (maxScale * 2.0); + let dw:number = imageWidth; + let dh:number = imageHeight; + 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) - let dx = 0; - let dy = 0; - let dw = imageWidth; - let dh = imageHeight; - context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) + let dx:number = 0; + let dy:number = 0; + let dw:number = imageWidth; + let dh:number = imageHeight; + 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) { ScaleTypeHelper.drawFitCenter(context, source, minScale, imageWidth, imageHeight, compWidth, compHeight, imageOffsetX, imageOffsetY) } else { @@ -835,13 +901,15 @@ export class ScaleTypeHelper { } } - static drawNone(context: CanvasRenderingContext2D, source: PixelMap | ImageBitmap, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) { - let dx = 0; - let dy = 0; - let dw = imageWidth; - let dh = imageHeight; - context.drawImage(source, dx + imageOffsetX, dy + imageOffsetY) - } + static drawNone(context: CanvasRenderingContext2D, source: PixelMap | undefined, imageWidth: number, imageHeight: number, imageOffsetX?: number, imageOffsetY?: number) { + let dx:number = 0; + let dy:number = 0; + let dw:number = imageWidth; + let dh:number = imageHeight; + if(source!= undefined) { + context.drawImage(source, dx + (imageOffsetX != undefined ? imageOffsetX : 0), dy + (imageOffsetY != undefined ? imageOffsetY : 0)) + } + } } diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeData.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeData.ets index 7a3ff5b..d291b67 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeData.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeData.ets @@ -22,19 +22,19 @@ export enum ImageKnifeType { } export class DrawPixelMap { - imagePixelMap: PixelMap + imagePixelMap: PixelMap | undefined = undefined } export class DrawString { - imageString: string + imageString: string | undefined = undefined } export class DrawResource { - imageResource: Resource + imageResource: Resource | undefined = undefined } export class DrawGIFFrame { - imageGIFFrames: GIFFrame[] + imageGIFFrames: GIFFrame[] | undefined = undefined } export class ImageKnifeData { @@ -47,11 +47,11 @@ export class ImageKnifeData { waitSaveDisk = false; - imageKnifeType: ImageKnifeType; - drawPixelMap: DrawPixelMap; - drawGIFFrame: DrawGIFFrame; - drawResource: DrawResource; - drawString: DrawString; + imageKnifeType: ImageKnifeType | undefined = undefined; + drawPixelMap: DrawPixelMap | undefined = undefined; + drawGIFFrame: DrawGIFFrame | undefined = undefined; + drawResource: DrawResource | undefined = undefined; + drawString: DrawString | undefined = undefined; static createImagePixelMap(type: ImageKnifeType, value: PixelMap) { let data = new ImageKnifeData(); diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets index 3b6cf52..efe31c0 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeDrawFactory.ets @@ -26,10 +26,10 @@ export class ImageKnifeDrawFactory{ * @param colorString 例如 "#FF00FF" */ 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) => { - // @ts-ignore + return false; }, // 展示加载进度 @@ -38,14 +38,14 @@ export class ImageKnifeDrawFactory{ }, // 展示缩略图 displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { - // @ts-ignore + return false; }, // 展示主图 displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { if (data.isPixelMap()) { - // @ts-ignore + data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER @@ -60,7 +60,7 @@ export class ImageKnifeDrawFactory{ context.save(); context.globalCompositeOperation = 'destination-in' 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.fill() context.restore(); @@ -72,7 +72,7 @@ export class ImageKnifeDrawFactory{ context.lineWidth = borderWidth; context.globalCompositeOperation = 'source-over' 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.stroke() context.restore(); @@ -189,10 +189,10 @@ export class ImageKnifeDrawFactory{ * @param connerRadius 圆角半径 */ 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) => { - // @ts-ignore + return false; }, // 展示加载进度 @@ -201,14 +201,14 @@ export class ImageKnifeDrawFactory{ }, // 展示缩略图 displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { - // @ts-ignore + return false; }, // 展示主图 displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { if (data.isPixelMap()) { - // @ts-ignore + data.drawPixelMap.imagePixelMap.getImageInfo().then((imageInfo) => { let scaleType = (typeof imageKnifeOption.mainScaleType == 'number') ? imageKnifeOption.mainScaleType : ScaleType.FIT_CENTER @@ -223,7 +223,7 @@ export class ImageKnifeDrawFactory{ // 通过 destination-in 裁剪出圆角 context.save(); 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.restore(); if(borderWidth > 0){ @@ -232,7 +232,7 @@ export class ImageKnifeDrawFactory{ context.strokeStyle = colorString context.lineWidth = borderWidth 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.restore(); } @@ -284,21 +284,21 @@ export class ImageKnifeDrawFactory{ y1 = borderWidth/2 w1 = imageWidth * minScale - borderWidth; h1 = imageHeight * minScale - borderWidth; - this.roundRect(context, x1, y1, w1, h1, cornerRadius) + ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius) break case ScaleType.FIT_END: x1 = compWidth - imageWidth * minScale + borderWidth / 2 y1 = compHeight - imageHeight * minScale + borderWidth / 2 w1 = imageWidth * minScale - borderWidth; h1 = imageHeight * minScale - borderWidth; - this.roundRect(context, x1, y1, w1, h1, cornerRadius) + ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius) break case ScaleType.FIT_CENTER: x1 = (compWidth - imageWidth * minScale) / 2 + borderWidth / 2 y1 = (compHeight - imageHeight * minScale) / 2 + borderWidth / 2 w1 = imageWidth * minScale - borderWidth h1 = imageHeight * minScale - borderWidth - this.roundRect(context, x1, y1, w1, h1, cornerRadius) + ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius) break case ScaleType.CENTER: 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; h1 = Math.min(compHeight, imageHeight) - borderWidth; - this.roundRect(context, x1, y1, w1, h1, cornerRadius) + ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius) break case ScaleType.CENTER_CROP: x1 = borderWidth/2 @@ -315,7 +315,7 @@ export class ImageKnifeDrawFactory{ w1 = compWidth - borderWidth; h1 = compHeight - borderWidth; - this.roundRect(context, x1, y1, w1, h1, cornerRadius) + ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius) break case ScaleType.FIT_XY: x1 = borderWidth/2 @@ -323,7 +323,7 @@ export class ImageKnifeDrawFactory{ w1 = compWidth - borderWidth; h1 = compHeight - borderWidth; - this.roundRect(context, x1, y1, w1, h1, cornerRadius) + ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius) break case ScaleType.CENTER_INSIDE: if(minScale < 1){ // FIT_CENTER @@ -331,7 +331,7 @@ export class ImageKnifeDrawFactory{ y1 = (compHeight - imageHeight * minScale) / 2 + borderWidth / 2 w1 = imageWidth * minScale - borderWidth h1 = imageHeight * minScale - borderWidth - this.roundRect(context, x1, y1, w1, h1, cornerRadius) + ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius) }else{ // CENTER x1 = Math.max(0,(compWidth - Math.min(compWidth, imageWidth)))/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; h1 = Math.min(compHeight, imageHeight) - borderWidth; - this.roundRect(context, x1, y1, w1, h1, cornerRadius) + ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius) } break; @@ -351,7 +351,7 @@ export class ImageKnifeDrawFactory{ w1 = Math.min(compWidth, imageWidth) - borderWidth; h1 = Math.min(compHeight, imageHeight) - borderWidth; - this.roundRect(context, x1, y1, w1, h1, cornerRadius) + ImageKnifeDrawFactory.roundRect(context, x1, y1, w1, h1, cornerRadius) break; } } @@ -390,36 +390,36 @@ export class ImageKnifeDrawFactory{ let viewLifeCycle: IDrawLifeCycle = { // 展示占位图 displayPlaceholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { - // @ts-ignore + return false; }, // 展示加载进度 displayProgress: (context: CanvasRenderingContext2D, progress: number, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { - // @ts-ignore - this.drawDefaultProgress(context, progress, imageKnifeOption, compWidth, compHeight,fontColor,fontSizeRate,setGifTimeId) + + ImageKnifeDrawFactory.drawDefaultProgress(context, progress, imageKnifeOption, compWidth, compHeight,fontColor,fontSizeRate,setGifTimeId) return true; }, // 展示缩略图 displayThumbSizeMultiplier: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { - // @ts-ignore + return false; }, // 展示主图 displayMainSource: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { - // @ts-ignore + return false; }, // 展示重试图层 displayRetryholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { - // @ts-ignore + return false; }, // 展示失败占位图 displayErrorholder: (context: CanvasRenderingContext2D, data: ImageKnifeData, imageKnifeOption: ImageKnifeOption, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void) => { - // @ts-ignore + return false; } } diff --git a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets index 3c39d3d..0595b39 100644 --- a/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets +++ b/imageknife/src/main/ets/components/imageknife/ImageKnifeOption.ets @@ -22,12 +22,44 @@ import { CropType } from '../imageknife/transform/CropTransformation' import { AllCacheInfo, IAllCacheInfoCallback } from '../imageknife/interface/IAllCacheInfoCallback' import { IDrawLifeCycle } from '../imageknife/interface/IDrawLifeCycle' 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 export class ImageKnifeOption { // 主图资源 - loadSrc: string | PixelMap | Resource; + loadSrc: string | PixelMap | Resource = ''; mainScaleType?: ScaleType = ScaleType.FIT_CENTER enableGpu?:boolean = true; @@ -77,43 +109,11 @@ export class ImageKnifeOption { // 设置点击事件回调 onClick?:(event?: ClickEvent) => void - gif?: { - loopFinish?: (loopTime?) => void - speedFactory?: number - seekTo?: number - } + gif?: GifOptions = undefined; // 变换相关 不推荐使用该接口 建议直接使用transformation transformations这2个接口实现 - transform?: { - 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 - } + transform?:TransformOptions = undefined transformation?: BaseTransform; transformations?: Array>; diff --git a/imageknife/src/main/ets/components/imageknife/RequestOption.ets b/imageknife/src/main/ets/components/imageknife/RequestOption.ets index 72682c1..2c6089c 100644 --- a/imageknife/src/main/ets/components/imageknife/RequestOption.ets +++ b/imageknife/src/main/ets/components/imageknife/RequestOption.ets @@ -14,9 +14,9 @@ */ import { DiskStrategy } from "../cache/diskstrategy/DiskStrategy" -import type { AsyncCallback } from "../imageknife/interface/AsyncCallback" -import type { AsyncSuccess } from "../imageknife/interface/AsyncSuccess" -import type { IAllCacheInfoCallback } from "../imageknife/interface/IAllCacheInfoCallback" +import { AsyncCallback } from "../imageknife/interface/AsyncCallback" +import { AsyncSuccess } from "../imageknife/interface/AsyncSuccess" +import { IAllCacheInfoCallback } from "../imageknife/interface/IAllCacheInfoCallback" import { AUTOMATIC } from "../cache/diskstrategy/enum/AUTOMATIC" import { BaseTransform } from "../imageknife/transform/BaseTransform" import { RotateImageTransformation } from "../imageknife/transform/RotateImageTransformation" @@ -24,11 +24,11 @@ import { ImageKnifeData } from "../imageknife/ImageKnifeData" import { CenterCrop } from '../imageknife/transform/pixelmap/CenterCrop' import { CenterInside } from '../imageknife/transform/pixelmap/CenterInside' 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 { CropCircleWithBorderTransformation } from '../imageknife/transform/CropCircleWithBorderTransformation' +import { CropCircleWithBorderTransformation, rgbColor } from '../imageknife/transform/CropCircleWithBorderTransformation' import { CropSquareTransformation } from '../imageknife/transform/CropSquareTransformation' import { CropTransformation } from '../imageknife/transform/CropTransformation' import { CropType } from '../imageknife/transform/CropTransformation' @@ -53,35 +53,32 @@ export interface Size { height: number } export class RequestOption { - loadSrc: string | PixelMap | Resource; + loadSrc: string | PixelMap | Resource = ''; strategy: DiskStrategy = new AUTOMATIC(); dontAnimateFlag = false; - placeholderSrc: PixelMap | Resource; - placeholderFunc: AsyncSuccess; - errorholderSrc: PixelMap | Resource; - errorholderFunc: AsyncSuccess; - errorholderData: ImageKnifeData; - thumbSizeMultiplier: number; + placeholderSrc: PixelMap | Resource | undefined = undefined; + placeholderFunc: AsyncSuccess | undefined = undefined; + errorholderSrc: PixelMap | Resource | undefined = undefined; + errorholderFunc: AsyncSuccess | undefined = undefined; + errorholderData: ImageKnifeData | undefined = undefined;; + thumbSizeMultiplier: number = 0; // 如果存在缩略图，则主图延时1s加载 thumbDelayTime: number = 1000 - thumbHolderFunc: AsyncSuccess; - requestListeners: Array>; + thumbHolderFunc: AsyncSuccess | undefined = undefined; + requestListeners: Array> | undefined = undefined; // 进度条 - progressFunc: AsyncSuccess; + progressFunc: AsyncSuccess | undefined = undefined; // 重试图层 - retryholderSrc: PixelMap | Resource; - retryholderFunc: AsyncSuccess - retryholderData: ImageKnifeData - size: { - width: number, - height: number - } = { width: -1, height: -1 }; + retryholderSrc: PixelMap | Resource | undefined = undefined; + retryholderFunc: AsyncSuccess | undefined = undefined; + retryholderData: ImageKnifeData | undefined = undefined; + size:Size= { width: -1, height: -1 }; // 网络下载数据回调 - allCacheInfoCallback: IAllCacheInfoCallback; + allCacheInfoCallback: IAllCacheInfoCallback | undefined = undefined; onlyRetrieveFromCache: boolean = false; isCacheable: boolean = true; @@ -194,7 +191,9 @@ export class RequestOption { } addListener(func: AsyncCallback) { - this.requestListeners.push(func); + if(this.requestListeners != undefined) { + this.requestListeners?.push(func); + } return this; } @@ -212,7 +211,10 @@ export class RequestOption { this.onlyRetrieveFromCache = flag; } - rotateImage(degreesToRotate: number) { + rotateImage(degreesToRotate: number|undefined) { + if(degreesToRotate == undefined){ + return + } let rotateImage = new RotateImageTransformation(degreesToRotate); this.transformations.push(rotateImage); return this; @@ -233,12 +235,10 @@ export class RequestOption { return this; } - roundedCorners(obj: { - top_left: number, - top_right: number, - bottom_left: number, - bottom_right: number - }) { + roundedCorners(obj: RoundCorner) { + if(obj == undefined){ + return + } let transformation = new RoundedCornersTransformation({ top_left: obj.top_left, top_right: obj.top_right, @@ -255,11 +255,10 @@ export class RequestOption { return this; } - cropCircleWithBorder(border: number, obj: { - r_color: number, - g_color: number, - b_color: number - }) { + cropCircleWithBorder(border: number, obj: rgbColor) { + if(border == undefined || obj == undefined){ + return + } let transformation = new CropCircleWithBorderTransformation(border, obj) this.transformations.push(transformation); return this; @@ -271,7 +270,10 @@ export class RequestOption { 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) this.transformations.push(transformation); return this; @@ -283,13 +285,19 @@ export class RequestOption { return this; } - brightnessFilter(brightness: number) { + brightnessFilter(brightness: number|undefined) { + if(brightness == undefined){ + return + } let transformation = new BrightnessFilterTransformation(brightness) this.transformations.push(transformation); return this; } - contrastFilter(contrast: number) { + contrastFilter(contrast: number|undefined) { + if(contrast == undefined){ + return + } let transformation = new ContrastFilterTransformation(contrast) this.transformations.push(transformation); return this; @@ -313,43 +321,64 @@ export class RequestOption { return this; } - blur(radius: number) { + blur(radius: number|undefined) { + if(radius == undefined){ + return + } let transformation = new BlurTransformation(radius) this.transformations.push(transformation); return this; } - pixelationFilter(pixel: number) { + pixelationFilter(pixel: number|undefined) { + if(pixel == undefined){ + return + } let transformation = new PixelationFilterTransformation(pixel) this.transformations.push(transformation); return this; } - swirlFilter(degree: number) { + swirlFilter(degree: number|undefined) { + if(degree == undefined){ + return + } let transformation = new SwirlFilterTransformation(degree) this.transformations.push(transformation); return this; } - mask(maskResource: Resource) { + mask(maskResource: Resource|undefined) { + if(maskResource == undefined){ + return + } let transformation = new MaskTransformation(maskResource) this.transformations.push(transformation); return this; } - kuwaharaFilter(radius: number) { + kuwaharaFilter(radius: number|undefined) { + if(radius == undefined){ + return + } let transformation = new KuwaharaFilterTransform(radius); this.transformations.push(transformation); 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); this.transformations.push(transformation); return this; } - vignetteFilter(centerPoint: Array, vignetteColor: Array, vignetteSpace: Array) { + vignetteFilter(centerPoint: Array|undefined, vignetteColor: Array|undefined, vignetteSpace: Array|undefined) { + if(centerPoint == undefined || vignetteColor == undefined || vignetteSpace == undefined){ + return + } let transformation = new VignetteFilterTransform(centerPoint, vignetteColor, vignetteSpace); this.transformations.push(transformation); return this; @@ -376,12 +405,14 @@ export class RequestOption { LogUtil.log("Main Image is Ready:" + this.loadMainReady); 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) } @@ -390,7 +421,9 @@ export class RequestOption { thumbholderOnComplete = (imageKnifeData: ImageKnifeData)=> { 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中 等到加载失败时候进行调用 this.errorholderData = imageKnifeData; 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) } retryholderOnComplete = (imageKnifeData: ImageKnifeData)=>{ this.retryholderData = imageKnifeData; 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) } loadComplete = (imageKnifeData: ImageKnifeData)=>{ this.loadMainReady = true; // 三级缓存数据加载成功 - for (let requestListener of this.requestListeners) { - var ret = requestListener.callback("", imageKnifeData); - if (ret) { - break; + if(this.requestListeners != undefined) { + for (let i = 0;i < this.requestListeners.length; i++) { + let requestListener = this.requestListeners[i]; + let boolInterception = requestListener.callback("", imageKnifeData); + if (boolInterception) { + break; + } } } @@ -438,16 +478,22 @@ export class RequestOption { // 等落盘结束后主动调用#removeCurrentAndSearchNext方法 }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 =()=>{ - (ImageKnifeGlobal.getInstance().getImageKnife()).removeRunning(this); + if(ImageKnifeGlobal.getInstance().getImageKnife() != undefined) { + (ImageKnifeGlobal.getInstance().getImageKnife())?.removeRunning(this); + } } loadError = (err:BusinessError|string)=>{ @@ -463,11 +509,15 @@ export class RequestOption { // 失败图层标记,如果已经有数据直接展示失败图层 this.loadErrorReady = true; 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); + } } }