@cataract6545/tmui/tool/function/getCanvas.ts

tm-vuetify是一个新势力由主题驱动的UI组件库,相比其它优势大,组件全,设计趋势紧跟未来。具有主题生成，主题实时切换，暗黑实时切换,lottie动画,图表等新颖功能,tmui TMUI

import {ComponentInternalInstance} from "vue"
import CanvasRenderingContext2D from '../gcanvas/context-2d/RenderingContext.js';
// #ifdef APP-NVUE
import {enable,WeexBridge,} from '../gcanvas/index.js';
// #endif

export function getCanvas(proxy:ComponentInternalInstance,canvasid:string,w?:number,h?:number,is2d=false):Promise<{ctx:CanvasRenderingContext2D,node:HTMLCanvasElement|null}>{
	return new Promise((resv,rejv)=>{
		// #ifdef APP-NVUE
		setTimeout(async function () {
			
			/*获取元素引用*/
			var ganvas = proxy?.$refs[canvasid];
			/*通过元素引用获取canvas对象*/
			var canvasObj = enable(ganvas, {
				bridge: WeexBridge
			});
			resv({ctx:canvasObj.getContext('2d'),node:canvasObj})
		}, 100)
		// #endif
		
		
		// #ifdef MP
		setTimeout(async function () {
			const query = uni.createSelectorQuery().in(proxy)
				// #ifdef MP-ALIPAY
				
				query.select('#'+canvasid).node().exec((res2) => {
					const canvas = res2[0].node;
					let ctxvb:UniApp.CanvasContext = canvas.getContext('2d');
					resv({ctx:ctxvb,node:canvas})
				})
				// #endif
				
				// #ifndef MP-ALIPAY
				query.select('#'+canvasid)
					.fields({
						node: true,
						size: true,
						context:true
					})
					.exec((res) => {
						
						const canvas = res[0]?.node??null;
						
						if(canvas){
							const ctx = canvas.getContext('2d')
							const dpr = uni.getSystemInfoSync().pixelRatio
							canvas.width = res[0].width * dpr
							canvas.height = res[0].height * dpr
							if(ctx?.scale){
								ctx.scale(dpr, dpr)
							}
							resv({ctx:ctx,node:canvas})
						
						}else{
							const ctx =  res[0]?.context??null
							resv({ctx:ctx,node:null})
						}
						
				})
				// #endif
		}, 100)
		// #endif
		
	
		// #ifdef H5 || APP-VUE
		setTimeout(async function () {
			const query = uni.createSelectorQuery().in(proxy)
			
			resv({ctx:uni.createCanvasContext(canvasid, proxy),node:null})
			// return
			// query.select('#'+canvasid)
			// 	.fields({
			// 		node: true,
			// 		size: true,
			// 		context:true
			// 	})
			// 	.exec((res) => {
			// 		const dpr = uni.getSystemInfoSync().pixelRatio
			// 		let canvas = proxy.$el.querySelector('canvas').getContext('2d')
			// 		let canvasEl = proxy.$el.querySelector('canvas')
			// 		canvas.scale(0.1, 0.1)
			// 		resv({ctx:canvas,node:proxy.$el.querySelector('canvas')})
			// })
		}, 50)
		
		// #endif
		
	})
}