uview-plus 3.8.130 → 3.8.135

package/changelog.md

@@ -1,3 +1,58 @@
+## 3.8.135
+feat: 新增 u-lottie 动画组件，u-upload 新增 mediaType 并修复 chooseMedia 平台判断
+
+本次更新新增 Lottie 动画组件 u-lottie，覆盖 H5/App-Vue、微信小程序与鸿蒙多端渲染；同时为 u-upload 补上 mediaType 属性，并修复 chooseMedia 按平台硬编码导致的兼容性问题。
+
+- 新增 u-lottie 组件：支持 filePath 传入动画 JSON 地址（http(s)，H5 / App-Vue 额外支持本地静态路径），或 animationData 直接传入 Lottie JSON 对象（优先级高于 filePath）；可配置 contentModel 内容填充模式（ScaleToFill / AspectFill / Center）、loop 循环播放、autoplay 数据与引擎就绪后自动播放
+- u-lottie 跨端渲染：H5 / App-Vue 基于 lottie-web SVG 渲染器，H5 端引擎按需加载、加载失败自动清理；微信小程序基于 lottie-miniprogram 画布渲染；鸿蒙通过 harmony-canvas-adapter 画布适配，并修复同步渲染未提交绘制的问题
+- u-lottie 实例方法：reload / playAnimation / pauseAnimation / resumeAnimation / cancelAnimation；statechange 事件统一回报 ready / play / pause / resume / stop / complete / error 状态（微信小程序从 event.detail 读取）
+- u-upload：新增 mediaType 属性（默认 ['image', 'video']），accept 为 media 时透传给 chooseMedia 控制可选文件类型（image / video / mix）
+- u-upload：chooseMedia 不再做平台编译判断，改为运行时检测接口是否存在，不存在时自动回退到 chooseImage，修复部分平台 accept="media" 直接报错的问题
+- 新增 componentsD/lottie 示例页
+
+## 3.8.134
+fix: 修复 up-cropper 小程序端底部操作栏透出页面与导出参数失效
+
+本次更新修复 u-cropper 的三个问题：iOS 上底部操作栏与页面浮动元素重叠、quality 参数完全失效，以及小数质量被悄悄改回 0.9。
+
+- u-cropper：修复 iOS 上底部操作栏与页面浮动按钮/标签重叠的问题。画布高度减掉了底部安全区，而操作栏仍是 50px 贴在屏幕最底，两者之间露出一条约安全区高度的页面背景，页面上浮动的元素会从这条缝里透出来；安卓 safeAreaInsets.bottom 为 0，所以只有苹果机能看到。现在操作栏高度改为 50px + 安全区并用 padding-bottom 让出，与画布严丝合缝，按钮也完整位于 home 指示条上方
+- u-cropper：新增 fileType 属性（默认 png，可选 png/jpg）。原先 5 处导出都把 fileType 硬编码为 png，PNG 是无损格式、没有质量档位，quality 形同虚设；只有 jpg 才会按 quality 压缩，chooseImage 的 params 也可覆盖
+- u-cropper：修复 quality 归一化使用 parseInt 导致 parseInt(0.5) 为 0、被 `|| 0.9` 改回 0.9 的问题，改用 parseFloat 并夹取到 0-1，number 与数字字符串都认
+- u-cropper：safeAreaInsets 取值增加兜底，个别端取不到时不再算出 NaN 把布局顶飞
+- 升级说明：fileType 默认仍为 png，输出格式与升级前一致，不需要改代码；需要压缩体积时显式传 fileType="jpg" 并配合 quality
+- 回归验证：新增 scripts/verify-cropper-export-and-safe-area.mjs，直接加载组件脚本真实调用 computed 与方法，锁住操作栏安全区样式、fileType 透传与 quality 归一化
+
+## 3.8.133
+fix: 修复微信小程序数字键盘退格键短按无效，toast 新增 overlay 属性支持提示期间穿透页面
+
+本次更新修复 3.8.x 近期引入的两个小程序体验问题，并补上 toast 提示期间页面可操作的能力。
+
+- u-number-keyboard：去掉退格键 @touchstart 上残留的 .stop，修复微信小程序 catchtouchstart 吞掉同一节点 tap，导致短按退格不删除内容、只剩长按连删有效的问题
+- u-number-keyboard：补充 @touchcancel 清理定时器，避免触摸被系统手势或滚动打断后长按连删定时器空转
+- u-toast：新增 overlay 属性（默认 true），设置 :overlay="false" 后遮罩由铺满全屏收缩为跟随内容大小并居中的浮动层，提示期间点击与滚动可穿透页面；show() 未显式传值时回落到该 prop，show({ overlay }) 仍然优先
+- types/comps/toast.d.ts 的 ToastProps 补上 overlay，IDE 可提示
+- 回归验证：新增键盘退格点击行为与 toast overlay 穿透两个验证脚本，改动前均失败
+
+## 3.8.132
+feat: 新增 u-goods-sku 默认选中与安全区配置，并修复 calc.div 精度崩溃
+
+本次更新包含商品 SKU 组件的默认选中能力、底部安全区开关，以及修复浮点除法在无 xyutil 环境下崩溃的问题。
+
+- u-goods-sku：新增 defaultSku 属性，支持设置默认选中的 SKU，并支持响应式更新与重置恢复（#1070）
+- u-goods-sku：新增 safeAreaInsetBottom 属性（默认 true），可关闭底部安全距离，并透传给 u-popup
+- calc.div：改用 digit.divide 实现，避免依赖未定义的 xyutil，修复运行环境为空时的崩溃
+- 回归验证：新增 u-goods-sku 默认选中与 calc.div 精度验证脚本
+
+## 3.8.131
+fix: 修复微信小程序 u-text 的 v-bind 编译报错
+
+修复 3.8.128 引入的 u-text 小程序编译兼容性回归，恢复组件原有的属性继承行为。
+
+- u-text：移除原生 button 上不受小程序编译器支持的 v-bind="$attrs"，修复 v-bind="" is not supported. 报错。
+- u-text：恢复根节点属性继承，避免普通文本的 id、data-* 等属性丢失；保留原有 data-index、open-type 属性与事件绑定。
+- 回归验证：新增真实微信小程序模板编译和 H5 属性继承测试，并通过微信小程序全量构建。
+- 升级说明：撤回 3.8.128 中任意 data-* 属性向内部分享按钮的自动透传尝试；需要自定义分享数据时，请使用原生 button 显式绑定 data-* 并设置 open-type="share"。
+
 ## 3.8.130
 fix: 修复微信小程序 u-text 的 v-bind 编译报错
 

package/components/u-cropper/u-cropper.vue

@@ -4,7 +4,7 @@
 		<up-canvas ref="avatarCanvas" :canvas-id="'avatar-canvas-' + instanceId" class="my-canvas" :width="windowWidth || 0" :height="windowHeight || 0" :style="{ top: styleTop, height: cvsStyleHeight }" bg-color="transparent"></up-canvas>
 		<up-canvas ref="operCanvas" :canvas-id="'oper-canvas-' + instanceId" class="oper-canvas" :width="windowWidth || 0" :height="windowHeight || 0" :style="{ top: styleTop, height: cvsStyleHeight }" bg-color="transparent" @touchstart="start" @touchmove="move" @touchend="end"></up-canvas>
 		<up-canvas ref="prvCanvas" :canvas-id="'prv-canvas-' + instanceId" class="prv-canvas" :width="windowWidth || 0" :height="windowHeight || 0" bg-color="transparent" @touchstart="hideImg" :style="{ height: cvsStyleHeight, top: prvTop }"></up-canvas>
-		<view class="oper-wrapper" :style="{ display: styleDisplay }">
+		<view class="oper-wrapper" :style="operStyle">
 			<view class="oper">
 				<view class="btn-wrapper" v-if="showOper">
 					<view class="u-cropper__action" @click="select" hover-class="hover" :style="{ width: btnWidth }">
@@ -91,7 +91,9 @@
 			lock: '',
 			noTab: true,
 			inner: false,
-			quality: '',
+			quality: '',
+			// 导出图片格式：png 为无损压缩（quality 不生效），jpg 才会按 quality 压缩
+			fileType: 'png',
 			index: '',
 			canChangeSize: false,
 			areaWidth: '300rpx',
@@ -107,11 +109,29 @@
 				default: 'transparent'
 			},
 		},
+		computed: {
+			// 导出图片格式：png 无损，quality 不生效；只有 jpg 才会按 quality 压缩
+			expFileType() {
+				const type = String(this.fileType || '').toLowerCase();
+				return type === 'jpg' || type === 'jpeg' ? 'jpg' : 'png';
+			},
+			// 底部操作栏样式：把底部安全区算进高度并用 padding-bottom 留出。
+			// 画布高度减掉了安全区，而操作栏仍是 50px 贴屏幕最底，两者之间会露出一
+			// 条页面背景，页面上浮动的按钮/标签会从这条缝里透出来，和裁剪底部按钮重叠。
+			operStyle() {
+				const safe = Math.max(0, parseInt(this.safeAreaInsetsBottom) || 0);
+				return {
+					display: this.styleDisplay,
+					height: (tabHeight + safe) + 'px',
+					paddingBottom: safe + 'px'
+				};
+			}
+		},
 		created() {
 			this.ctxCanvas = null;
 			this.ctxCanvasOper = null;
 			this.ctxCanvasPrv = null;
-			this.qlty = parseInt(this.quality) || 0.9;
+			this.qlty = this.parseQuality(this.quality);
 			this.imgSrc.imgSrc = this.imageSrc;
 			this.letRotate = (this.canRotate === false || this.inner === true) ? 0 : 1;
 			this.letScale = this.canScale === false ? 0 : 1;
@@ -147,7 +167,14 @@
 		mounted() {
 			this.initCanvasRefs(true);
 		},
-		methods: {
+		methods: {
+			// 图片质量归一化：接受 number 与数字字符串，越界夹到 0-1，无效值回落 0.9
+			// 原来用 parseInt，parseInt(0.5) 是 0，`|| 0.9` 会把所有小数质量悄悄改回 0.9
+			parseQuality(value) {
+				const num = parseFloat(value);
+				if (isNaN(num)) return 0.9;
+				return Math.min(1, Math.max(0, num));
+			},
 			t,
 			async initCanvasRefs(force = false) {
 				await this.$nextTick();
@@ -170,7 +197,7 @@
 				this.platform = sysInfo.platform;
 				this.pixelRatio = sysInfo.pixelRatio;
 				this.windowWidth = sysInfo.windowWidth;
-				this.safeAreaInsetsBottom = sysInfo.safeAreaInsets.bottom;
+				this.safeAreaInsetsBottom = (sysInfo.safeAreaInsets && sysInfo.safeAreaInsets.bottom) || 0;
 				// #ifdef H5
 				this.drawTop = sysInfo.windowTop;
 				this.windowHeight = sysInfo.windowHeight + sysInfo.windowBottom;
@@ -319,7 +346,7 @@
 					height: height,
 					destWidth: expWidth,
 					destHeight: expHeight,
-					fileType: 'png',
+					fileType: this.expFileType,
 					quality: this.qlty,
 					success: (r) => {
 						r = r.tempFilePath;
@@ -339,7 +366,7 @@
 										height: expHeight,
 										destWidth: expWidth,
 										destHeight: expHeight,
-										fileType: 'png',
+										fileType: this.expFileType,
 										quality: this.qlty,
 										success: (r) => {
 											r = r.tempFilePath;
@@ -413,7 +440,7 @@
 					height: prvHeight,
 					destWidth: expWidth,
 					destHeight: expHeight,
-					fileType: 'png',
+					fileType: this.expFileType,
 					quality: this.qlty,
 					success: (r) => {
 						r = r.tempFilePath;
@@ -433,7 +460,7 @@
 										height: expHeight,
 										destWidth: expWidth,
 										destHeight: expHeight,
-										fileType: 'png',
+										fileType: this.expFileType,
 										quality: this.qlty,
 										success: (r) => {
 											r = r.tempFilePath;
@@ -670,7 +697,7 @@
 					y: y,
 					width: width,
 					height: height,
-					fileType: 'png',
+					fileType: this.expFileType,
 					quality: this.qlty,
 					success: async (r) => {
 						// console.log(r)
@@ -737,7 +764,8 @@
 						areaHeight = params.areaHeight || this.areaHeight,
 						expWidth = params.exportWidth || this.exportWidth,
 						expHeight = params.exportHeight || this.exportHeight,
-						quality = params.quality,
+						quality = params.quality,
+						fileType = params.fileType,
 						canRotate = params.canRotate,
 						canScale = params.canScale,
 						canChangeSize = params.canChangeSize,
@@ -755,7 +783,8 @@
 					this.letScale = canScale === false ? 0 : 1;
 					// 设置是否允许调整裁剪框大小
 					this.letChangeSize = canChangeSize || false;
-					this.qlty = parseInt(quality) || 0.9;
+					this.qlty = this.parseQuality(quality);
+					if (fileType) this.fileType = fileType;
 					this.mnScale = minScale || 0.3;
 					this.mxScale = maxScale || 4;
 					this.stc = stretch;

package/components/u-goods-sku/u-goods-sku.vue

@@ -8,6 +8,7 @@
             mode="bottom"
             :closeable="pageInline ? false : closeable"
             :pageInline="pageInline"
+            :safeAreaInsetBottom="safeAreaInsetBottom"
             :border-radius="20"
             @close="close"
             @closed="$emit('closed')"
@@ -96,6 +97,11 @@
 				type: Array,
 				default: () => []
 			},
+			// 默认选中的SKU
+			defaultSku: {
+				type: Object,
+				default: () => ({})
+			},
 			// 最大购买数量
 			maxBuy: {
 				type: Number,
@@ -115,13 +121,18 @@
             pageInline: {
 				type: Boolean,
 				default: false
+			},
+            // 是否留出底部安全距离
+            safeAreaInsetBottom: {
+				type: Boolean,
+				default: true
 			}
 		},
 		data() {
 			return {
                 show: false,
 				// 已选择的SKU
-				selectedSku: {},
+				selectedSku: { ...this.defaultSku },
 				// 购买数量
 				buyNum: 1
 			}
@@ -175,6 +186,11 @@
 			}
 		},
 		watch: {
+			defaultSku: {
+				handler(sku) {
+					this.selectedSku = { ...(sku || {}) }
+				}
+			}
 		},
         emits: ['open', 'confirm', 'close', 'closed'],
         created() {
@@ -281,7 +297,7 @@
 			},
 			// 重置选择
 			reset() {
-				this.selectedSku = {}
+				this.selectedSku = { ...this.defaultSku }
 				this.buyNum = 1
 			},
             open() {

package/components/u-lottie/libs/LICENSE-lottie-miniprogram

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 wechat-miniprogram
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/u-lottie/libs/LICENSE-lottie-web

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Bodymovin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/components/u-lottie/libs/harmony-canvas-adapter.js

@@ -0,0 +1,394 @@
+function parseFontSize(font) {
+    const matched = String(font || '').match(/(\d+(?:\.\d+)?)px/)
+    return matched ? Number(matched[1]) : 10
+}
+
+export function createHarmonyCanvasAdapter(options = {}) {
+    const legacy = options.context
+    if (!legacy) {
+        throw new Error('harmony canvas context is required')
+    }
+
+    const width = Number(options.width) > 0 ? Number(options.width) : 1
+    const height = Number(options.height) > 0 ? Number(options.height) : 1
+
+    const state = {
+        fillStyle: '#000000',
+        strokeStyle: '#000000',
+        lineWidth: 1,
+        lineCap: 'butt',
+        lineJoin: 'miter',
+        miterLimit: 10,
+        lineDashOffset: 0,
+        lineDash: [],
+        globalAlpha: 1,
+        globalCompositeOperation: 'source-over',
+        font: '10px sans-serif'
+    }
+    const stack = []
+    const rafIds = new Set()
+    let dirty = false
+    let flushing = false
+    let destroyed = false
+    let flushTimer = null
+
+    const flush = () => {
+        if (destroyed || !dirty || flushing) return
+        dirty = false
+        flushing = true
+        let released = false
+        const release = () => {
+            if (released) return
+            released = true
+            flushing = false
+            if (dirty) scheduleFlush()
+        }
+        try {
+            if (typeof legacy.draw === 'function') {
+                legacy.draw(false, release)
+                setTimeout(release, 80)
+            } else {
+                release()
+            }
+        } catch (error) {
+            release()
+        }
+    }
+
+    const scheduleFlush = () => {
+        if (destroyed || flushTimer !== null) return
+        const timer = setTimeout(() => {
+            rafIds.delete(timer)
+            if (flushTimer === timer) flushTimer = null
+            flush()
+        }, 0)
+        flushTimer = timer
+        rafIds.add(timer)
+    }
+
+    const markDirty = () => {
+        dirty = true
+        scheduleFlush()
+    }
+
+    const sync = () => {
+        if (typeof legacy.setFillStyle === 'function') {
+            legacy.setFillStyle(state.fillStyle)
+        }
+        if (typeof legacy.setStrokeStyle === 'function') {
+            legacy.setStrokeStyle(state.strokeStyle)
+        }
+        if (typeof legacy.setLineWidth === 'function') {
+            legacy.setLineWidth(state.lineWidth)
+        }
+        if (typeof legacy.setLineCap === 'function') {
+            legacy.setLineCap(state.lineCap)
+        }
+        if (typeof legacy.setLineJoin === 'function') {
+            legacy.setLineJoin(state.lineJoin)
+        }
+        if (typeof legacy.setMiterLimit === 'function') {
+            legacy.setMiterLimit(state.miterLimit)
+        }
+        if (typeof legacy.setGlobalAlpha === 'function') {
+            legacy.setGlobalAlpha(state.globalAlpha)
+        }
+        if (typeof legacy.setGlobalCompositeOperation === 'function') {
+            legacy.setGlobalCompositeOperation(state.globalCompositeOperation)
+        }
+        if (typeof legacy.setLineDash === 'function') {
+            legacy.setLineDash(state.lineDash, state.lineDashOffset)
+        }
+        if (typeof legacy.setFontSize === 'function') {
+            legacy.setFontSize(parseFontSize(state.font))
+        }
+    }
+
+    const canvas = {
+        width,
+        height,
+        getContext() {
+            return context
+        },
+        requestAnimationFrame(callback) {
+            const timer = setTimeout(() => {
+                rafIds.delete(timer)
+                if (destroyed) return
+                try {
+                    callback(Date.now())
+                } finally {
+                    flush()
+                }
+            }, 33)
+            rafIds.add(timer)
+            return timer
+        },
+        cancelAnimationFrame(timer) {
+            if (rafIds.has(timer)) {
+                clearTimeout(timer)
+                rafIds.delete(timer)
+            }
+        },
+        createImage() {
+            const image = {
+                width: 0,
+                height: 0,
+                _src: '',
+                _localPath: '',
+                onload: null,
+                onerror: null,
+                addEventListener(type, callback) {
+                    if (type === 'load') image.onload = callback
+                    if (type === 'error') image.onerror = callback
+                }
+            }
+            Object.defineProperty(image, 'src', {
+                get() {
+                    return image._src
+                },
+                set(value) {
+                    image._src = value
+                    uni.getImageInfo({
+                        src: value,
+                        success(result) {
+                            image.width = result.width || 0
+                            image.height = result.height || 0
+                            image._localPath = result.path || value
+                            if (typeof image.onload === 'function') image.onload()
+                        },
+                        fail() {
+                            if (typeof image.onerror === 'function') image.onerror()
+                        }
+                    })
+                }
+            })
+            return image
+        }
+    }
+
+    const context = {
+        canvas,
+        get fillStyle() {
+            return state.fillStyle
+        },
+        set fillStyle(value) {
+            state.fillStyle = value
+        },
+        get strokeStyle() {
+            return state.strokeStyle
+        },
+        set strokeStyle(value) {
+            state.strokeStyle = value
+        },
+        get lineWidth() {
+            return state.lineWidth
+        },
+        set lineWidth(value) {
+            state.lineWidth = value
+        },
+        get lineCap() {
+            return state.lineCap
+        },
+        set lineCap(value) {
+            state.lineCap = value
+        },
+        get lineJoin() {
+            return state.lineJoin
+        },
+        set lineJoin(value) {
+            state.lineJoin = value
+        },
+        get miterLimit() {
+            return state.miterLimit
+        },
+        set miterLimit(value) {
+            state.miterLimit = value
+        },
+        get lineDashOffset() {
+            return state.lineDashOffset
+        },
+        set lineDashOffset(value) {
+            state.lineDashOffset = value
+        },
+        get globalAlpha() {
+            return state.globalAlpha
+        },
+        set globalAlpha(value) {
+            state.globalAlpha = value
+        },
+        get globalCompositeOperation() {
+            return state.globalCompositeOperation
+        },
+        set globalCompositeOperation(value) {
+            state.globalCompositeOperation = value
+        },
+        get font() {
+            return state.font
+        },
+        set font(value) {
+            state.font = value
+        },
+        save() {
+            stack.push(Object.assign({}, state))
+            if (typeof legacy.save === 'function') legacy.save()
+        },
+        restore() {
+            if (stack.length) Object.assign(state, stack.pop())
+            if (typeof legacy.restore === 'function') legacy.restore()
+            sync()
+        },
+        translate(x, y) {
+            legacy.translate(x, y)
+        },
+        scale(x, y) {
+            legacy.scale(x, y)
+        },
+        rotate(angle) {
+            legacy.rotate(angle)
+        },
+        transform(a, b, c, d, e, f) {
+            if (typeof legacy.transform === 'function') {
+                legacy.transform(a, b, c, d, e, f)
+            }
+        },
+        setTransform(a, b, c, d, e, f) {
+            if (typeof legacy.setTransform === 'function') {
+                legacy.setTransform(a, b, c, d, e, f)
+            } else if (typeof legacy.transform === 'function') {
+                legacy.transform(a, b, c, d, e, f)
+            }
+        },
+        beginPath() {
+            legacy.beginPath()
+        },
+        closePath() {
+            legacy.closePath()
+        },
+        moveTo(x, y) {
+            legacy.moveTo(x, y)
+        },
+        lineTo(x, y) {
+            legacy.lineTo(x, y)
+        },
+        bezierCurveTo(a, b, c, d, e, f) {
+            legacy.bezierCurveTo(a, b, c, d, e, f)
+        },
+        quadraticCurveTo(a, b, c, d) {
+            if (typeof legacy.quadraticCurveTo === 'function') {
+                legacy.quadraticCurveTo(a, b, c, d)
+            }
+        },
+        rect(x, y, w, h) {
+            legacy.rect(x, y, w, h)
+        },
+        arc(x, y, radius, start, end, anticlockwise) {
+            if (typeof legacy.arc === 'function') {
+                legacy.arc(x, y, radius, start, end, anticlockwise)
+            }
+        },
+        fill() {
+            sync()
+            legacy.fill()
+            markDirty()
+        },
+        stroke() {
+            sync()
+            legacy.stroke()
+            markDirty()
+        },
+        clip() {
+            if (typeof legacy.clip === 'function') {
+                legacy.clip()
+            }
+        },
+        clearRect(x, y, w, h) {
+            if (typeof legacy.clearRect === 'function') {
+                legacy.clearRect(x, y, w, h)
+            }
+            markDirty()
+        },
+        fillRect(x, y, w, h) {
+            sync()
+            if (typeof legacy.fillRect === 'function') {
+                legacy.fillRect(x, y, w, h)
+            }
+            markDirty()
+        },
+        strokeRect(x, y, w, h) {
+            sync()
+            if (typeof legacy.strokeRect === 'function') {
+                legacy.strokeRect(x, y, w, h)
+            }
+            markDirty()
+        },
+        drawImage() {
+            const image = arguments[0]
+            const source = image && (image._localPath || image._src || image.src)
+            if (!source) return
+            sync()
+            const args = Array.prototype.slice.call(arguments, 1)
+            try {
+                if (args.length >= 8) {
+                    legacy.drawImage(source, args[4], args[5], args[6], args[7])
+                } else if (args.length >= 4) {
+                    legacy.drawImage(source, args[0], args[1], args[2], args[3])
+                } else {
+                    legacy.drawImage(
+                        source,
+                        args[0] || 0,
+                        args[1] || 0,
+                        image.width || 0,
+                        image.height || 0
+                    )
+                }
+                markDirty()
+            } catch (error) {
+                // 单张图片绘制失败时跳过，避免中断整个动画
+            }
+        },
+        createLinearGradient(x0, y0, x1, y1) {
+            return legacy.createLinearGradient(x0, y0, x1, y1)
+        },
+        createRadialGradient(x0, y0, r0, x1, y1, r1) {
+            return legacy.createRadialGradient(x0, y0, r0, x1, y1, r1)
+        },
+        setLineDash(segments, offset) {
+            state.lineDash = Array.isArray(segments) ? segments.slice() : []
+            if (typeof offset === 'number') {
+                state.lineDashOffset = offset
+            }
+        },
+        fillText(text, x, y) {
+            sync()
+            if (typeof legacy.fillText === 'function') {
+                legacy.fillText(text, x, y)
+            }
+            markDirty()
+        },
+        strokeText(text, x, y) {
+            sync()
+            if (typeof legacy.strokeText === 'function') {
+                legacy.strokeText(text, x, y)
+            }
+            markDirty()
+        },
+        measureText(text) {
+            const fontSize = parseFontSize(state.font)
+            return { width: String(text == null ? '' : text).length * fontSize * 0.6 }
+        }
+    }
+
+    return {
+        canvas,
+        context,
+        flush,
+        destroy() {
+            destroyed = true
+            rafIds.forEach((timer) => clearTimeout(timer))
+            rafIds.clear()
+            flushTimer = null
+            dirty = false
+            stack.length = 0
+        }
+    }
+}