更新记录

1.0（2024-03-13）下载此版本

1.0 重构mini-programs-rc项目事件定位及事件嵌套处理流程，组件调用参考附件示例，接口使用相关方法

参考资料：http://t.csdnimg.cn/L3K29

平台兼容性

Vue2	Vue3
×	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
×	×	×	×	×	×	×

钉钉小程序	快手小程序	飞书小程序	京东小程序
×	×	×	×

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
×	×	×	×	×	×	×	×	×

canvas 事件嵌套&页面布局

调用示例部分代码

import { onMounted, getCurrentInstance } from 'vue'; import cax from "@/utils/cax/index" const instance = getCurrentInstance(); const { Stage, Group, Rect, RoundedRect } = cax const render = () => { const { childWidth, spacing } = data.layoutParams stage.empty() data.beats.forEach((beat: any, key: number) => { const group: any = new Group(); group.x = (childWidth + spacing) * key; group.y = 0 beat.forEach((v: any, k: number) => { let fillStyle = "#282828" if (v.valid) { fillStyle = key === curIndex ? "#F00" : "#5f5f5f" } const roundedRect: any = new RoundedRect(childWidth, REACT_HEIGHT, 4, { fillStyle }); roundedRect.y = REACT_Y * (2 - k) group.add(roundedRect); }) group.on('touchstart', handleFrequency); stage.add(group); }) stage.update(); } const queryNode = (select: string) => { return new Promise((resolve, reject) => { uni .createSelectorQuery() .in(instance) .select(select) .node((data) => { resolve(data.node); }) .exec(); }); }; const initCanvas = async () => { canvas = await queryNode('#canvas'); stage = new Stage(canvas, data.width, data.height); render() } onMounted(() => { initCanvas() })

canvas事件嵌套处理及页面布局 canvas 节拍器 教培小程序

更新记录

1.0（2024-03-13）下载此版本

平台兼容性

canvas 事件嵌套&页面布局

调用示例部分代码

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

canvas事件嵌套处理及页面布局

canvas事件嵌套处理及页面布局 canvas 节拍器 教培小程序

更新记录

1.0（2024-03-13） 下载此版本

平台兼容性

canvas 事件嵌套&页面布局

调用示例部分代码

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

canvas事件嵌套处理及页面布局

Modal title

canvas事件嵌套处理及页面布局 canvas 节拍器教培小程序

1.0（2024-03-13）下载此版本