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

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/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'

View File

@ -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<string, any>;
private memoryCache: LruCache<string, ImageKnifeData>;
private diskMemoryCache: DiskLruCache;
private dataFetch: IDataFetch;
private resourceFetch: IResourceFetch;
private resourceFetch: IResourceFetch<ArrayBuffer>;
private filesPath: string = ""; // data/data/包名/files目录
@ -56,9 +57,9 @@ export class ImageKnife {
private defaultListener: AsyncCallback<ImageKnifeData>; // 全局监听器
// 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<string, any>(100);
this.memoryCache = new LruCache<string, ImageKnifeData>(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<string, any>{
getMemoryCache(): LruCache<string, ImageKnifeData>{
return this.memoryCache;
}
@ -125,7 +126,7 @@ export class ImageKnife {
return ImageKnifeGlobal.getInstance().getHapContext();
}
setMemoryCache(lrucache: LruCache<string, any>) {
setMemoryCache(lrucache: LruCache<string, ImageKnifeData>) {
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<string, any>(size);
this.memoryCache = new LruCache<string, ImageKnifeData>(size);
}else{
let newLruCache = new LruCache<string, any>(size);
this.memoryCache.foreachLruCache(function (value, key, map) {
let newLruCache = new LruCache<string, ImageKnifeData>(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);

View File

@ -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<K, T>(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<K, T>( methodName: string,
context: CanvasRenderingContext2D, data: K, imageKnifeOption: T, compWidth: number, compHeight: number, setGifTimeId?: (timeId: number) => void,drawLifeCycle?: IDrawLifeCycle
):boolean {
if (drawLifeCycle && (drawLifeCycle as Record<string,Function>)[methodName]) {
return (drawLifeCycle as Record<string,Function>)[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))
}
}
}

View File

@ -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();

View File

@ -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;
}
}

View File

@ -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<PixelMap>;
transformations?: Array<BaseTransform<PixelMap>>;

View File

@ -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<ImageKnifeData>;
errorholderSrc: PixelMap | Resource;
errorholderFunc: AsyncSuccess<ImageKnifeData>;
errorholderData: ImageKnifeData;
thumbSizeMultiplier: number;
placeholderSrc: PixelMap | Resource | undefined = undefined;
placeholderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
errorholderSrc: PixelMap | Resource | undefined = undefined;
errorholderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
errorholderData: ImageKnifeData | undefined = undefined;;
thumbSizeMultiplier: number = 0;
// 如果存在缩略图则主图延时1s加载
thumbDelayTime: number = 1000
thumbHolderFunc: AsyncSuccess<ImageKnifeData>;
requestListeners: Array<AsyncCallback<ImageKnifeData>>;
thumbHolderFunc: AsyncSuccess<ImageKnifeData> | undefined = undefined;
requestListeners: Array<AsyncCallback<ImageKnifeData>> | undefined = undefined;
// 进度条
progressFunc: AsyncSuccess<number>;
progressFunc: AsyncSuccess<number> | undefined = undefined;
// 重试图层
retryholderSrc: PixelMap | Resource;
retryholderFunc: AsyncSuccess<ImageKnifeData>
retryholderData: ImageKnifeData
size: {
width: number,
height: number
} = { width: -1, height: -1 };
retryholderSrc: PixelMap | Resource | undefined = undefined;
retryholderFunc: AsyncSuccess<ImageKnifeData> | 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<ImageKnifeData>) {
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<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);
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);
}
}
}