From f8cd994eec21d794cda9ebc63ae6a4b8519970af Mon Sep 17 00:00:00 2001 From: jixinbao Date: Fri, 19 Jul 2024 17:57:15 +0800 Subject: [PATCH] =?UTF-8?q?feat(x):=20iOS=20=E5=AE=9E=E7=8E=B0=20createCan?= =?UTF-8?q?vasContextAsync=20#3891?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/x/api/dom/createCanvasContextAsync.ts | 173 ++++++++++++++++++ packages/uni-app-plus/src/x/api/index.ts | 1 + 2 files changed, 174 insertions(+) create mode 100644 packages/uni-app-plus/src/x/api/dom/createCanvasContextAsync.ts diff --git a/packages/uni-app-plus/src/x/api/dom/createCanvasContextAsync.ts b/packages/uni-app-plus/src/x/api/dom/createCanvasContextAsync.ts new file mode 100644 index 0000000000..110b69c5c3 --- /dev/null +++ b/packages/uni-app-plus/src/x/api/dom/createCanvasContextAsync.ts @@ -0,0 +1,173 @@ +import { defineAsyncApi } from '@dcloudio/uni-api' +import type { ComponentPublicInstance } from 'vue' +import { getCurrentPage } from '@dcloudio/uni-core' + +// type API_TYPE_CREATE_CANVAS_CONTEXT_ASYNC = typeof uni.createCanvasContext + +type CreateCanvasContextAsyncSuccessCallback = any +type CreateCanvasContextAsyncFailCallback = any +type CreateCanvasContextAsyncCompleteCallback = any + +export type CreateCanvasContextAsyncOptions = { + /** + * canvas 元素的 id 属性 + * @uniPlatform { + * "app": { + * "android": { + * "osVer": "5.0", + * "uniVer": "x", + * "unixVer": "4.25" + * }, + * "ios": { + * "osVer": "10.0", + * "uniVer": "x", + * "unixVer": "4.25" + * } + * }, + * "web": { + * "uniVer": "x", + * "unixVer": "4.25" + * } + * } + */ + id: string.IDString + /** + * 组件或页面实例 + * @uniPlatform { + * "app": { + * "android": { + * "osVer": "5.0", + * "uniVer": "x", + * "unixVer": "4.25" + * }, + * "ios": { + * "osVer": "10.0", + * "uniVer": "x", + * "unixVer": "4.25" + * } + * }, + * "web": { + * "uniVer": "x", + * "unixVer": "4.25" + * } + * } + */ + component?: ComponentPublicInstance + /** + * 接口调用成功的回调函数 + * @uniPlatform { + * "app": { + * "android": { + * "osVer": "5.0", + * "uniVer": "x", + * "unixVer": "4.25" + * }, + * "ios": { + * "osVer": "10.0", + * "uniVer": "x", + * "unixVer": "4.25" + * } + * }, + * "web": { + * "uniVer": "x", + * "unixVer": "4.25" + * } + * } + */ + success?: CreateCanvasContextAsyncSuccessCallback + /** + * 接口调用失败的回调函数 + * @uniPlatform { + * "app": { + * "android": { + * "osVer": "5.0", + * "uniVer": "x", + * "unixVer": "4.25" + * }, + * "ios": { + * "osVer": "10.0", + * "uniVer": "x", + * "unixVer": "4.25" + * } + * }, + * "web": { + * "uniVer": "x", + * "unixVer": "4.25" + * } + * } + */ + fail?: CreateCanvasContextAsyncFailCallback + /** + * 接口调用结束的回调函数(调用成功、失败都会执行) + * @uniPlatform { + * "app": { + * "android": { + * "osVer": "5.0", + * "uniVer": "x", + * "unixVer": "4.25" + * }, + * "ios": { + * "osVer": "10.0", + * "uniVer": "x", + * "unixVer": "4.25" + * } + * }, + * "web": { + * "uniVer": "√", + * "unixVer": "4.25" + * } + * } + */ + complete?: CreateCanvasContextAsyncCompleteCallback +} + +export interface CanvasContext { + getContext(type: string): CanvasRenderingContext2D + // toBlob(callback: any): void +} +function isVueComponent(comp: any) { + const has$instance = typeof comp.$ === 'object' + const has$el = typeof comp.$el === 'object' + + return has$instance && has$el +} + +export const createCanvasContextAsync = defineAsyncApi( + 'createCanvasContextAsync', + (options: any, { resolve, reject }) => { + const page = getCurrentPage() as ComponentPublicInstance + if (page == null) { + return null + } + let bodyNode = page.$el?.parentNode as UniElement + if (bodyNode == null) { + reject('bodyNode is null') + return null + } + if (!options.id) { + reject('id is null') + return null + } + + let component: ComponentPublicInstance | null = null + + if (options.component && isVueComponent(options.component)) { + component = options.component + + const el = component!.$el as UniElement + if (el != null) { + bodyNode = el.parentNode as UniElement + } + } + + const element = bodyNode.querySelector(`#${options.id}`) as UniCanvasElement + if (!element) { + reject('element is null') + return null + } + + resolve({ + getContext: element.getContext.bind(element), + }) + } +) diff --git a/packages/uni-app-plus/src/x/api/index.ts b/packages/uni-app-plus/src/x/api/index.ts index d7b581c398..f7ced166c1 100644 --- a/packages/uni-app-plus/src/x/api/index.ts +++ b/packages/uni-app-plus/src/x/api/index.ts @@ -21,6 +21,7 @@ export { setNavigationBarTitle } from './navigationBar/setNavigationBarTitle' // dom export { getElementById } from './dom/getElementById' export { createSelectorQuery } from './dom/createSelectorQuery' +export { createCanvasContextAsync } from './dom/createCanvasContextAsync' // ui export { pageScrollTo } from './ui/pageScrollTo' -- GitLab