From cca496f3c8f88b374535fe42e2161e959c18c806 Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Fri, 23 Jul 2021 15:08:32 +0800 Subject: [PATCH] chore: canvas remove callbackId --- .../uni-api/src/service/context/canvas.ts | 149 ++++++++++-------- .../src/components/canvas/index.tsx | 73 ++------- 2 files changed, 97 insertions(+), 125 deletions(-) diff --git a/packages/uni-api/src/service/context/canvas.ts b/packages/uni-api/src/service/context/canvas.ts index 155508f0b..3f67e03cc 100644 --- a/packages/uni-api/src/service/context/canvas.ts +++ b/packages/uni-api/src/service/context/canvas.ts @@ -29,11 +29,7 @@ import { hasOwn } from '@vue/shared' import { once, ON_ERROR } from '@dcloudio/uni-shared' -import { - getPageIdByVm, - getCurrentPageVm, - createCallbacks, -} from '@dcloudio/uni-core' +import { getPageIdByVm, getCurrentPageVm } from '@dcloudio/uni-core' import { TEMP_PATH } from '@dcloudio/uni-platform' @@ -41,30 +37,23 @@ import { TEMP_PATH } from '@dcloudio/uni-platform' //#endregion //#region UniServiceJSBridge -const canvasEventCallbacks = createCallbacks('canvasEvent') - function operateCanvas( canvasId: string, pageId: number, type: unknown, - data: any + data: any, + callback: Callback ) { - UniServiceJSBridge.invokeViewMethod< - {}, - { callbackId: number | string; data: any } - >( + try { + } catch (error) {} + UniServiceJSBridge.invokeViewMethod<{}, Record>( `canvas.${canvasId}`, { type, data, }, pageId, - ({ callbackId, data }) => { - const callback = canvasEventCallbacks.pop(callbackId) - if (callback) { - callback(data) - } - } + (data) => callback(data) ) } //#endregion @@ -404,17 +393,17 @@ export class CanvasContext implements UniApp.CanvasContext { var actions = [...this.actions] this.actions = [] this.path = [] - var callbackId - if (typeof callback === 'function') { - callbackId = canvasEventCallbacks.push(callback) - } - - operateCanvas(this.id, this.pageId, 'actionsChanged', { - actions, - reserve, - callbackId, - }) + operateCanvas( + this.id, + this.pageId, + 'actionsChanged', + { + actions, + reserve, + }, + callback + ) } createLinearGradient(x0: number, y0: number, x1: number, y1: number) { @@ -1048,13 +1037,18 @@ export const canvasGetImageData = reject() return } - const cId = canvasEventCallbacks.push(function ( + function callback( data: UniApp.CanvasGetImageDataRes & { compressed?: boolean } ) { + if (data.errMsg && data.errMsg.indexOf('fail') !== -1) { + reject('', data) + return + } + let imgData = data.data if (imgData && imgData.length) { if (__PLATFORM__ === 'app' && data.compressed) { - return import('pako').then((pako) => { + import('pako').then((pako) => { imgData = pako.inflateRaw(imgData) as any delete data.compressed data.data = new Uint8ClampedArray(imgData) as any @@ -1064,14 +1058,19 @@ export const canvasGetImageData = data.data = new Uint8ClampedArray(imgData) as any } resolve(data) - }) - operateCanvas(canvasId, pageId, 'getImageData', { - x, - y, - width, - height, - callbackId: cId, - }) + } + operateCanvas( + canvasId, + pageId, + 'getImageData', + { + x, + y, + width, + height, + }, + callback + ) }, CanvasGetImageDataProtocol, CanvasGetImageDataOptions @@ -1087,22 +1086,28 @@ export const canvasPutImageData = reject() return } - const cId = canvasEventCallbacks.push(function ( - data: UniApp.CanvasGetImageDataRes - ) { - resolve(data) - }) let compressed: boolean const operate = () => { - operateCanvas(canvasId, pageId, 'putImageData', { - data, - x, - y, - width, - height, - compressed, - callbackId: cId, - }) + operateCanvas( + canvasId, + pageId, + 'putImageData', + { + data, + x, + y, + width, + height, + compressed, + }, + (data: UniApp.CanvasGetImageDataRes) => { + if (data.errMsg && data.errMsg.indexOf('fail')) { + reject() + return + } + resolve(data) + } + ) } // iOS真机非调试模式压缩太慢暂时排除 if ( @@ -1146,24 +1151,30 @@ export const canvasToTempFilePath = reject() return } - const cId = canvasEventCallbacks.push(function ( - res: UniApp.CanvasToTempFilePathRes - ) { - resolve(res) - }) const dirname = `${TEMP_PATH}/canvas` - operateCanvas(canvasId, pageId, 'toTempFilePath', { - x, - y, - width, - height, - destWidth, - destHeight, - fileType, - quality, - dirname, - callbackId: cId, - }) + operateCanvas( + canvasId, + pageId, + 'toTempFilePath', + { + x, + y, + width, + height, + destWidth, + destHeight, + fileType, + quality, + dirname, + }, + (res: UniApp.CanvasToTempFilePathRes & { errMsg?: string }) => { + if (res.errMsg && res.errMsg.indexOf('fail')) { + reject('', res) + return + } + resolve(res) + } + ) }, CanvasToTempFilePathProtocol, CanvasToTempFilePathOptions diff --git a/packages/uni-components/src/components/canvas/index.tsx b/packages/uni-components/src/components/canvas/index.tsx index de10e8146..ed9bc38e2 100644 --- a/packages/uni-components/src/components/canvas/index.tsx +++ b/packages/uni-components/src/components/canvas/index.tsx @@ -232,19 +232,17 @@ function useMethods( { actions, reserve, - callbackId, }: { actions: Actions reserve: boolean - callbackId: number }, - resolve: (res: { callbackId: number; data: any }) => void + resolve: (res: any) => void ) { if (!actions) { return } if (actionsWaiting.value) { - _actionsDefer.push([actions, reserve, callbackId]) + _actionsDefer.push([actions, reserve]) return } var canvas = canvasRef.value! @@ -300,7 +298,6 @@ function useMethods( const loaded = checkImageLoaded( data[1] as string, actions.slice(index + 1), - callbackId, resolve, function (image) { if (image) { @@ -374,7 +371,6 @@ function useMethods( checkImageLoaded( url, actions.slice(index + 1), - callbackId, resolve, function (image) { if (image) { @@ -409,12 +405,9 @@ function useMethods( } } } - if (!actionsWaiting.value && callbackId) { + if (!actionsWaiting.value) { resolve({ - callbackId, - data: { - errMsg: 'drawCanvas:ok', - }, + errMsg: 'drawCanvas:ok', }) } } @@ -467,8 +460,7 @@ function useMethods( function checkImageLoaded( src: string, actions: Actions, - callbackId: number, - resolve: (res: { callbackId: number; data: any }) => void, + resolve: (res: any) => void, fn: (a: CanvasImageSource) => void ) { var image = _images[src] @@ -487,7 +479,6 @@ function useMethods( for (var action = actions.shift(); action; ) { actionsChanged( { - callbackId, actions: action[0], reserve: action[1], }, @@ -511,7 +502,6 @@ function useMethods( dataType, quality = 1, type = 'png', - callbackId, }: { x: number y: number @@ -523,9 +513,8 @@ function useMethods( dataType: string quality: number type: string - callbackId?: number }, - resolve?: (res: { callbackId: number; data: any }) => void + resolve?: (res: any) => void ) { const canvas = canvasRef.value! let data: string | number[] @@ -553,9 +542,9 @@ function useMethods( context.fillStyle = '#fff' context.fillRect(0, 0, destWidth, destHeight) } - // @ts-ignore + // @ts-expect-error context.__hidpi__ = true - // @ts-ignore + // @ts-expect-error context.drawImageByCanvas( canvas, x, @@ -585,7 +574,6 @@ function useMethods( } } result = { - errMsg: 'canvasGetImageData:ok', data, compressed, width: destWidth, @@ -597,16 +585,12 @@ function useMethods( } } newCanvas.height = newCanvas.width = 0 - // @ts-ignore + // @ts-expect-error context.__hidpi__ = false - if (!callbackId) { + if (!resolve) { return result } else { - resolve && - resolve({ - callbackId, - data: result, - }) + resolve(result) } } function putImageData( @@ -617,7 +601,6 @@ function useMethods( width, height, compressed, - callbackId, }: { data: Array x: number @@ -625,9 +608,8 @@ function useMethods( width: number height: number compressed: boolean - callbackId: number }, - resolve: (res: { callbackId: number; data: any }) => void + resolve: (res: any) => void ) { try { if (!height) { @@ -647,20 +629,10 @@ function useMethods( canvasRef.value!.getContext('2d')!.drawImage(canvas, x, y, width, height) canvas.height = canvas.width = 0 } catch (error) { - resolve({ - callbackId, - data: { - errMsg: 'canvasPutImageData:fail', - }, - }) + resolve({ errMsg: 'canvasPutImageData:fail' }) return } - resolve({ - callbackId, - data: { - errMsg: 'canvasPutImageData:ok', - }, - }) + resolve({ errMsg: 'canvasPutImageData:ok' }) } function toTempFilePath( { @@ -673,7 +645,6 @@ function useMethods( fileType, quality, dirname, - callbackId, }: { x: number y: number @@ -684,9 +655,8 @@ function useMethods( fileType: string quality: number dirname: string - callbackId: number }, - resolve: (res: { callbackId: number; data: any }) => void + resolve: (res: any) => void ) { const res = getImageData({ x, @@ -702,10 +672,7 @@ function useMethods( })! if (!res.data || !res.data.length) { resolve({ - callbackId, - data: { - errMsg: res!.errMsg.replace('canvasPutImageData', 'toTempFilePath'), - }, + errMsg: res!.errMsg!.replace('canvasPutImageData', 'toTempFilePath'), }) return } @@ -714,13 +681,7 @@ function useMethods( if (error) { errMsg += ` ${error.message}` } - resolve({ - callbackId, - data: { - errMsg, - tempFilePath: tempFilePath, - }, - }) + resolve({ errMsg, tempFilePath }) }) } -- GitLab