feat(x): iOS 实现 createCanvasContextAsync #3891

packages/uni-app-plus/src/x/api/dom/createCanvasContextAsync.ts

+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),
+    })
+  }
+)

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'