uview-plus 3.8.49 → 3.8.86

package/components/u-canvas/u-canvas.vue

@@ -1,423 +1,734 @@
-<template>
-    <view class="u-canvas"
-        :id="rootId"
-        :style="{
-            width: useRootHeightAndWidth ? '100%' : 'auto',
-            height: useRootHeightAndWidth ? '100%' : 'auto',
-        }">
-        <!-- #ifdef MP || H5 -->
-        <canvas
-            class="u-canvas__canvas"
-            :id="canvasId"
-            :canvas-id="canvasId"
-            type="2d"
-            :style="{ width: width + unit, height: height + unit }"
-            @touchstart="onTouchStart"
-            @touchmove="onTouchMove"
-            @touchend="onTouchEnd"/>
-        <!-- #endif -->
-
-        <!-- #ifdef APP-PLUS -->
-        <canvas
-            class="u-canvas__canvas"
-            :id="canvasId"
-            :canvas-id="canvasId"
-            :style="{ width: width + unit, height: height + unit }" 
-            @touchstart="onTouchStart"
-            @touchmove="onTouchMove"
-            @touchend="onTouchEnd"/>
-        <!-- #endif -->
-
-        <!-- #ifdef APP-NVUE -->
-        <gcanvas class="u-canvas__canvas" ref="gcanvess"
-            :style="{ width: width + unit, height: height + unit }"
-            @touchstart="onTouchStart"
-            @touchmove="onTouchMove"
-            @touchend="onTouchEnd">
-        </gcanvas>
-        <!-- #endif -->
-    </view>
-</template>
-
-<script>
-// #ifdef APP-NVUE
-// https://github.com/dcloudio/NvueCanvasDemo/blob/master/README.md
-import {
-    enable,
-    WeexBridge,
-	Image as GImage
-} from '../../libs/util/gcanvas/index.js';
-// #endif
-let canvasNode = null;
-export default {
-    name: "u-canvas",
-    props: {
-        canvasId: {
-            type: String,
-            default: () => {
-				return `u-canvas${Math.floor(Math.random() * 1000000)}`
-			}
-        },
-        width: {
-            type: [String, Number],
-            default: 300
-        },
-        height: {
-            type: [String, Number],
-            default: 300
-        },
-        unit: {
-            type: String,
-            default: 'px'
-        },
-        useRootHeightAndWidth: {
-            type: Boolean,
-            default: false
-        },
-        // 背景色
-        bgColor: {
-            type: String,
-            default: '#ffffff'
-        }
-    },
-    data() {
-        return {
-            rootId: `rootId${Number(Math.random() * 100).toFixed(0)}`,
-            ganvas: null,
-            canvasContext: null,
-            widthLocal: this.width,
-            heightLocal: this.height,
-            ctx: null
-        };
-    },
-    computed: {
-        // 计算实际画布尺寸
-        actualWidth() {
-            return this.useRootHeightAndWidth ? this.widthLocal : Number(this.width);
-        },
-        actualHeight() {
-            return this.useRootHeightAndWidth ? this.heightLocal : Number(this.height);
-        }
-    },
-    methods: {
-        // 添加触摸事件处理方法
-        onTouchStart(e) {
-            this.$emit('touchstart', e);
-        },
-        onTouchMove(e) {
-            this.$emit('touchmove', e);
-        },
-        onTouchEnd(e) {
-            this.$emit('touchend', e);
-        },
-
-        /**
-         * 获取节点
-         * @param id 节点id
-         * @param isCanvas 是否为Canvas节点
-         * @return {Promise<unknown>}
-         */
-        async getCanvasNode(id, isCanvas = true) {
-			let that = this
-        	return new Promise((resolve, reject) => {
-        		try {
-        			// #ifdef APP-NVUE
-        			setTimeout(() => {
-        				/*获取元素引用*/
-        				this.ganvas = this.$refs["gcanvess"]
-        				/*通过元素引用获取canvas对象*/
-        				let canvasNode = enable(this.ganvas, {
-        				    bridge: WeexBridge
-        				})
-        				resolve(canvasNode)
-        			}, 200)
-        			// #endif
-        			// #ifndef APP-PLUS-NVUE
-                    const query = uni.createSelectorQuery().in(that).select(`#${id}`);
-                    query.fields({
-                            node: true,
-                            size: true
-                        })
-                        .exec((res) => {
-                            if (isCanvas) {
-                                if (res[0]?.node) {
-                                    resolve(res[0].node)
-                                } else {
-                                    resolve(false)
-                                    console.error("获取节点出错", res)
-                                }
-                            } else {
-                                resolve(res[0])
-                            }
-                        })
-        			// #endif
-        		} catch (e) {
-        			console.error("获取节点失败", e)
-        		}
-        	})
-        },
-		
-        /**
-         * 获取Canvas上下文
-         */
-        getCanvasContext() {
-            // #ifdef APP-PLUS
-            return uni.createCanvasContext(this.canvasId, this);
-            // #endif
-            // #ifdef APP-PLUS-NVUE || MP || H5
-            return canvasNode.getContext('2d');
-            // #endif
-        },
-
-        /**
-         * 初始化Canvas
-         */
-        async initCanvas() {
-            try {
-                canvasNode = await this.getCanvasNode(this.canvasId);
-                
-                // #ifdef MP-WEIXIN
-                // 在微信小程序中，为了提高清晰度，需要考虑设备像素比
-                const dpr = uni.getSystemInfoSync().pixelRatio;
-                if(canvasNode) {
-                    // 设置canvas实际绘制尺寸为显示尺寸的dpr倍
-                    canvasNode.width = this.actualWidth * dpr;
-                    canvasNode.height = this.actualHeight * dpr;
-                }
-                // #endif
-                
-                this.ctx = this.getCanvasContext();
-                
-                // #ifdef MP-WEIXIN
-                if(this.ctx) {
-                    this.ctx.scale(dpr, dpr);
-                }
-                // #endif
-                
-                // 初始化背景，但不在微信小程序中调用draw
-                this.clearCanvas();
-            } catch (error) {
-                console.error("初始化Canvas失败:", error);
-            }
-        },
-
-        /**
-         * 清空画布
-         */
-        clearCanvas() {
-            if (!this.ctx) return;
-
-            this.clearRect(0, 0, this.actualWidth, this.actualHeight);
-
-            // 填充背景色
-            this.beginPath();
-            this.rect(0, 0, this.actualWidth, this.actualHeight);
-
-            this.setFillStyle(this.bgColor);
-            this.fill();
-            
-            this.draw();
-        },
-        rect(x, y, width, height) {
-            if (!this.ctx) return;
-            this.ctx.rect(x, y, width, height);
-        },
-        clearRect(x, y, width, height) {
-            if (!this.ctx) return;
-            this.ctx.clearRect(x, y, width, height);
-        },
-        fill() {
-            if (!this.ctx) return;
-            this.ctx.fill();
-        },
-        setFillStyle(color) {
-            if (!this.ctx) return;
-
-            // #ifndef APP-PLUS-NVUE
-            if (this.ctx.setFillStyle) {
-                this.ctx.setFillStyle(color);
-            } else {
-                this.ctx.fillStyle = color;
-            }
-            // #endif
-            // #ifdef APP-PLUS-NVUE
-            this.ctx.setFillStyle(color);
-            // #endif
-        },
-
-        /**
-         * 设置线条样式
-         */
-        setLineStyle(lineColor, lineWidth) {
-            if (!this.ctx) return;
-            this.setLineCap('round');
-            this.setLineJoin('round');
-            this.setStrokeStyle(lineColor);
-            this.setLineWidth(lineWidth);
-        },
-        setLineCap(lineCap = 'round') {
-            if (!this.ctx) return;
-            if (this.ctx.setLineCap) {
-                this.ctx.setLineCap(lineCap);
-            } else {
-                this.ctx.lineCap = lineCap;
-            }
-        },
-        setLineJoin(lineJoin = 'round') {
-            if (!this.ctx) return;
-            if (this.ctx.setLineJoin) {
-                this.ctx.setLineJoin(lineJoin);
-            } else {
-                this.ctx.lineJoin = lineJoin;
-            }
-        },
-        setStrokeStyle(color) {
-            if (!this.ctx) return;
-            if (this.ctx.setStrokeStyle) {
-                this.ctx.setStrokeStyle(color);
-            } else {
-                this.ctx.strokeStyle = color;
-            }
-        },
-        setLineWidth(width) {
-            if (!this.ctx) return;
-            if (this.ctx.setLineWidth) {
-                this.ctx.setLineWidth(width);
-            } else {
-                this.ctx.lineWidth = width;
-            }
-        },
-
-        /**
-         * 开始路径
-         */
-        beginPath() {
-            if (!this.ctx) return;
-            this.ctx.beginPath();
-        },
-
-        /**
-         * 移动到某点
-         */
-        moveTo(x, y) {
-            if (!this.ctx) return;
-            this.ctx.moveTo(x, y);
-        },
-
-        /**
-         * 画线到某点
-         */
-        lineTo(x, y) {
-            if (!this.ctx) return;
-            this.ctx.lineTo(x, y);
-        },
-
-        /**
-         * 描边
-         */
-        stroke() {
-            if (!this.ctx) return;
-            this.ctx.stroke();
-        },
-
-        /**
-         * 关闭路径
-         */
-        closePath() {
-            if (!this.ctx) return;
-            this.ctx.closePath();
-        },
-
-        /**
-         * 绘制操作
-         */
-        draw(isLastDraw = false) {
-            // #ifndef MP-WEIXIN
-            if (this.ctx && typeof this.ctx.draw === 'function') {
-                this.ctx.draw(isLastDraw);
-            }
-            // #endif
-        },
-
-        /**
-         * 导出图片
-         */
-        exportImage(fileType = 'png', quality = 1) {
-            return new Promise((resolve, reject) => {
-                // #ifdef MP-WEIXIN
-                // 微信小程序中需要先完成绘制，然后导出图片
-                setTimeout(() => {
-                    uni.canvasToTempFilePath({
-                        x: 0,
-                        y: 0,
-                        width: this.actualWidth,
-                        height: this.actualHeight,
-                        destWidth: this.actualWidth * 2, // 使用双倍尺寸以提高清晰度
-                        destHeight: this.actualHeight * 2,
-                        canvas: canvasNode, // 2d必须
-                        canvasId: this.canvasId,
-                        fileType: fileType,
-                        quality: quality,
-                        success: (res) => {
-                            resolve(res.tempFilePath);
-                        },
-                        fail: (err) => {
-                            console.error('导出图片失败:', err);
-                            reject(err);
-                        }
-                    }, this);
-                }, 50); // 等待50毫秒确保绘制完成
-                // #endif
-
-                // #ifndef MP-WEIXIN
-                uni.canvasToTempFilePath({
-                    canvas: canvasNode, // 2d必须
-                    canvasId: this.canvasId,
-                    fileType: fileType,
-                    quality: quality,
-                    success: (res) => {
-                        resolve(res.tempFilePath);
-                    },
-                    fail: (err) => {
-                        console.error('导出图片失败:', err);
-                        reject(err);
-                    }
-                }, this);
-                // #endif
-            });
-        },
-
-        /**
-         * 使用根节点宽高 设置新的size
-         * @return {Promise<void>}
-         */
-        async setNewSize(){
-            const rootNode = await this.getCanvasNode(this.rootId, false);
-            const { width , height } = rootNode;
-            this.widthLocal = height;
-            this.heightLocal = width;
-        }
-    },
-    
-    async mounted() {
-        // 如果使用根节点的宽高 则 重新设置 size
-        if(this.useRootHeightAndWidth){
-            await this.setNewSize();
-        }
-        
-        // 初始化Canvas
-        await this.initCanvas();
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-    .u-canvas {
-        position: relative;
-        overflow: hidden;
-    }
-
-    .u-canvas__canvas {
-        display: block;
-    }
-</style>
+<template>
+    <view
+        class="u-canvas"
+        :id="rootId"
+        :style="{
+            width: useRootHeightAndWidth ? '100%' : actualWidth + unit,
+            height: useRootHeightAndWidth ? '100%' : actualHeight + unit
+        }"
+    >
+        <!-- #ifdef MP || H5 -->
+        <canvas
+            class="u-canvas__canvas"
+            :id="canvasId"
+            :canvas-id="canvasId"
+            type="2d"
+            :disable-scroll="disableScroll"
+            :style="{ width: actualWidth + unit, height: actualHeight + unit }"
+            @touchstart="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"
+        />
+        <!-- #endif -->
+
+        <!-- #ifdef APP-PLUS -->
+        <canvas
+            class="u-canvas__canvas"
+            :id="canvasId"
+            :canvas-id="canvasId"
+            :disable-scroll="disableScroll"
+            :style="{ width: actualWidth + unit, height: actualHeight + unit }"
+            @touchstart="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"
+        />
+        <!-- #endif -->
+
+        <!-- #ifdef APP-NVUE -->
+        <gcanvas
+            class="u-canvas__canvas"
+            ref="gcanvas"
+            :style="{ width: actualWidth + unit, height: actualHeight + unit }"
+            @touchstart="onTouchStart"
+            @touchmove="onTouchMove"
+            @touchend="onTouchEnd"
+        />
+        <!-- #endif -->
+    </view>
+</template>
+
+<script>
+// #ifdef APP-NVUE
+import {
+    enable,
+    WeexBridge,
+    Image as GImage
+} from '../../libs/util/gcanvas/index.js';
+// #endif
+
+export default {
+    name: 'u-canvas',
+    emits: ['ready', 'touchstart', 'touchmove', 'touchend'],
+    props: {
+        canvasId: {
+            type: String,
+            default: () => `u-canvas${Math.floor(Math.random() * 1000000)}`
+        },
+        width: {
+            type: [String, Number],
+            default: 300
+        },
+        height: {
+            type: [String, Number],
+            default: 300
+        },
+        unit: {
+            type: String,
+            default: 'px'
+        },
+        useRootHeightAndWidth: {
+            type: Boolean,
+            default: false
+        },
+        bgColor: {
+            type: String,
+            default: '#ffffff'
+        },
+        disableScroll: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            rootId: `u-canvas-root-${Math.floor(Math.random() * 1000000)}`,
+            ctx: null,
+            widthLocal: this.parseSize(this.width),
+            heightLocal: this.parseSize(this.height),
+            fontSize: 12,
+            fontFamily: 'sans-serif',
+            fontWeight: 'normal',
+            dpr: 1
+        };
+    },
+    computed: {
+        actualWidth() {
+            return this.useRootHeightAndWidth ? this.widthLocal : this.parseSize(this.width);
+        },
+        actualHeight() {
+            return this.useRootHeightAndWidth ? this.heightLocal : this.parseSize(this.height);
+        }
+    },
+    watch: {
+        width() {
+            this.refresh();
+        },
+        height() {
+            this.refresh();
+        },
+        bgColor() {
+            this.clearCanvas();
+        }
+    },
+    created() {
+        this._canvasNode = null;
+        this._selectorResult = null;
+        this._canvasElement = null;
+        this._imageCache = Object.create(null);
+        this._isNvue = false;
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.initCanvas();
+        });
+    },
+    methods: {
+        parseSize(value) {
+            if (typeof value === 'number') {
+                return value;
+            }
+            if (typeof value !== 'string') {
+                return 0;
+            }
+            if (value.endsWith('rpx') || value.endsWith('upx')) {
+                return uni.upx2px(parseFloat(value));
+            }
+            if (value.endsWith('px')) {
+                return parseFloat(value) || 0;
+            }
+            return parseFloat(value) || 0;
+        },
+        onTouchStart(event) {
+            this.$emit('touchstart', event);
+        },
+        onTouchMove(event) {
+            this.$emit('touchmove', event);
+        },
+        onTouchEnd(event) {
+            this.$emit('touchend', event);
+        },
+        async getCanvasNode(id = this.canvasId, isCanvas = true) {
+            return new Promise((resolve) => {
+                try {
+                    // #ifdef APP-NVUE
+                    setTimeout(() => {
+                        const gcanvas = this.$refs.gcanvas;
+                        if (!gcanvas) {
+                            resolve(false);
+                            return;
+                        }
+                        this._isNvue = true;
+                        resolve(enable(gcanvas, { bridge: WeexBridge }));
+                    }, 100);
+                    // #endif
+
+                    // #ifndef APP-NVUE
+                    uni.createSelectorQuery()
+                        .in(this)
+                        .select(`#${id}`)
+                        .fields(
+                            {
+                                node: isCanvas,
+                                size: true
+                            },
+                            (res) => {
+                                resolve(res || false);
+                            }
+                        )
+                        .exec();
+                    // #endif
+                } catch (error) {
+                    console.error('获取画布节点失败:', error);
+                    resolve(false);
+                }
+            });
+        },
+        getCanvasElement() {
+            return this._canvasElement || null;
+        },
+        getRawContext() {
+            return this.ctx;
+        },
+        getCanvasContext() {
+            // #ifdef APP-PLUS
+            return uni.createCanvasContext(this.canvasId, this);
+            // #endif
+
+            // #ifdef APP-NVUE
+            return this._canvasElement && typeof this._canvasElement.getContext === 'function'
+                ? this._canvasElement.getContext('2d')
+                : null;
+            // #endif
+
+            // #ifdef MP || H5
+            return this._canvasElement && typeof this._canvasElement.getContext === 'function'
+                ? this._canvasElement.getContext('2d')
+                : null;
+            // #endif
+        },
+        async setNewSize() {
+            const rootNode = await this.getCanvasNode(this.rootId, false);
+            if (!rootNode) {
+                return;
+            }
+            if (rootNode.width) {
+                this.widthLocal = rootNode.width;
+            }
+            if (rootNode.height) {
+                this.heightLocal = rootNode.height;
+            }
+        },
+        async initCanvas(force = false) {
+            try {
+                if (this.useRootHeightAndWidth) {
+                    await this.setNewSize();
+                }
+                if (this.ctx && !force) {
+                    this.$emit('ready', {
+                        width: this.actualWidth,
+                        height: this.actualHeight
+                    });
+                    return true;
+                }
+
+                this._canvasNode = await this.getCanvasNode(this.canvasId);
+                if (!this._canvasNode) {
+                    return false;
+                }
+
+                this._selectorResult = this._canvasNode;
+                this._canvasElement = this._canvasNode.node || this._canvasNode;
+                this.dpr = uni.getSystemInfoSync().pixelRatio || 1;
+
+                // #ifdef MP || H5
+                if (this._canvasElement) {
+                    this._canvasElement.width = Math.ceil(this.actualWidth * this.dpr);
+                    this._canvasElement.height = Math.ceil(this.actualHeight * this.dpr);
+                }
+                // #endif
+
+                this.ctx = this.getCanvasContext();
+                if (!this.ctx) {
+                    return false;
+                }
+
+                // #ifdef MP || H5
+                if (typeof this.ctx.setTransform === 'function') {
+                    this.ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+                } else if (typeof this.ctx.scale === 'function') {
+                    this.ctx.scale(this.dpr, this.dpr);
+                }
+                // #endif
+
+                this.applyFont();
+                this.clearCanvas();
+                this.$emit('ready', {
+                    width: this.actualWidth,
+                    height: this.actualHeight
+                });
+                return true;
+            } catch (error) {
+                console.error('初始化Canvas失败:', error);
+                return false;
+            }
+        },
+        refresh() {
+            return this.initCanvas(true);
+        },
+        getWidth() {
+            return this.actualWidth;
+        },
+        getHeight() {
+            return this.actualHeight;
+        },
+        clearCanvas() {
+            if (!this.ctx) return;
+            this.clearRect(0, 0, this.actualWidth, this.actualHeight);
+            if (this.bgColor && this.bgColor !== 'transparent') {
+                this.beginPath();
+                this.rect(0, 0, this.actualWidth, this.actualHeight);
+                this.setFillStyle(this.bgColor);
+                this.fill();
+            }
+            this.draw();
+        },
+        callContext(method, ...args) {
+            if (this.ctx && typeof this.ctx[method] === 'function') {
+                return this.ctx[method](...args);
+            }
+            return undefined;
+        },
+        rect(x, y, width, height) {
+            return this.callContext('rect', x, y, width, height);
+        },
+        clearRect(x, y, width, height) {
+            return this.callContext('clearRect', x, y, width, height);
+        },
+        fillRect(x, y, width, height) {
+            return this.callContext('fillRect', x, y, width, height);
+        },
+        strokeRect(x, y, width, height) {
+            return this.callContext('strokeRect', x, y, width, height);
+        },
+        fill() {
+            return this.callContext('fill');
+        },
+        stroke() {
+            return this.callContext('stroke');
+        },
+        beginPath() {
+            return this.callContext('beginPath');
+        },
+        closePath() {
+            return this.callContext('closePath');
+        },
+        moveTo(x, y) {
+            return this.callContext('moveTo', x, y);
+        },
+        lineTo(x, y) {
+            return this.callContext('lineTo', x, y);
+        },
+        arc(x, y, radius, startAngle, endAngle, anticlockwise = false) {
+            return this.callContext('arc', x, y, radius, startAngle, endAngle, anticlockwise);
+        },
+        bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) {
+            return this.callContext('bezierCurveTo', cp1x, cp1y, cp2x, cp2y, x, y);
+        },
+        quadraticCurveTo(cpx, cpy, x, y) {
+            return this.callContext('quadraticCurveTo', cpx, cpy, x, y);
+        },
+        clip() {
+            return this.callContext('clip');
+        },
+        save() {
+            return this.callContext('save');
+        },
+        restore() {
+            return this.callContext('restore');
+        },
+        translate(x, y) {
+            return this.callContext('translate', x, y);
+        },
+        rotate(angle) {
+            return this.callContext('rotate', angle);
+        },
+        scale(x, y) {
+            return this.callContext('scale', x, y);
+        },
+        setFillStyle(color) {
+            if (!this.ctx) return;
+            if (typeof this.ctx.setFillStyle === 'function') {
+                this.ctx.setFillStyle(color);
+            } else {
+                this.ctx.fillStyle = color;
+            }
+        },
+        setStrokeStyle(color) {
+            if (!this.ctx) return;
+            if (typeof this.ctx.setStrokeStyle === 'function') {
+                this.ctx.setStrokeStyle(color);
+            } else {
+                this.ctx.strokeStyle = color;
+            }
+        },
+        setLineWidth(width) {
+            if (!this.ctx) return;
+            if (typeof this.ctx.setLineWidth === 'function') {
+                this.ctx.setLineWidth(width);
+            } else {
+                this.ctx.lineWidth = width;
+            }
+        },
+        setLineCap(lineCap = 'round') {
+            if (!this.ctx) return;
+            if (typeof this.ctx.setLineCap === 'function') {
+                this.ctx.setLineCap(lineCap);
+            } else {
+                this.ctx.lineCap = lineCap;
+            }
+        },
+        setLineJoin(lineJoin = 'round') {
+            if (!this.ctx) return;
+            if (typeof this.ctx.setLineJoin === 'function') {
+                this.ctx.setLineJoin(lineJoin);
+            } else {
+                this.ctx.lineJoin = lineJoin;
+            }
+        },
+        setTextAlign(align = 'left') {
+            if (!this.ctx) return;
+            if (typeof this.ctx.setTextAlign === 'function') {
+                this.ctx.setTextAlign(align);
+            } else {
+                this.ctx.textAlign = align;
+            }
+        },
+        setTextBaseline(baseline = 'alphabetic') {
+            if (!this.ctx) return;
+            if (typeof this.ctx.setTextBaseline === 'function') {
+                this.ctx.setTextBaseline(baseline);
+            } else {
+                this.ctx.textBaseline = baseline;
+            }
+        },
+        setFontSize(fontSize) {
+            this.fontSize = Number(fontSize) || this.fontSize;
+            if (this.ctx && typeof this.ctx.setFontSize === 'function') {
+                this.ctx.setFontSize(this.fontSize);
+            }
+            this.applyFont();
+        },
+        setFont(font) {
+            if (!this.ctx) return;
+            if ('font' in this.ctx) {
+                this.ctx.font = font;
+                return;
+            }
+            const matched = String(font).match(/(\d+(?:\.\d+)?)px/);
+            if (matched) {
+                this.fontSize = Number(matched[1]);
+            }
+            this.applyFont();
+        },
+        setGlobalAlpha(alpha) {
+            if (!this.ctx) return;
+            if (typeof this.ctx.setGlobalAlpha === 'function') {
+                this.ctx.setGlobalAlpha(alpha);
+            } else {
+                this.ctx.globalAlpha = alpha;
+            }
+        },
+        setShadow(offsetX = 0, offsetY = 0, blur = 0, color = 'rgba(0,0,0,0)') {
+            if (!this.ctx) return;
+            if (typeof this.ctx.setShadow === 'function') {
+                this.ctx.setShadow(offsetX, offsetY, blur, color);
+                return;
+            }
+            this.ctx.shadowOffsetX = offsetX;
+            this.ctx.shadowOffsetY = offsetY;
+            this.ctx.shadowBlur = blur;
+            this.ctx.shadowColor = color;
+        },
+        setLineStyle(lineColor, lineWidth) {
+            this.setLineCap('round');
+            this.setLineJoin('round');
+            this.setStrokeStyle(lineColor);
+            this.setLineWidth(lineWidth);
+        },
+        applyFont() {
+            if (!this.ctx) return;
+            const font = `${this.fontWeight === 'normal' ? '' : `${this.fontWeight} `}${this.fontSize}px ${this.fontFamily}`.trim();
+            if ('font' in this.ctx) {
+                this.ctx.font = font;
+            } else if (typeof this.ctx.setFont === 'function') {
+                this.ctx.setFont(font);
+            } else if (typeof this.ctx.setFontSize === 'function') {
+                this.ctx.setFontSize(this.fontSize);
+            }
+        },
+        fillText(text, x, y) {
+            return this.callContext('fillText', String(text), x, y);
+        },
+        measureText(text) {
+            if (this.ctx && typeof this.ctx.measureText === 'function') {
+                return this.ctx.measureText(String(text));
+            }
+            return {
+                width: String(text).length * this.fontSize * 0.6
+            };
+        },
+        createLinearGradient(x0, y0, x1, y1) {
+            if (this.ctx && typeof this.ctx.createLinearGradient === 'function') {
+                return this.ctx.createLinearGradient(x0, y0, x1, y1);
+            }
+            return null;
+        },
+        createRadialGradient(x0, y0, r0, x1, y1, r1) {
+            if (this.ctx && typeof this.ctx.createRadialGradient === 'function') {
+                return this.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
+            }
+            return null;
+        },
+        loadImage(src) {
+            if (this._imageCache[src]) {
+                return Promise.resolve(this._imageCache[src]);
+            }
+            return new Promise((resolve, reject) => {
+                let image = null;
+
+                // #ifdef APP-NVUE
+                image = new GImage();
+                // #endif
+
+                // #ifdef MP
+                const canvas = this.getCanvasElement();
+                if (canvas && typeof canvas.createImage === 'function') {
+                    image = canvas.createImage();
+                }
+                // #endif
+
+                // #ifdef H5
+                image = new Image();
+                image.crossOrigin = 'anonymous';
+                // #endif
+
+                if (!image) {
+                    resolve(src);
+                    return;
+                }
+
+                image.onload = () => {
+                    this._imageCache[src] = image;
+                    resolve(image);
+                };
+                image.onerror = reject;
+                image.src = src;
+            });
+        },
+        async drawImage(source, ...args) {
+            if (!this.ctx || typeof this.ctx.drawImage !== 'function') {
+                return false;
+            }
+            if (typeof source !== 'string' || (typeof this.ctx.setFillStyle === 'function' && !this._isNvue)) {
+                this.ctx.drawImage(source, ...args);
+                return true;
+            }
+            const image = await this.loadImage(source);
+            this.ctx.drawImage(image, ...args);
+            return true;
+        },
+        draw(isLastDraw = false, callback) {
+            if (this.ctx && typeof this.ctx.draw === 'function') {
+                return this.ctx.draw(isLastDraw, callback);
+            }
+            if (typeof callback === 'function') {
+                setTimeout(callback, 0);
+            }
+            return undefined;
+        },
+        toTempFilePath(options = {}) {
+            return new Promise((resolve, reject) => {
+                const width = options.width || this.actualWidth;
+                const height = options.height || this.actualHeight;
+                const request = {
+                    x: options.x || 0,
+                    y: options.y || 0,
+                    width,
+                    height,
+                    destWidth: options.destWidth || width,
+                    destHeight: options.destHeight || height,
+                    fileType: options.fileType || 'png',
+                    quality: options.quality === undefined ? 1 : options.quality
+                };
+                const success = (res) => {
+                    if (typeof options.success === 'function') options.success(res);
+                    resolve(res);
+                };
+                const fail = (err) => {
+                    if (typeof options.fail === 'function') options.fail(err);
+                    reject(err);
+                };
+                const complete = (res) => {
+                    if (typeof options.complete === 'function') options.complete(res);
+                };
+
+                // #ifdef H5
+                const canvas = this.getCanvasElement() || (this.ctx && this.ctx.canvas);
+                if (canvas && typeof canvas.toDataURL === 'function') {
+                    try {
+                        let exportCanvas = canvas;
+                        if (
+                            request.x !== 0 ||
+                            request.y !== 0 ||
+                            request.width !== this.actualWidth ||
+                            request.height !== this.actualHeight ||
+                            request.destWidth !== request.width ||
+                            request.destHeight !== request.height
+                        ) {
+                            exportCanvas = document.createElement('canvas');
+                            exportCanvas.width = request.destWidth;
+                            exportCanvas.height = request.destHeight;
+                            const exportCtx = exportCanvas.getContext('2d');
+                            exportCtx.drawImage(
+                                canvas,
+                                request.x * this.dpr,
+                                request.y * this.dpr,
+                                request.width * this.dpr,
+                                request.height * this.dpr,
+                                0,
+                                0,
+                                request.destWidth,
+                                request.destHeight
+                            );
+                        }
+                        const mime = request.fileType === 'jpg' || request.fileType === 'jpeg'
+                            ? 'image/jpeg'
+                            : 'image/png';
+                        const res = {
+                            tempFilePath: exportCanvas.toDataURL(mime, request.quality)
+                        };
+                        success(res);
+                        complete(res);
+                        return;
+                    } catch (error) {
+                        fail(error);
+                        complete(error);
+                        return;
+                    }
+                }
+                // #endif
+
+                // #ifdef APP-NVUE
+                if (this.ctx && typeof this.ctx.toTempFilePath === 'function') {
+                    this.ctx.toTempFilePath(
+                        request.x,
+                        request.y,
+                        request.width,
+                        request.height,
+                        request.destWidth,
+                        request.destHeight,
+                        request.fileType,
+                        request.quality,
+                        (res) => {
+                            success(res);
+                            complete(res);
+                        }
+                    );
+                    return;
+                }
+                // #endif
+
+                const canvasNode = this.getCanvasElement();
+                const uniOptions = {
+                    ...request,
+                    canvasId: this.canvasId,
+                    success,
+                    fail,
+                    complete
+                };
+                if (canvasNode) {
+                    uniOptions.canvas = canvasNode;
+                }
+                uni.canvasToTempFilePath(uniOptions, this);
+            });
+        },
+        async exportImage(fileType = 'png', quality = 1) {
+            const res = await this.toTempFilePath({
+                fileType,
+                quality,
+                width: this.actualWidth,
+                height: this.actualHeight,
+                destWidth: this.actualWidth,
+                destHeight: this.actualHeight
+            });
+            return res.tempFilePath || res.apFilePath;
+        },
+        getImageData(options = {}) {
+            return new Promise((resolve, reject) => {
+                const request = {
+                    canvasId: this.canvasId,
+                    x: options.x || 0,
+                    y: options.y || 0,
+                    width: options.width || this.actualWidth,
+                    height: options.height || this.actualHeight,
+                    success: (res) => {
+                        if (typeof options.success === 'function') options.success(res);
+                        resolve(res);
+                    },
+                    fail: (err) => {
+                        if (typeof options.fail === 'function') options.fail(err);
+                        reject(err);
+                    },
+                    complete: options.complete
+                };
+                uni.canvasGetImageData(request, this);
+            });
+        },
+        putImageData(options = {}) {
+            return new Promise((resolve, reject) => {
+                const request = {
+                    canvasId: this.canvasId,
+                    x: options.x || 0,
+                    y: options.y || 0,
+                    width: options.width || this.actualWidth,
+                    height: options.height || this.actualHeight,
+                    data: options.data,
+                    success: (res) => {
+                        if (typeof options.success === 'function') options.success(res);
+                        resolve(res);
+                    },
+                    fail: (err) => {
+                        if (typeof options.fail === 'function') options.fail(err);
+                        reject(err);
+                    },
+                    complete: options.complete
+                };
+                uni.canvasPutImageData(request, this);
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+    .u-canvas {
+        position: relative;
+        overflow: hidden;
+    }
+
+    .u-canvas__canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+</style>