From 44589f9cb50559006b6542e8748a0d4ab545ef0c Mon Sep 17 00:00:00 2001 From: yuanzm Date: Wed, 5 Jun 2024 11:49:39 +0000 Subject: [PATCH] deploy: 934396a0aa936ab009277e5225f684620771a1e5 --- 404.html | 6 +++--- CHANGELOG.html | 4 ++-- api/api.html | 4 ++-- api/style.html | 4 ++-- api/tags.html | 4 ++-- api/tween.html | 4 ++-- assets/{404.html-cafe97ae.js => 404.html-4b3e6783.js} | 2 +- ...HANGELOG.html-35619e25.js => CHANGELOG.html-7f8918ee.js} | 2 +- ...HANGELOG.html-fe05d6a3.js => CHANGELOG.html-9ea461a4.js} | 2 +- assets/{api.html-0f91ca6a.js => api.html-462ea688.js} | 2 +- assets/{api.html-276938aa.js => api.html-64fa6ca5.js} | 2 +- assets/{app-ea6643d5.js => app-af1e9e55.js} | 2 +- ...mapfont.html-04a28794.js => bitmapfont.html-ac9dbca8.js} | 2 +- ...mapfont.html-bedb4f99.js => bitmapfont.html-fac5369d.js} | 2 +- assets/{button.html-234102f6.js => button.html-08c089c7.js} | 2 +- assets/{button.html-53b14087.js => button.html-875962e9.js} | 2 +- assets/{canvas.html-825a0551.js => canvas.html-6252f16d.js} | 2 +- assets/{canvas.html-af48fbc0.js => canvas.html-e76c842f.js} | 2 +- ...{cocos2.x.html-9ad9a920.js => cocos2.x.html-c5d3a370.js} | 2 +- ...{cocos2.x.html-d11580bb.js => cocos2.x.html-ccc307c2.js} | 2 +- .../{element.html-ca33ad4a.js => element.html-4246a337.js} | 2 +- .../{element.html-0483780a.js => element.html-51f0116e.js} | 2 +- assets/{guide.html-5d8a4808.js => guide.html-0f7d6ea3.js} | 2 +- assets/{guide.html-4f8a027e.js => guide.html-5bfa5c1a.js} | 2 +- assets/{guide.html-3d8ab861.js => guide.html-93b55473.js} | 2 +- assets/{guide.html-32f4aad3.js => guide.html-ab7db34f.js} | 2 +- assets/{image.html-af226794.js => image.html-30863611.js} | 2 +- assets/{image.html-070cbf15.js => image.html-aa40003e.js} | 2 +- assets/{index.html-97c40830.js => index.html-34929b9c.js} | 2 +- assets/{index.html-760218d7.js => index.html-70f8fc8c.js} | 2 +- assets/{invite.html-e6964095.js => invite.html-f4d87430.js} | 2 +- assets/{invite.html-aeee0b2c.js => invite.html-fd5c2c95.js} | 2 +- .../{loading.html-265b11a1.js => loading.html-0ed1c6e9.js} | 2 +- .../{loading.html-e77055cb.js => loading.html-8102ceb9.js} | 2 +- ...{overview.html-4ce55a1a.js => overview.html-4039f849.js} | 2 +- ...{overview.html-db387343.js => overview.html-7794e747.js} | 2 +- ...{platform.html-0dcd3617.js => platform.html-09de90c2.js} | 2 +- ...{platform.html-fb530028.js => platform.html-a0d12aa4.js} | 2 +- assets/{plugin.html-30cccd24.js => plugin.html-232641d3.js} | 2 +- assets/{plugin.html-b20bb174.js => plugin.html-9a42a6e6.js} | 2 +- assets/{rank.html-05cfe597.js => rank.html-1a6c9104.js} | 2 +- assets/{rank.html-68a4c1a2.js => rank.html-e364c687.js} | 2 +- assets/{rect.html-6d0bfd40.js => rect.html-2651dea0.js} | 2 +- assets/{rect.html-f2bbe2a1.js => rect.html-9425258f.js} | 2 +- ...{richtext.html-cd0670cf.js => richtext.html-104f8948.js} | 2 +- ...{richtext.html-533e0048.js => richtext.html-31ff4652.js} | 2 +- ...crollbar.html-e4368a11.js => scrollbar.html-3feb5aed.js} | 2 +- ...crollbar.html-b4e2e9bd.js => scrollbar.html-ba50a89c.js} | 2 +- ...ollview.html-79d65deb.js => scrollview.html-8f3f709b.js} | 2 +- ...ollview.html-fd67ea20.js => scrollview.html-99477649.js} | 2 +- assets/{style.html-f6565649.js => style.html-002366e2.js} | 2 +- assets/{style.html-17d017a0.js => style.html-db8345a5.js} | 2 +- assets/{tags.html-c9042894.js => tags.html-12ef7cdd.js} | 2 +- assets/{tags.html-5d877979.js => tags.html-ab11926b.js} | 2 +- ...ine.html-17e466fe.js => templateengine.html-7ced2644.js} | 2 +- ...ine.html-1b239a49.js => templateengine.html-e9ef9b76.js} | 2 +- assets/{text.html-abe59a52.js => text.html-e6c80c3a.js} | 2 +- assets/{text.html-8bfccc71.js => text.html-f03e8081.js} | 2 +- assets/{tween.html-9a1751af.js => tween.html-05b35220.js} | 2 +- assets/{tween.html-acf194c8.js => tween.html-8a91f58b.js} | 2 +- assets/{view.html-2e48d689.js => view.html-d378fd93.js} | 2 +- assets/{view.html-f8cfe1c3.js => view.html-d71163d3.js} | 2 +- components/bitmapfont.html | 4 ++-- components/button.html | 4 ++-- components/canvas.html | 4 ++-- components/element.html | 4 ++-- components/image.html | 4 ++-- components/overview.html | 4 ++-- components/rect.html | 4 ++-- components/scrollbar.html | 4 ++-- components/scrollview.html | 4 ++-- components/text.html | 4 ++-- components/view.html | 4 ++-- demos/invite.html | 4 ++-- demos/rank.html | 4 ++-- index.html | 4 ++-- overview/guide.html | 4 ++-- overview/plugin.html | 4 ++-- plugin/guide.html | 4 ++-- plugin/richtext.html | 4 ++-- tutorial/cocos2.x.html | 4 ++-- tutorial/loading.html | 4 ++-- tutorial/platform.html | 4 ++-- tutorial/templateengine.html | 4 ++-- 84 files changed, 113 insertions(+), 113 deletions(-) rename assets/{404.html-cafe97ae.js => 404.html-4b3e6783.js} (63%) rename assets/{CHANGELOG.html-35619e25.js => CHANGELOG.html-7f8918ee.js} (99%) rename assets/{CHANGELOG.html-fe05d6a3.js => CHANGELOG.html-9ea461a4.js} (69%) rename assets/{api.html-0f91ca6a.js => api.html-462ea688.js} (97%) rename assets/{api.html-276938aa.js => api.html-64fa6ca5.js} (99%) rename assets/{app-ea6643d5.js => app-af1e9e55.js} (97%) rename assets/{bitmapfont.html-04a28794.js => bitmapfont.html-ac9dbca8.js} (97%) rename assets/{bitmapfont.html-bedb4f99.js => bitmapfont.html-fac5369d.js} (84%) rename assets/{button.html-234102f6.js => button.html-08c089c7.js} (87%) rename assets/{button.html-53b14087.js => button.html-875962e9.js} (99%) rename assets/{canvas.html-825a0551.js => canvas.html-6252f16d.js} (99%) rename assets/{canvas.html-af48fbc0.js => canvas.html-e76c842f.js} (89%) rename assets/{cocos2.x.html-9ad9a920.js => cocos2.x.html-c5d3a370.js} (91%) rename assets/{cocos2.x.html-d11580bb.js => cocos2.x.html-ccc307c2.js} (99%) rename assets/{element.html-ca33ad4a.js => element.html-4246a337.js} (94%) rename assets/{element.html-0483780a.js => element.html-51f0116e.js} (99%) rename assets/{guide.html-5d8a4808.js => guide.html-0f7d6ea3.js} (98%) rename assets/{guide.html-4f8a027e.js => guide.html-5bfa5c1a.js} (71%) rename assets/{guide.html-3d8ab861.js => guide.html-93b55473.js} (99%) rename assets/{guide.html-32f4aad3.js => guide.html-ab7db34f.js} (84%) rename assets/{image.html-af226794.js => image.html-30863611.js} (84%) rename assets/{image.html-070cbf15.js => image.html-aa40003e.js} (96%) rename assets/{index.html-97c40830.js => index.html-34929b9c.js} (80%) rename assets/{index.html-760218d7.js => index.html-70f8fc8c.js} (98%) rename assets/{invite.html-e6964095.js => invite.html-f4d87430.js} (94%) rename assets/{invite.html-aeee0b2c.js => invite.html-fd5c2c95.js} (72%) rename assets/{loading.html-265b11a1.js => loading.html-0ed1c6e9.js} (99%) rename assets/{loading.html-e77055cb.js => loading.html-8102ceb9.js} (92%) rename assets/{overview.html-4ce55a1a.js => overview.html-4039f849.js} (99%) rename assets/{overview.html-db387343.js => overview.html-7794e747.js} (93%) rename assets/{platform.html-0dcd3617.js => platform.html-09de90c2.js} (67%) rename assets/{platform.html-fb530028.js => platform.html-a0d12aa4.js} (99%) rename assets/{plugin.html-30cccd24.js => plugin.html-232641d3.js} (92%) rename assets/{plugin.html-b20bb174.js => plugin.html-9a42a6e6.js} (99%) rename assets/{rank.html-05cfe597.js => rank.html-1a6c9104.js} (94%) rename assets/{rank.html-68a4c1a2.js => rank.html-e364c687.js} (72%) rename assets/{rect.html-6d0bfd40.js => rect.html-2651dea0.js} (97%) rename assets/{rect.html-f2bbe2a1.js => rect.html-9425258f.js} (91%) rename assets/{richtext.html-cd0670cf.js => richtext.html-104f8948.js} (73%) rename assets/{richtext.html-533e0048.js => richtext.html-31ff4652.js} (99%) rename assets/{scrollbar.html-e4368a11.js => scrollbar.html-3feb5aed.js} (89%) rename assets/{scrollbar.html-b4e2e9bd.js => scrollbar.html-ba50a89c.js} (99%) rename assets/{scrollview.html-79d65deb.js => scrollview.html-8f3f709b.js} (99%) rename assets/{scrollview.html-fd67ea20.js => scrollview.html-99477649.js} (90%) rename assets/{style.html-f6565649.js => style.html-002366e2.js} (98%) rename assets/{style.html-17d017a0.js => style.html-db8345a5.js} (87%) rename assets/{tags.html-c9042894.js => tags.html-12ef7cdd.js} (95%) rename assets/{tags.html-5d877979.js => tags.html-ab11926b.js} (99%) rename assets/{templateengine.html-17e466fe.js => templateengine.html-7ced2644.js} (94%) rename assets/{templateengine.html-1b239a49.js => templateengine.html-e9ef9b76.js} (99%) rename assets/{text.html-abe59a52.js => text.html-e6c80c3a.js} (95%) rename assets/{text.html-8bfccc71.js => text.html-f03e8081.js} (80%) rename assets/{tween.html-9a1751af.js => tween.html-05b35220.js} (91%) rename assets/{tween.html-acf194c8.js => tween.html-8a91f58b.js} (99%) rename assets/{view.html-2e48d689.js => view.html-d378fd93.js} (72%) rename assets/{view.html-f8cfe1c3.js => view.html-d71163d3.js} (93%) diff --git a/404.html b/404.html index c8f87ee0..f3125a94 100644 --- a/404.html +++ b/404.html @@ -28,10 +28,10 @@ var sc_security="efed24b4"; - + -

404

There's nothing here.
Take me home
- +

404

Looks like we've got some broken links.
Take me home
+ diff --git a/CHANGELOG.html b/CHANGELOG.html index e0400ec9..eb34baf5 100644 --- a/CHANGELOG.html +++ b/CHANGELOG.html @@ -28,10 +28,10 @@ var sc_security="efed24b4"; - +

2024.4.11

  1. U 修复样式伪类功能在touchend没有触发的bug;
  2. U 小游戏插件发布1.0.11版本;

2024.3.25

  1. U 修复1.0.9背景渲染的bug;
  2. U 小游戏插件发布1.0.10版本;

2024.3.25

  1. U 样式支持伪类功能;
  2. U transform 拓展支持scale能力;
  3. U 小游戏插件发布1.0.9版本;

2024.3.14

  1. U 文字支持textStrokeWidth和textStrokeColor实现描边功能;
  2. U 文字支持textShadow实现阴影功能;
  3. U 小游戏插件发布1.0.8版本;

2023.1.03

  1. U 小游戏插件发布1.0.7版本;
  2. F 修复1.0.6版本Image的borderRadius失效问题

2023.12.26

  1. U 小游戏插件发布1.0.6版本;
  2. F 修复圆角矩形在有borderRadius的时候绘制不够圆润问题;
  3. U 文字样式支持 fontFamily 属性;
  4. F 修复 ScrollView 的滚动条在页面布局变化时会位置异常问题;
  5. U Layout 支持多例模式;

2023.7.25

  1. U transform 部分属性支持,使用可见教程;
  2. U 小游戏插件发布 1.0.5 版本;

2023.7.12

  1. U ScrollView 支持 滚动条特性;
  2. U 支持 opacity 样式属性;
  3. U 小游戏插件发布 1.0.4 版本;

2023.6.20

  1. F 兼容在字节小游戏下运行失败问题;
  2. U 小游戏插件发布1.0.3版本;

2023.6.13

  1. U ts重构整个项目,构建后代码体积降低14%(86k-> 75k);
  2. A 支持富文本插件能力;
  3. U 小游戏插件发布1.0.2版本;

2023.5.22

  1. U 发布小游戏插件1.0.1版本,修复backgroundImage属性问题

2023.5.20

  1. U 发布小游戏插件1.0.0版本

2023.1.2

  1. U 新增缓动动画能力;

2022.11.19

  1. F 修复ScrollView可能出现的图片渲染不出来的问题
  2. U 小游戏插件发布 0.0.14 版本

2022.7.27

  1. F 修复事件问题,修复图片渲染问题
  2. U 小游戏插件发布 0.0.13 版本

2022.1.13

  1. U 支持 dataset 特性
  2. U 小游戏插件发布 0.0.10 版本

2022.1.9

  1. U BitMapText 支持 letterSpacing样式,支持解析配置里面的kerning
  2. U 小游戏插件发布 0.0.9 版本

2021.12.6

  1. F 修复点击层级的问题;
  2. U 小游戏插件发布 0.0.8 版本

2021.9.19

  1. F 修复文档拼写错误;
  2. U npm 发布1.0.6版本;
  3. F 修复点击事件不准确问题open in new window;

2021.9.2

  1. U 重写Scrollview,引用scrolleropen in new window,支持横向滚动和纵向滚动,体验更好;
  2. A Scrollview 新增scrollX和scrollY配置,用于标识是否需要横向滚动和纵向滚动;
  3. F 修复 ScrollView 查询节点找不到的bug;
  4. A ScrollView 支持 scroll 事件;
  5. A ScrollView 支持 scrollTo API;
  6. F borderRadius 和 borderWidth 原先属性冲突;
  7. A 新增样式支持:borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius、borderBottomRightRadius
  8. D borderLeftWidth、borderRightWidth、borderTopWidth、borderBottomWidth、borderTopColor、borderBottomColor、borderLeftColor、borderRightColor 废弃;
  9. U 引擎插件open in new window发布0.0.7版本,支持以上更新点;

2019.11.19

  1. U 重写Scrollview,内存占用更低
  2. U 引擎插件open in new window发布0.0.6版本

2020.6.11

  1. F 修复渲染层级问题
  2. A 发布成小游戏引擎插件open in new window
  3. U IDE迭代,支持项目切换

2019.11.24

  1. U 对文字增加textOverflow支持

2019.11.19

  1. 初次发布
- + diff --git a/api/api.html b/api/api.html index 11692fc4..359e6162 100644 --- a/api/api.html +++ b/api/api.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; Layout - +

Layout

Layout 是一个单例,给定 template 和 style 最终渲染到画布一般要经过 Layout.clearLayout.initLayout.layout 三个步骤,除了这三个方法,还有一些方法挂载在 Layout,下面一一介绍。

version

用于表示 Layout 的版本,与 npm 版本无关,hardcode 到源码的一个字符串,目前版本为 1.0.2,一般而言版本跟微信小游戏插件版本一一对应。

文档有写 API 会标明兼容性,兼容性版本号就是指代 Layout.version 。

clear

清理画布,之前的计算出来的渲染树也会一并清理,此时可以再次执行initlayout方法渲染界面。

init

Layout.init(template: string, style: object)

给定 template 和 style,计算布局、生成节点树等逻辑。

layout

Layout.layout(context: CanvasRenderingContext2D)

将节点树绘制在 canvas 画布上,并会执行事件绑定等逻辑。

updateViewPort

Layout.updateViewPort(Object box)

更新被绘制canvas的窗口信息,本渲染引擎并不关心是否会和其他游戏引擎共同使用,而本身又需要支持事件处理,因此,如果被渲染内容是绘制到离屏canvas,需要将最终绘制在屏幕上 的绝对尺寸和位置信息更新到本渲染引擎。

box

key类型是否必填说明
widthNumbercanvas的物理像素宽度
heigthNumbercanvas的物理像素高度
xNumbercanvas 距离屏幕左上角的物理像素x坐标
yNumbercanvas 距离屏幕左上角的物理像素y坐标

特别提示

这一步非常重要,决定了点击、滑动等事件能否正确处理。

Web 模式下,可以直接调用 Web 的API取得Canvas在屏幕中的位置:

Layout.updateViewPort(canvas.getBoundingClientRect());
@@ -91,6 +91,6 @@
   console.log(ball.getBoundingClientRect());
 });
 

use

Layout.use(plugin)

安装插件,详见插件文档

unUse

Layout.unUse(plugin)

卸载插件。

- + diff --git a/api/style.html b/api/style.html index 6614252c..20e1b1ed 100644 --- a/api/style.html +++ b/api/style.html @@ -28,10 +28,10 @@ var sc_security="efed24b4"; 样式 - +

样式

下面列举 Layout 支持的样式属性。

布局

支持的标签:viewscrollviewimagetextbitmaptextcanvas

属性名支持的值或类型默认值
widthnumber/string(百分比场景,如 100%)0
heightnumber/string(百分比场景,如 100%)0
positionrelative, absoluterelative
leftnumber0
topnumber0
rightnumber0
bottomnumber0
marginnumber0
marginLeftnumber0
marginRightnumber0
marginTopnumber0
marginBottomnumber0
paddingnumber0
paddingLeftnumber0
paddingRightnumber0
paddingTopnumber0
paddingBottomnumber0
borderWidthnumber0
borderRadiusnumber0
flexDirectioncolumn, rowrow
flexShrinknumber1
flexGrownumber
flexWrapwrap, nowrapnowrap
justifyContentflex-start, center, flex-end, space-between, space-aroundflex-start
alignItems, alignSelfflex-start, center, flex-end, stretchflex-start

文本

支持的标签:text

属性名支持的值或类型默认值
fontSizenumber14
fontFamilystring无默认值,规则对齐 CSS 的font-family,详情可见font-familyopen in new window,参考值如 'Georgia, serif'
lineHeightnumber / string'1.4em'
textAlignleft, center, rightleft
verticalAligntop, middle, bottomtop
colorstring#000000
backgroundColorstringtransparent
textOverflowellipsis, clip默认为空,出于性能考虑,只有显式指定textOverflow属性的时候才会对文字进行截断处理
letterSpacingnumber默认值为0,只对 bitmaptext 标签生效

容器

支持的标签:viewscrollviewimagetextbitmaptextcanvas

属性类型默认值说明
backgroundColorstring背景的颜色,支持 6 位 16 进制、8 位 16 进制、rgb、rgba 四种格式的颜色

边框

支持的标签:viewscrollviewimagetextbitmaptextcanvas

属性类型默认值说明
borderRadiusnumber边框圆角
borderColorstring边框颜色,支持 6 位 16 进制、8 位 16 进制、rgb、rgba 四种格式的颜色
- + diff --git a/api/tags.html b/api/tags.html index 87d96194..4b417a1b 100644 --- a/api/tags.html +++ b/api/tags.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 标签 - +

标签

标签列表

标签说明
view容器标签,与HTML中的div相似
scrollview滚动列表容器,如果容器内的子元素高度大于scrollview高度,支持纵向滚动,不支持嵌套scrollview
image图片标签
text文本标签
bitmaptextbitmapfont文本标签
canvas对齐 Web,允许获取 context执行渲染

公共属性

每个标签都会通过属性来支持一些特有的功能,下面列举所有标签都会有的属性。

属性类型是否必填说明
idstring非唯一标识,两个标签可以共用id,可以通过 Layout.getElementsById 获取到元素实例
classstring与浏览器相同
datasetstring与浏览器相同,详见文档open in new window

view

view标签用来页面布局,布局严格遵循CSS Flex布局open in new window,节点在Flex属性相互作用的结果可以通过Yoga的Playgroundopen in new window试验。

image

特殊属性

属性类型是否必填说明
srcstring图片链接

TIP

1.小游戏开放数据域场景图片路径不需要加./作为前缀,以小游戏根目录作为根目录;

2.图片可以通过APIloadImgsopen in new window实现预加载

text

特殊属性

属性类型是否必填说明
valuestring文字内容

特殊样式

属性类型是否必填说明
textOverflowstring文字溢出处理方式,默认不处理,ellipsis则支持自动截断
textAlignstring文字水平居中方式,默认left,支持right、center

scrollview

滚动内容的容器,滚动的前提是正确调用updateViewPortopen in new window

特殊样式

属性类型是否必填说明
scrollXstring是否需要横向滚动,支持 "true"和"false",默认值为 "false"
scrollYstring是否需要纵向滚动,支持 "true"和"false", 默认值为"false"

bitmapfont

在游戏开发里面,为了更好的视觉效果,经常要将一些常用文字经过设计成图片,然后打包成特殊的字体,称为BitmapFont,基本上所有的游戏引擎都支持了这种技术。

本渲染引擎调研了常见的H5游戏引擎Laya、Cocos、Egret,他们普遍支持AngelCode.comopen in new window打包后的配置文件规范,因此biamapfont 同样只支持通过该工具打包后的文件。

需要特别注意的是,对于一般的游戏引擎而言,都会在自己的IDE里面将.fnt打包进代码里面,这里为了引擎轻量化,需要通过APIregistBitMapFontopen in new window手动注册字体。 然后在标签里面通过font属性声明需要使用的字体。

<bitmaptext font="fnt_number-export" class="title" value="等级"></bitmaptext>
@@ -71,6 +71,6 @@
 Layout.ticker.add(updateRank);
 
 
- + diff --git a/api/tween.html b/api/tween.html index df5b45f9..e8ecd805 100644 --- a/api/tween.html +++ b/api/tween.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 缓动系统 - +

缓动系统

简介

缓动动画是很常见的需求,游戏引擎一般会内置缓动系统,如果没有内置的缓动系统,通过引入缓动引擎也能够很容易实现缓动动画能力。

出于代码体积考虑,Layout 没有默认挂载了缓动模块,但引用并使用 tween.jsopen in new window 来实现动画能力与浏览器的 DOM 动画差异不大。

简单示例

下面分别是示例需要的 xml、style 和缓动函数调用示例,省略 Layout 初始化和 layout 等逻辑。

<view id="container">
@@ -99,6 +99,6 @@
 // 记得在必要的时候执行 Layout.ticker.remove(manualTween),比如每次 Layout.init 之前
 Layout.ticker.add(manualTween);
 

一些参考资料

  1. JavaScript HTML DOM 动画open in new window
  2. CSS positonopen in new window
- + diff --git a/assets/404.html-cafe97ae.js b/assets/404.html-4b3e6783.js similarity index 63% rename from assets/404.html-cafe97ae.js rename to assets/404.html-4b3e6783.js index 681744ee..8e190130 100644 --- a/assets/404.html-cafe97ae.js +++ b/assets/404.html-4b3e6783.js @@ -1 +1 @@ -import{_ as e,o as c,c as t}from"./app-ea6643d5.js";const _={};function o(r,n){return c(),t("div")}const a=e(_,[["render",o],["__file","404.html.vue"]]);export{a as default}; +import{_ as e,o as c,c as t}from"./app-af1e9e55.js";const _={};function o(r,n){return c(),t("div")}const a=e(_,[["render",o],["__file","404.html.vue"]]);export{a as default}; diff --git a/assets/CHANGELOG.html-35619e25.js b/assets/CHANGELOG.html-7f8918ee.js similarity index 99% rename from assets/CHANGELOG.html-35619e25.js rename to assets/CHANGELOG.html-7f8918ee.js index 298046ed..06a04c93 100644 --- a/assets/CHANGELOG.html-35619e25.js +++ b/assets/CHANGELOG.html-7f8918ee.js @@ -1 +1 @@ -import{_ as c,r as a,o as n,c as t,a as e,b as o,d as l,w as h,e as i}from"./app-ea6643d5.js";const s={},_=i('

2024.4.11

  1. U 修复样式伪类功能在touchend没有触发的bug;
  2. U 小游戏插件发布1.0.11版本;

2024.3.25

  1. U 修复1.0.9背景渲染的bug;
  2. U 小游戏插件发布1.0.10版本;

2024.3.25

  1. U 样式支持伪类功能;
  2. U transform 拓展支持scale能力;
  3. U 小游戏插件发布1.0.9版本;

2024.3.14

  1. U 文字支持textStrokeWidth和textStrokeColor实现描边功能;
  2. U 文字支持textShadow实现阴影功能;
  3. U 小游戏插件发布1.0.8版本;

2023.1.03

  1. U 小游戏插件发布1.0.7版本;
  2. F 修复1.0.6版本Image的borderRadius失效问题

2023.12.26

  1. U 小游戏插件发布1.0.6版本;
  2. F 修复圆角矩形在有borderRadius的时候绘制不够圆润问题;
  3. U 文字样式支持 fontFamily 属性;
  4. F 修复 ScrollView 的滚动条在页面布局变化时会位置异常问题;
  5. U Layout 支持多例模式;

2023.7.25

  1. U transform 部分属性支持,使用可见教程;
  2. U 小游戏插件发布 1.0.5 版本;

2023.7.12

',15),u=e("code",null,"U",-1),b=e("li",null,[e("code",null,"U"),o(" 支持 opacity 样式属性;")],-1),f=e("li",null,[e("code",null,"U"),o(" 小游戏插件发布 1.0.4 版本;")],-1),x=i('

2023.6.20

  1. F 兼容在字节小游戏下运行失败问题;
  2. U 小游戏插件发布1.0.3版本;

2023.6.13

  1. U ts重构整个项目,构建后代码体积降低14%(86k-> 75k);
  2. A 支持富文本插件能力;
  3. U 小游戏插件发布1.0.2版本;

2023.5.22

  1. U 发布小游戏插件1.0.1版本,修复backgroundImage属性问题

2023.5.20

  1. U 发布小游戏插件1.0.0版本

2023.1.2

  1. U 新增缓动动画能力;

2022.11.19

  1. F 修复ScrollView可能出现的图片渲染不出来的问题
  2. U 小游戏插件发布 0.0.14 版本

2022.7.27

  1. F 修复事件问题,修复图片渲染问题
  2. U 小游戏插件发布 0.0.13 版本

2022.1.13

  1. U 支持 dataset 特性
  2. U 小游戏插件发布 0.0.10 版本

2022.1.9

  1. U BitMapText 支持 letterSpacing样式,支持解析配置里面的kerning
  2. U 小游戏插件发布 0.0.9 版本

2021.12.6

  1. F 修复点击层级的问题;
  2. U 小游戏插件发布 0.0.8 版本

2021.9.19

',21),p=e("li",null,[e("code",null,"F"),o(" 修复文档拼写错误;")],-1),U=e("li",null,[e("code",null,"U"),o(" npm 发布1.0.6版本;")],-1),m=e("code",null,"F",-1),g={href:"https://github.com/wechat-miniprogram/minigame-canvas-engine/issues/6",target:"_blank",rel:"noopener noreferrer"},w=e("h4",{id:"_2021-9-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2021-9-2","aria-hidden":"true"},"#"),o(" 2021.9.2")],-1),k=e("code",null,"U",-1),S={href:"https://github.com/pbakaus/scroller",target:"_blank",rel:"noopener noreferrer"},F=i("
  • A Scrollview 新增scrollX和scrollY配置,用于标识是否需要横向滚动和纵向滚动;
  • F 修复 ScrollView 查询节点找不到的bug;
  • A ScrollView 支持 scroll 事件;
  • A ScrollView 支持 scrollTo API;
  • F borderRadius 和 borderWidth 原先属性冲突;
  • A 新增样式支持:borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius、borderBottomRightRadius
  • D borderLeftWidth、borderRightWidth、borderTopWidth、borderBottomWidth、borderTopColor、borderBottomColor、borderLeftColor、borderRightColor 废弃;
  • ",7),R=e("code",null,"U",-1),C={href:"https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7a727ff7d940bb3f&token=1278230091&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"},v=e("h4",{id:"_2019-11-19",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2019-11-19","aria-hidden":"true"},"#"),o(" 2019.11.19")],-1),L=e("li",null,[e("code",null,"U"),o(" 重写Scrollview,内存占用更低")],-1),V=e("code",null,"U",-1),A={href:"https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7a727ff7d940bb3f&token=1278230091&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"},N=e("h4",{id:"_2020-6-11",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2020-6-11","aria-hidden":"true"},"#"),o(" 2020.6.11")],-1),B=e("li",null,[e("code",null,"F"),o(" 修复渲染层级问题")],-1),T=e("code",null,"A",-1),q={href:"https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7a727ff7d940bb3f&token=1766767136&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"},E=e("li",null,[e("code",null,"U"),o(" IDE迭代,支持项目切换")],-1),I=e("h4",{id:"_2019-11-24",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2019-11-24","aria-hidden":"true"},"#"),o(" 2019.11.24")],-1),W=e("ol",null,[e("li",null,[e("code",null,"U"),o(" 对文字增加textOverflow支持")])],-1),G=e("h4",{id:"_2019-11-19-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2019-11-19-1","aria-hidden":"true"},"#"),o(" 2019.11.19")],-1),y=e("ol",null,[e("li",null,"初次发布")],-1);function z(O,D){const r=a("RouterLink"),d=a("ExternalLinkIcon");return n(),t("div",null,[_,e("ol",null,[e("li",null,[u,o(" ScrollView 支持 "),l(r,{to:"/components/scrollbar.html"},{default:h(()=>[o("滚动条")]),_:1}),o("特性;")]),b,f]),x,e("ol",null,[p,U,e("li",null,[m,o(" 修复点击事件不准确"),e("a",g,[o("问题"),l(d)]),o(";")])]),w,e("ol",null,[e("li",null,[k,o(" 重写Scrollview,引用"),e("a",S,[o("scroller"),l(d)]),o(",支持横向滚动和纵向滚动,体验更好;")]),F,e("li",null,[R,o(),e("a",C,[o("引擎插件"),l(d)]),o("发布0.0.7版本,支持以上更新点;")])]),v,e("ol",null,[L,e("li",null,[V,o(),e("a",A,[o("引擎插件"),l(d)]),o("发布0.0.6版本")])]),N,e("ol",null,[B,e("li",null,[T,o(" 发布成小游戏"),e("a",q,[o("引擎插件"),l(d)])]),E]),I,W,G,y])}const M=c(s,[["render",z],["__file","CHANGELOG.html.vue"]]);export{M as default}; +import{_ as c,r as a,o as n,c as t,a as e,b as o,d as l,w as h,e as i}from"./app-af1e9e55.js";const s={},_=i('

    2024.4.11

    1. U 修复样式伪类功能在touchend没有触发的bug;
    2. U 小游戏插件发布1.0.11版本;

    2024.3.25

    1. U 修复1.0.9背景渲染的bug;
    2. U 小游戏插件发布1.0.10版本;

    2024.3.25

    1. U 样式支持伪类功能;
    2. U transform 拓展支持scale能力;
    3. U 小游戏插件发布1.0.9版本;

    2024.3.14

    1. U 文字支持textStrokeWidth和textStrokeColor实现描边功能;
    2. U 文字支持textShadow实现阴影功能;
    3. U 小游戏插件发布1.0.8版本;

    2023.1.03

    1. U 小游戏插件发布1.0.7版本;
    2. F 修复1.0.6版本Image的borderRadius失效问题

    2023.12.26

    1. U 小游戏插件发布1.0.6版本;
    2. F 修复圆角矩形在有borderRadius的时候绘制不够圆润问题;
    3. U 文字样式支持 fontFamily 属性;
    4. F 修复 ScrollView 的滚动条在页面布局变化时会位置异常问题;
    5. U Layout 支持多例模式;

    2023.7.25

    1. U transform 部分属性支持,使用可见教程;
    2. U 小游戏插件发布 1.0.5 版本;

    2023.7.12

    ',15),u=e("code",null,"U",-1),b=e("li",null,[e("code",null,"U"),o(" 支持 opacity 样式属性;")],-1),f=e("li",null,[e("code",null,"U"),o(" 小游戏插件发布 1.0.4 版本;")],-1),x=i('

    2023.6.20

    1. F 兼容在字节小游戏下运行失败问题;
    2. U 小游戏插件发布1.0.3版本;

    2023.6.13

    1. U ts重构整个项目,构建后代码体积降低14%(86k-> 75k);
    2. A 支持富文本插件能力;
    3. U 小游戏插件发布1.0.2版本;

    2023.5.22

    1. U 发布小游戏插件1.0.1版本,修复backgroundImage属性问题

    2023.5.20

    1. U 发布小游戏插件1.0.0版本

    2023.1.2

    1. U 新增缓动动画能力;

    2022.11.19

    1. F 修复ScrollView可能出现的图片渲染不出来的问题
    2. U 小游戏插件发布 0.0.14 版本

    2022.7.27

    1. F 修复事件问题,修复图片渲染问题
    2. U 小游戏插件发布 0.0.13 版本

    2022.1.13

    1. U 支持 dataset 特性
    2. U 小游戏插件发布 0.0.10 版本

    2022.1.9

    1. U BitMapText 支持 letterSpacing样式,支持解析配置里面的kerning
    2. U 小游戏插件发布 0.0.9 版本

    2021.12.6

    1. F 修复点击层级的问题;
    2. U 小游戏插件发布 0.0.8 版本

    2021.9.19

    ',21),p=e("li",null,[e("code",null,"F"),o(" 修复文档拼写错误;")],-1),U=e("li",null,[e("code",null,"U"),o(" npm 发布1.0.6版本;")],-1),m=e("code",null,"F",-1),g={href:"https://github.com/wechat-miniprogram/minigame-canvas-engine/issues/6",target:"_blank",rel:"noopener noreferrer"},w=e("h4",{id:"_2021-9-2",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2021-9-2","aria-hidden":"true"},"#"),o(" 2021.9.2")],-1),k=e("code",null,"U",-1),S={href:"https://github.com/pbakaus/scroller",target:"_blank",rel:"noopener noreferrer"},F=i("
  • A Scrollview 新增scrollX和scrollY配置,用于标识是否需要横向滚动和纵向滚动;
  • F 修复 ScrollView 查询节点找不到的bug;
  • A ScrollView 支持 scroll 事件;
  • A ScrollView 支持 scrollTo API;
  • F borderRadius 和 borderWidth 原先属性冲突;
  • A 新增样式支持:borderTopLeftRadius、borderTopRightRadius、borderBottomLeftRadius、borderBottomRightRadius
  • D borderLeftWidth、borderRightWidth、borderTopWidth、borderBottomWidth、borderTopColor、borderBottomColor、borderLeftColor、borderRightColor 废弃;
  • ",7),R=e("code",null,"U",-1),C={href:"https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7a727ff7d940bb3f&token=1278230091&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"},v=e("h4",{id:"_2019-11-19",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2019-11-19","aria-hidden":"true"},"#"),o(" 2019.11.19")],-1),L=e("li",null,[e("code",null,"U"),o(" 重写Scrollview,内存占用更低")],-1),V=e("code",null,"U",-1),A={href:"https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7a727ff7d940bb3f&token=1278230091&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"},N=e("h4",{id:"_2020-6-11",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2020-6-11","aria-hidden":"true"},"#"),o(" 2020.6.11")],-1),B=e("li",null,[e("code",null,"F"),o(" 修复渲染层级问题")],-1),T=e("code",null,"A",-1),q={href:"https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7a727ff7d940bb3f&token=1766767136&lang=zh_CN",target:"_blank",rel:"noopener noreferrer"},E=e("li",null,[e("code",null,"U"),o(" IDE迭代,支持项目切换")],-1),I=e("h4",{id:"_2019-11-24",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2019-11-24","aria-hidden":"true"},"#"),o(" 2019.11.24")],-1),W=e("ol",null,[e("li",null,[e("code",null,"U"),o(" 对文字增加textOverflow支持")])],-1),G=e("h4",{id:"_2019-11-19-1",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#_2019-11-19-1","aria-hidden":"true"},"#"),o(" 2019.11.19")],-1),y=e("ol",null,[e("li",null,"初次发布")],-1);function z(O,D){const r=a("RouterLink"),d=a("ExternalLinkIcon");return n(),t("div",null,[_,e("ol",null,[e("li",null,[u,o(" ScrollView 支持 "),l(r,{to:"/components/scrollbar.html"},{default:h(()=>[o("滚动条")]),_:1}),o("特性;")]),b,f]),x,e("ol",null,[p,U,e("li",null,[m,o(" 修复点击事件不准确"),e("a",g,[o("问题"),l(d)]),o(";")])]),w,e("ol",null,[e("li",null,[k,o(" 重写Scrollview,引用"),e("a",S,[o("scroller"),l(d)]),o(",支持横向滚动和纵向滚动,体验更好;")]),F,e("li",null,[R,o(),e("a",C,[o("引擎插件"),l(d)]),o("发布0.0.7版本,支持以上更新点;")])]),v,e("ol",null,[L,e("li",null,[V,o(),e("a",A,[o("引擎插件"),l(d)]),o("发布0.0.6版本")])]),N,e("ol",null,[B,e("li",null,[T,o(" 发布成小游戏"),e("a",q,[o("引擎插件"),l(d)])]),E]),I,W,G,y])}const M=c(s,[["render",z],["__file","CHANGELOG.html.vue"]]);export{M as default}; diff --git a/assets/CHANGELOG.html-fe05d6a3.js b/assets/CHANGELOG.html-9ea461a4.js similarity index 69% rename from assets/CHANGELOG.html-fe05d6a3.js rename to assets/CHANGELOG.html-9ea461a4.js index d4271c91..be683b86 100644 --- a/assets/CHANGELOG.html-fe05d6a3.js +++ b/assets/CHANGELOG.html-9ea461a4.js @@ -1 +1 @@ -const e=JSON.parse('{"key":"v-18cc131e","path":"/CHANGELOG.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1712821672000},"filePathRelative":"CHANGELOG.md"}');export{e as data}; +const e=JSON.parse('{"key":"v-18cc131e","path":"/CHANGELOG.html","title":"","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1717588138000},"filePathRelative":"CHANGELOG.md"}');export{e as data}; diff --git a/assets/api.html-0f91ca6a.js b/assets/api.html-462ea688.js similarity index 97% rename from assets/api.html-0f91ca6a.js rename to assets/api.html-462ea688.js index 89286386..ff1718f6 100644 --- a/assets/api.html-0f91ca6a.js +++ b/assets/api.html-462ea688.js @@ -1 +1 @@ -const e=JSON.parse('{"key":"v-587e1e66","path":"/api/api.html","title":"Layout","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"clear","slug":"clear","link":"#clear","children":[]},{"level":2,"title":"init","slug":"init","link":"#init","children":[]},{"level":2,"title":"layout","slug":"layout-1","link":"#layout-1","children":[]},{"level":2,"title":"updateViewPort","slug":"updateviewport","link":"#updateviewport","children":[{"level":3,"title":"box","slug":"box","link":"#box","children":[]}]},{"level":2,"title":"getElementViewportRect","slug":"getelementviewportrect","link":"#getelementviewportrect","children":[]},{"level":2,"title":"clearAll","slug":"clearall","link":"#clearall","children":[]},{"level":2,"title":"loadImgs","slug":"loadimgs","link":"#loadimgs","children":[]},{"level":2,"title":"registBitMapFont","slug":"registbitmapfont","link":"#registbitmapfont","children":[]},{"level":2,"title":"getElementsById","slug":"getelementsbyid","link":"#getelementsbyid","children":[]},{"level":2,"title":"getElementById","slug":"getelementbyid","link":"#getelementbyid","children":[]},{"level":2,"title":"getElementsByClassName","slug":"getelementsbyclassname","link":"#getelementsbyclassname","children":[]},{"level":2,"title":"cloneNode","slug":"clonenode","link":"#clonenode","children":[]},{"level":2,"title":"ticker","slug":"ticker","link":"#ticker","children":[{"level":3,"title":"Layout.ticker.add(callback: Function)","slug":"layout-ticker-add-callback-function","link":"#layout-ticker-add-callback-function","children":[]},{"level":3,"title":"Layout.ticker.remove(callback: Function)","slug":"layout-ticker-remove-callback-function","link":"#layout-ticker-remove-callback-function","children":[]},{"level":3,"title":"Layout.ticker.start()","slug":"layout-ticker-start","link":"#layout-ticker-start","children":[]},{"level":3,"title":"Layout.ticker.stop()","slug":"layout-ticker-stop","link":"#layout-ticker-stop","children":[]},{"level":3,"title":"Layout.ticker.next(callback: Function)","slug":"layout-ticker-next-callback-function","link":"#layout-ticker-next-callback-function","children":[]}]},{"level":2,"title":"use","slug":"use","link":"#use","children":[]},{"level":2,"title":"unUse","slug":"unuse","link":"#unuse","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"api/api.md"}');export{e as data}; +const e=JSON.parse('{"key":"v-587e1e66","path":"/api/api.html","title":"Layout","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"version","slug":"version","link":"#version","children":[]},{"level":2,"title":"clear","slug":"clear","link":"#clear","children":[]},{"level":2,"title":"init","slug":"init","link":"#init","children":[]},{"level":2,"title":"layout","slug":"layout-1","link":"#layout-1","children":[]},{"level":2,"title":"updateViewPort","slug":"updateviewport","link":"#updateviewport","children":[{"level":3,"title":"box","slug":"box","link":"#box","children":[]}]},{"level":2,"title":"getElementViewportRect","slug":"getelementviewportrect","link":"#getelementviewportrect","children":[]},{"level":2,"title":"clearAll","slug":"clearall","link":"#clearall","children":[]},{"level":2,"title":"loadImgs","slug":"loadimgs","link":"#loadimgs","children":[]},{"level":2,"title":"registBitMapFont","slug":"registbitmapfont","link":"#registbitmapfont","children":[]},{"level":2,"title":"getElementsById","slug":"getelementsbyid","link":"#getelementsbyid","children":[]},{"level":2,"title":"getElementById","slug":"getelementbyid","link":"#getelementbyid","children":[]},{"level":2,"title":"getElementsByClassName","slug":"getelementsbyclassname","link":"#getelementsbyclassname","children":[]},{"level":2,"title":"cloneNode","slug":"clonenode","link":"#clonenode","children":[]},{"level":2,"title":"ticker","slug":"ticker","link":"#ticker","children":[{"level":3,"title":"Layout.ticker.add(callback: Function)","slug":"layout-ticker-add-callback-function","link":"#layout-ticker-add-callback-function","children":[]},{"level":3,"title":"Layout.ticker.remove(callback: Function)","slug":"layout-ticker-remove-callback-function","link":"#layout-ticker-remove-callback-function","children":[]},{"level":3,"title":"Layout.ticker.start()","slug":"layout-ticker-start","link":"#layout-ticker-start","children":[]},{"level":3,"title":"Layout.ticker.stop()","slug":"layout-ticker-stop","link":"#layout-ticker-stop","children":[]},{"level":3,"title":"Layout.ticker.next(callback: Function)","slug":"layout-ticker-next-callback-function","link":"#layout-ticker-next-callback-function","children":[]}]},{"level":2,"title":"use","slug":"use","link":"#use","children":[]},{"level":2,"title":"unUse","slug":"unuse","link":"#unuse","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"api/api.md"}');export{e as data}; diff --git a/assets/api.html-276938aa.js b/assets/api.html-64fa6ca5.js similarity index 99% rename from assets/api.html-276938aa.js rename to assets/api.html-64fa6ca5.js index 028bc47f..d9b099e0 100644 --- a/assets/api.html-276938aa.js +++ b/assets/api.html-64fa6ca5.js @@ -1,4 +1,4 @@ -import{_ as p,r as c,o as i,c as l,a,b as n,d as t,w as e,e as o}from"./app-ea6643d5.js";const u={},d=a("h1",{id:"layout",tabindex:"-1"},[a("a",{class:"header-anchor",href:"#layout","aria-hidden":"true"},"#"),n(" Layout")],-1),r=a("p",null,[n("Layout 是一个单例,给定 template 和 style 最终渲染到画布一般要经过 "),a("code",null,"Layout.clear"),n("、"),a("code",null,"Layout.init"),n(" 和 "),a("code",null,"Layout.layout"),n(" 三个步骤,除了这三个方法,还有一些方法挂载在 Layout,下面一一介绍。")],-1),k=a("h2",{id:"version",tabindex:"-1"},[a("a",{class:"header-anchor",href:"#version","aria-hidden":"true"},"#"),n(" version")],-1),m=a("code",null,"1.0.2",-1),h=o(`

    文档有写 API 会标明兼容性,兼容性版本号就是指代 Layout.version 。

    clear

    清理画布,之前的计算出来的渲染树也会一并清理,此时可以再次执行initlayout方法渲染界面。

    init

    Layout.init(template: string, style: object)

    给定 template 和 style,计算布局、生成节点树等逻辑。

    layout

    Layout.layout(context: CanvasRenderingContext2D)

    将节点树绘制在 canvas 画布上,并会执行事件绑定等逻辑。

    updateViewPort

    Layout.updateViewPort(Object box)

    更新被绘制canvas的窗口信息,本渲染引擎并不关心是否会和其他游戏引擎共同使用,而本身又需要支持事件处理,因此,如果被渲染内容是绘制到离屏canvas,需要将最终绘制在屏幕上 的绝对尺寸和位置信息更新到本渲染引擎。

    box

    key类型是否必填说明
    widthNumbercanvas的物理像素宽度
    heigthNumbercanvas的物理像素高度
    xNumbercanvas 距离屏幕左上角的物理像素x坐标
    yNumbercanvas 距离屏幕左上角的物理像素y坐标

    特别提示

    这一步非常重要,决定了点击、滑动等事件能否正确处理。

    Web 模式下,可以直接调用 Web 的API取得Canvas在屏幕中的位置:

    Layout.updateViewPort(canvas.getBoundingClientRect());
    +import{_ as p,r as c,o as i,c as l,a,b as n,d as t,w as e,e as o}from"./app-af1e9e55.js";const u={},d=a("h1",{id:"layout",tabindex:"-1"},[a("a",{class:"header-anchor",href:"#layout","aria-hidden":"true"},"#"),n(" Layout")],-1),r=a("p",null,[n("Layout 是一个单例,给定 template 和 style 最终渲染到画布一般要经过 "),a("code",null,"Layout.clear"),n("、"),a("code",null,"Layout.init"),n(" 和 "),a("code",null,"Layout.layout"),n(" 三个步骤,除了这三个方法,还有一些方法挂载在 Layout,下面一一介绍。")],-1),k=a("h2",{id:"version",tabindex:"-1"},[a("a",{class:"header-anchor",href:"#version","aria-hidden":"true"},"#"),n(" version")],-1),m=a("code",null,"1.0.2",-1),h=o(`

    文档有写 API 会标明兼容性,兼容性版本号就是指代 Layout.version 。

    clear

    清理画布,之前的计算出来的渲染树也会一并清理,此时可以再次执行initlayout方法渲染界面。

    init

    Layout.init(template: string, style: object)

    给定 template 和 style,计算布局、生成节点树等逻辑。

    layout

    Layout.layout(context: CanvasRenderingContext2D)

    将节点树绘制在 canvas 画布上,并会执行事件绑定等逻辑。

    updateViewPort

    Layout.updateViewPort(Object box)

    更新被绘制canvas的窗口信息,本渲染引擎并不关心是否会和其他游戏引擎共同使用,而本身又需要支持事件处理,因此,如果被渲染内容是绘制到离屏canvas,需要将最终绘制在屏幕上 的绝对尺寸和位置信息更新到本渲染引擎。

    box

    key类型是否必填说明
    widthNumbercanvas的物理像素宽度
    heigthNumbercanvas的物理像素高度
    xNumbercanvas 距离屏幕左上角的物理像素x坐标
    yNumbercanvas 距离屏幕左上角的物理像素y坐标

    特别提示

    这一步非常重要,决定了点击、滑动等事件能否正确处理。

    Web 模式下,可以直接调用 Web 的API取得Canvas在屏幕中的位置:

    Layout.updateViewPort(canvas.getBoundingClientRect());
     

    getElementViewportRect

    `,18),v=o(`

    兼容性

    v1.0.1版本开始支持

    返回一个节点在屏幕中的位置和尺寸信息,前提是正确调用updateViewPort,这在某些场景很有用,比如在小游戏里面,游戏的主域也是用 Layout 开发的,开放数据域是通过 Canvas 组件来绘,可以调用 Layout.getElementViewportRect 拿到 Canvas 组件在屏幕中的物理坐标和尺寸信息,以方便开放数据域做好事件处理。

    clearAll

    比起 Layout.clear 更彻底的清理,会清空图片对象池,减少内存占用。

    loadImgs

    Layout.loadImgs(Array imgarr): Promise

    对于图片资源,如果不提前加载,渲染过程中可能出现挨个出现图片效果,影响体验。通过Layout.loadImgs可以预加载图片资源,在调用Layout.layout的时候渲染性能更好,体验更佳。

    // 注意图片路径不需要加./作为前缀,以小游戏根目录作为根目录
     Layout.loadImgs([
         'sub/Buffet_icon_GiftPlate_0.png',
    diff --git a/assets/app-ea6643d5.js b/assets/app-af1e9e55.js
    similarity index 97%
    rename from assets/app-ea6643d5.js
    rename to assets/app-af1e9e55.js
    index 221e16d4..8668fc28 100644
    --- a/assets/app-ea6643d5.js
    +++ b/assets/app-af1e9e55.js
    @@ -1,4 +1,4 @@
    -const Vi="modulepreload",Ui=function(e){return"/minigame-canvas-engine/"+e},Yo={},q=function(t,n,r){if(!n||n.length===0)return t();const o=document.getElementsByTagName("link");return Promise.all(n.map(l=>{if(l=Ui(l),l in Yo)return;Yo[l]=!0;const s=l.endsWith(".css"),i=s?'[rel="stylesheet"]':"";if(!!r)for(let u=o.length-1;u>=0;u--){const f=o[u];if(f.href===l&&(!s||f.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${l}"]${i}`))return;const c=document.createElement("link");if(c.rel=s?"stylesheet":Vi,s||(c.as="script",c.crossOrigin=""),c.href=l,document.head.appendChild(c),s)return new Promise((u,f)=>{c.addEventListener("load",u),c.addEventListener("error",()=>f(new Error(`Unable to preload CSS for ${l}`)))})})).then(()=>t()).catch(l=>{const s=new Event("vite:preloadError",{cancelable:!0});if(s.payload=l,window.dispatchEvent(s),!s.defaultPrevented)throw l})};function ho(e,t){const n=Object.create(null),r=e.split(",");for(let o=0;o!!n[o.toLowerCase()]:o=>!!n[o]}const ke={},nn=[],ot=()=>{},Ki=()=>!1,Wi=/^on[^a-z]/,Dn=e=>Wi.test(e),po=e=>e.startsWith("onUpdate:"),Re=Object.assign,mo=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},qi=Object.prototype.hasOwnProperty,de=(e,t)=>qi.call(e,t),Q=Array.isArray,rn=e=>Er(e)==="[object Map]",cs=e=>Er(e)==="[object Set]",le=e=>typeof e=="function",me=e=>typeof e=="string",vo=e=>typeof e=="symbol",xe=e=>e!==null&&typeof e=="object",us=e=>xe(e)&&le(e.then)&&le(e.catch),fs=Object.prototype.toString,Er=e=>fs.call(e),Gi=e=>Er(e).slice(8,-1),ds=e=>Er(e)==="[object Object]",go=e=>me(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,xn=ho(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),wr=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Yi=/-(\w)/g,ft=wr(e=>e.replace(Yi,(t,n)=>n?n.toUpperCase():"")),Ji=/\B([A-Z])/g,Gt=wr(e=>e.replace(Ji,"-$1").toLowerCase()),kr=wr(e=>e.charAt(0).toUpperCase()+e.slice(1)),Nr=wr(e=>e?`on${kr(e)}`:""),Rn=(e,t)=>!Object.is(e,t),Mr=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},Qi=e=>{const t=parseFloat(e);return isNaN(t)?e:t},Zi=e=>{const t=me(e)?Number(e):NaN;return isNaN(t)?e:t};let Jo;const Jr=()=>Jo||(Jo=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function Hn(e){if(Q(e)){const t={};for(let n=0;n{if(n){const r=n.split(ea);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t}function Ke(e){let t="";if(me(e))t=e;else if(Q(e))for(let n=0;nme(e)?e:e==null?"":Q(e)||xe(e)&&(e.toString===fs||!le(e.toString))?JSON.stringify(e,ps,2):String(e),ps=(e,t)=>t&&t.__v_isRef?ps(e,t.value):rn(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[r,o])=>(n[`${r} =>`]=o,n),{})}:cs(t)?{[`Set(${t.size})`]:[...t.values()]}:xe(t)&&!Q(t)&&!ds(t)?String(t):t;let Ge;class la{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this.parent=Ge,!t&&Ge&&(this.index=(Ge.scopes||(Ge.scopes=[])).push(this)-1)}get active(){return this._active}run(t){if(this._active){const n=Ge;try{return Ge=this,t()}finally{Ge=n}}}on(){Ge=this}off(){Ge=this.parent}stop(t){if(this._active){let n,r;for(n=0,r=this.effects.length;n{const t=new Set(e);return t.w=0,t.n=0,t},vs=e=>(e.w&Pt)>0,gs=e=>(e.n&Pt)>0,aa=({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let r=0;r{(u==="length"||u>=a)&&i.push(c)})}else switch(n!==void 0&&i.push(s.get(n)),t){case"add":Q(e)?go(n)&&i.push(s.get("length")):(i.push(s.get(Ut)),rn(e)&&i.push(s.get(Zr)));break;case"delete":Q(e)||(i.push(s.get(Ut)),rn(e)&&i.push(s.get(Zr)));break;case"set":rn(e)&&i.push(s.get(Ut));break}if(i.length===1)i[0]&&Xr(i[0]);else{const a=[];for(const c of i)c&&a.push(...c);Xr(_o(a))}}function Xr(e,t){const n=Q(e)?e:[...e];for(const r of n)r.computed&&Zo(r);for(const r of n)r.computed||Zo(r)}function Zo(e,t){(e!==nt||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}function ua(e,t){var n;return(n=cr.get(e))==null?void 0:n.get(t)}const fa=ho("__proto__,__v_isRef,__isVue"),ys=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(vo)),da=yo(),ha=yo(!1,!0),pa=yo(!0),Xo=ma();function ma(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const r=pe(this);for(let l=0,s=this.length;l{e[t]=function(...n){mn();const r=pe(this)[t].apply(this,n);return vn(),r}}),e}function va(e){const t=pe(this);return We(t,"has",e),t.hasOwnProperty(e)}function yo(e=!1,t=!1){return function(r,o,l){if(o==="__v_isReactive")return!e;if(o==="__v_isReadonly")return e;if(o==="__v_isShallow")return t;if(o==="__v_raw"&&l===(e?t?Oa:Ls:t?xs:ks).get(r))return r;const s=Q(r);if(!e){if(s&&de(Xo,o))return Reflect.get(Xo,o,l);if(o==="hasOwnProperty")return va}const i=Reflect.get(r,o,l);return(vo(o)?ys.has(o):fa(o))||(e||We(r,"get",o),t)?i:$e(i)?s&&go(o)?i:i.value:xe(i)?e?Bn(i):Fn(i):i}}const ga=Es(),_a=Es(!0);function Es(e=!1){return function(n,r,o,l){let s=n[r];if(an(s)&&$e(s)&&!$e(o))return!1;if(!e&&(!ur(o)&&!an(o)&&(s=pe(s),o=pe(o)),!Q(n)&&$e(s)&&!$e(o)))return s.value=o,!0;const i=Q(n)&&go(r)?Number(r)e,xr=e=>Reflect.getPrototypeOf(e);function qn(e,t,n=!1,r=!1){e=e.__v_raw;const o=pe(e),l=pe(t);n||(t!==l&&We(o,"get",t),We(o,"get",l));const{has:s}=xr(o),i=r?Eo:n?xo:Pn;if(s.call(o,t))return i(e.get(t));if(s.call(o,l))return i(e.get(l));e!==o&&e.get(t)}function Gn(e,t=!1){const n=this.__v_raw,r=pe(n),o=pe(e);return t||(e!==o&&We(r,"has",e),We(r,"has",o)),e===o?n.has(e):n.has(e)||n.has(o)}function Yn(e,t=!1){return e=e.__v_raw,!t&&We(pe(e),"iterate",Ut),Reflect.get(e,"size",e)}function el(e){e=pe(e);const t=pe(this);return xr(t).has.call(t,e)||(t.add(e),_t(t,"add",e,e)),this}function tl(e,t){t=pe(t);const n=pe(this),{has:r,get:o}=xr(n);let l=r.call(n,e);l||(e=pe(e),l=r.call(n,e));const s=o.call(n,e);return n.set(e,t),l?Rn(t,s)&&_t(n,"set",e,t):_t(n,"add",e,t),this}function nl(e){const t=pe(this),{has:n,get:r}=xr(t);let o=n.call(t,e);o||(e=pe(e),o=n.call(t,e)),r&&r.call(t,e);const l=t.delete(e);return o&&_t(t,"delete",e,void 0),l}function rl(){const e=pe(this),t=e.size!==0,n=e.clear();return t&&_t(e,"clear",void 0,void 0),n}function Jn(e,t){return function(r,o){const l=this,s=l.__v_raw,i=pe(s),a=t?Eo:e?xo:Pn;return!e&&We(i,"iterate",Ut),s.forEach((c,u)=>r.call(o,a(c),a(u),l))}}function Qn(e,t,n){return function(...r){const o=this.__v_raw,l=pe(o),s=rn(l),i=e==="entries"||e===Symbol.iterator&&s,a=e==="keys"&&s,c=o[e](...r),u=n?Eo:t?xo:Pn;return!t&&We(l,"iterate",a?Zr:Ut),{next(){const{value:f,done:d}=c.next();return d?{value:f,done:d}:{value:i?[u(f[0]),u(f[1])]:u(f),done:d}},[Symbol.iterator](){return this}}}}function kt(e){return function(...t){return e==="delete"?!1:this}}function xa(){const e={get(l){return qn(this,l)},get size(){return Yn(this)},has:Gn,add:el,set:tl,delete:nl,clear:rl,forEach:Jn(!1,!1)},t={get(l){return qn(this,l,!1,!0)},get size(){return Yn(this)},has:Gn,add:el,set:tl,delete:nl,clear:rl,forEach:Jn(!1,!0)},n={get(l){return qn(this,l,!0)},get size(){return Yn(this,!0)},has(l){return Gn.call(this,l,!0)},add:kt("add"),set:kt("set"),delete:kt("delete"),clear:kt("clear"),forEach:Jn(!0,!1)},r={get(l){return qn(this,l,!0,!0)},get size(){return Yn(this,!0)},has(l){return Gn.call(this,l,!0)},add:kt("add"),set:kt("set"),delete:kt("delete"),clear:kt("clear"),forEach:Jn(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(l=>{e[l]=Qn(l,!1,!1),n[l]=Qn(l,!0,!1),t[l]=Qn(l,!1,!0),r[l]=Qn(l,!0,!0)}),[e,n,t,r]}const[La,Ca,Ta,Sa]=xa();function wo(e,t){const n=t?e?Sa:Ta:e?Ca:La;return(r,o,l)=>o==="__v_isReactive"?!e:o==="__v_isReadonly"?e:o==="__v_raw"?r:Reflect.get(de(n,o)&&o in r?n:r,o,l)}const Aa={get:wo(!1,!1)},Ra={get:wo(!1,!0)},Pa={get:wo(!0,!1)},ks=new WeakMap,xs=new WeakMap,Ls=new WeakMap,Oa=new WeakMap;function Ia(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function $a(e){return e.__v_skip||!Object.isExtensible(e)?0:Ia(Gi(e))}function Fn(e){return an(e)?e:ko(e,!1,ws,Aa,ks)}function Cs(e){return ko(e,!1,ka,Ra,xs)}function Bn(e){return ko(e,!0,wa,Pa,Ls)}function ko(e,t,n,r,o){if(!xe(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const l=o.get(e);if(l)return l;const s=$a(e);if(s===0)return e;const i=new Proxy(e,s===2?r:n);return o.set(e,i),i}function on(e){return an(e)?on(e.__v_raw):!!(e&&e.__v_isReactive)}function an(e){return!!(e&&e.__v_isReadonly)}function ur(e){return!!(e&&e.__v_isShallow)}function Ts(e){return on(e)||an(e)}function pe(e){const t=e&&e.__v_raw;return t?pe(t):e}function Ss(e){return ar(e,"__v_skip",!0),e}const Pn=e=>xe(e)?Fn(e):e,xo=e=>xe(e)?Bn(e):e;function Lo(e){At&&nt&&(e=pe(e),bs(e.dep||(e.dep=_o())))}function Co(e,t){e=pe(e);const n=e.dep;n&&Xr(n)}function $e(e){return!!(e&&e.__v_isRef===!0)}function ge(e){return As(e,!1)}function To(e){return As(e,!0)}function As(e,t){return $e(e)?e:new Na(e,t)}class Na{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:pe(t),this._value=n?t:Pn(t)}get value(){return Lo(this),this._value}set value(t){const n=this.__v_isShallow||ur(t)||an(t);t=n?t:pe(t),Rn(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:Pn(t),Co(this))}}function ee(e){return $e(e)?e.value:e}const Ma={get:(e,t,n)=>ee(Reflect.get(e,t,n)),set:(e,t,n,r)=>{const o=e[t];return $e(o)&&!$e(n)?(o.value=n,!0):Reflect.set(e,t,n,r)}};function Rs(e){return on(e)?e:new Proxy(e,Ma)}class Da{constructor(t){this.dep=void 0,this.__v_isRef=!0;const{get:n,set:r}=t(()=>Lo(this),()=>Co(this));this._get=n,this._set=r}get value(){return this._get()}set value(t){this._set(t)}}function Ha(e){return new Da(e)}function Lr(e){const t=Q(e)?new Array(e.length):{};for(const n in e)t[n]=Ba(e,n);return t}class Fa{constructor(t,n,r){this._object=t,this._key=n,this._defaultValue=r,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return ua(pe(this._object),this._key)}}function Ba(e,t,n){const r=e[t];return $e(r)?r:new Fa(e,t,n)}class za{constructor(t,n,r,o){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this._dirty=!0,this.effect=new bo(t,()=>{this._dirty||(this._dirty=!0,Co(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!o,this.__v_isReadonly=r}get value(){const t=pe(this);return Lo(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}function ja(e,t,n=!1){let r,o;const l=le(e);return l?(r=e,o=ot):(r=e.get,o=e.set),new za(r,o,l||!o,n)}function Rt(e,t,n,r){let o;try{o=r?e(...r):e()}catch(l){zn(l,t,n)}return o}function Xe(e,t,n,r){if(le(e)){const l=Rt(e,t,n,r);return l&&us(l)&&l.catch(s=>{zn(s,t,n)}),l}const o=[];for(let l=0;l>>1;In(Be[r])ut&&Be.splice(t,1)}function Wa(e){Q(e)?ln.push(...e):(!mt||!mt.includes(e,e.allowRecurse?Bt+1:Bt))&&ln.push(e),Os()}function ol(e,t=On?ut+1:0){for(;tIn(n)-In(r)),Bt=0;Bte.id==null?1/0:e.id,qa=(e,t)=>{const n=In(e)-In(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function Is(e){eo=!1,On=!0,Be.sort(qa);const t=ot;try{for(ut=0;utme(v)?v.trim():v)),f&&(o=n.map(Qi))}let i,a=r[i=Nr(t)]||r[i=Nr(ft(t))];!a&&l&&(a=r[i=Nr(Gt(t))]),a&&Xe(a,e,6,o);const c=r[i+"Once"];if(c){if(!e.emitted)e.emitted={};else if(e.emitted[i])return;e.emitted[i]=!0,Xe(c,e,6,o)}}function $s(e,t,n=!1){const r=t.emitsCache,o=r.get(e);if(o!==void 0)return o;const l=e.emits;let s={},i=!1;if(!le(e)){const a=c=>{const u=$s(c,t,!0);u&&(i=!0,Re(s,u))};!n&&t.mixins.length&&t.mixins.forEach(a),e.extends&&a(e.extends),e.mixins&&e.mixins.forEach(a)}return!l&&!i?(xe(e)&&r.set(e,null),null):(Q(l)?l.forEach(a=>s[a]=null):Re(s,l),xe(e)&&r.set(e,s),s)}function Sr(e,t){return!e||!Dn(t)?!1:(t=t.slice(2).replace(/Once$/,""),de(e,t[0].toLowerCase()+t.slice(1))||de(e,Gt(t))||de(e,t))}let De=null,Ns=null;function dr(e){const t=De;return De=e,Ns=e&&e.type.__scopeId||null,t}function Me(e,t=De,n){if(!t||e._n)return e;const r=(...o)=>{r._d&&vl(-1);const l=dr(t);let s;try{s=e(...o)}finally{dr(l),r._d&&vl(1)}return s};return r._n=!0,r._c=!0,r._d=!0,r}function Dr(e){const{type:t,vnode:n,proxy:r,withProxy:o,props:l,propsOptions:[s],slots:i,attrs:a,emit:c,render:u,renderCache:f,data:d,setupState:v,ctx:y,inheritAttrs:w}=e;let C,g;const b=dr(e);try{if(n.shapeFlag&4){const S=o||r;C=tt(u.call(S,S,f,l,v,d,y)),g=a}else{const S=t;C=tt(S.length>1?S(l,{attrs:a,slots:i,emit:c}):S(l,null)),g=t.props?a:Ya(a)}}catch(S){Tn.length=0,zn(S,e,1),C=te(Ye)}let A=C;if(g&&w!==!1){const S=Object.keys(g),{shapeFlag:U}=A;S.length&&U&7&&(s&&S.some(po)&&(g=Ja(g,s)),A=It(A,g))}return n.dirs&&(A=It(A),A.dirs=A.dirs?A.dirs.concat(n.dirs):n.dirs),n.transition&&(A.transition=n.transition),C=A,dr(b),C}const Ya=e=>{let t;for(const n in e)(n==="class"||n==="style"||Dn(n))&&((t||(t={}))[n]=e[n]);return t},Ja=(e,t)=>{const n={};for(const r in e)(!po(r)||!(r.slice(9)in t))&&(n[r]=e[r]);return n};function Qa(e,t,n){const{props:r,children:o,component:l}=e,{props:s,children:i,patchFlag:a}=t,c=l.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&a>=0){if(a&1024)return!0;if(a&16)return r?ll(r,s,c):!!s;if(a&8){const u=t.dynamicProps;for(let f=0;fe.__isSuspense;function Ms(e,t){t&&t.pendingBranch?Q(e)?t.effects.push(...e):t.effects.push(e):Wa(e)}function Ds(e,t){return Ao(e,null,t)}const Zn={};function lt(e,t,n){return Ao(e,t,n)}function Ao(e,t,{immediate:n,deep:r,flush:o,onTrack:l,onTrigger:s}=ke){var i;const a=ms()===((i=Pe)==null?void 0:i.scope)?Pe:null;let c,u=!1,f=!1;if($e(e)?(c=()=>e.value,u=ur(e)):on(e)?(c=()=>e,r=!0):Q(e)?(f=!0,u=e.some(S=>on(S)||ur(S)),c=()=>e.map(S=>{if($e(S))return S.value;if(on(S))return Vt(S);if(le(S))return Rt(S,a,2)})):le(e)?t?c=()=>Rt(e,a,2):c=()=>{if(!(a&&a.isUnmounted))return d&&d(),Xe(e,a,3,[v])}:c=ot,t&&r){const S=c;c=()=>Vt(S())}let d,v=S=>{d=b.onStop=()=>{Rt(S,a,4)}},y;if(fn)if(v=ot,t?n&&Xe(t,a,3,[c(),f?[]:void 0,v]):c(),o==="sync"){const S=Gc();y=S.__watcherHandles||(S.__watcherHandles=[])}else return ot;let w=f?new Array(e.length).fill(Zn):Zn;const C=()=>{if(b.active)if(t){const S=b.run();(r||u||(f?S.some((U,Z)=>Rn(U,w[Z])):Rn(S,w)))&&(d&&d(),Xe(t,a,3,[S,w===Zn?void 0:f&&w[0]===Zn?[]:w,v]),w=S)}else b.run()};C.allowRecurse=!!t;let g;o==="sync"?g=C:o==="post"?g=()=>Ue(C,a&&a.suspense):(C.pre=!0,a&&(C.id=a.uid),g=()=>Tr(C));const b=new bo(c,g);t?n?C():w=b.run():o==="post"?Ue(b.run.bind(b),a&&a.suspense):b.run();const A=()=>{b.stop(),a&&a.scope&&mo(a.scope.effects,b)};return y&&y.push(A),A}function ec(e,t,n){const r=this.proxy,o=me(e)?e.includes(".")?Hs(r,e):()=>r[e]:e.bind(r,r);let l;le(t)?l=t:(l=t.handler,n=t);const s=Pe;un(this);const i=Ao(o,l.bind(r),n);return s?un(s):Wt(),i}function Hs(e,t){const n=t.split(".");return()=>{let r=e;for(let o=0;o{Vt(n,t)});else if(ds(e))for(const n in e)Vt(e[n],t);return e}function hr(e,t){const n=De;if(n===null)return e;const r=Or(n)||n.proxy,o=e.dirs||(e.dirs=[]);for(let l=0;l{e.isMounted=!0}),Vn(()=>{e.isUnmounting=!0}),e}const Qe=[Function,Array],Fs={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Qe,onEnter:Qe,onAfterEnter:Qe,onEnterCancelled:Qe,onBeforeLeave:Qe,onLeave:Qe,onAfterLeave:Qe,onLeaveCancelled:Qe,onBeforeAppear:Qe,onAppear:Qe,onAfterAppear:Qe,onAppearCancelled:Qe},nc={name:"BaseTransition",props:Fs,setup(e,{slots:t}){const n=ti(),r=tc();let o;return()=>{const l=t.default&&zs(t.default(),!0);if(!l||!l.length)return;let s=l[0];if(l.length>1){for(const w of l)if(w.type!==Ye){s=w;break}}const i=pe(e),{mode:a}=i;if(r.isLeaving)return Hr(s);const c=sl(s);if(!c)return Hr(s);const u=to(c,i,r,n);no(c,u);const f=n.subTree,d=f&&sl(f);let v=!1;const{getTransitionKey:y}=c.type;if(y){const w=y();o===void 0?o=w:w!==o&&(o=w,v=!0)}if(d&&d.type!==Ye&&(!zt(c,d)||v)){const w=to(d,i,r,n);if(no(d,w),a==="out-in")return r.isLeaving=!0,w.afterLeave=()=>{r.isLeaving=!1,n.update.active!==!1&&n.update()},Hr(s);a==="in-out"&&c.type!==Ye&&(w.delayLeave=(C,g,b)=>{const A=Bs(r,d);A[String(d.key)]=d,C._leaveCb=()=>{g(),C._leaveCb=void 0,delete u.delayedLeave},u.delayedLeave=b})}return s}}},rc=nc;function Bs(e,t){const{leavingVNodes:n}=e;let r=n.get(t.type);return r||(r=Object.create(null),n.set(t.type,r)),r}function to(e,t,n,r){const{appear:o,mode:l,persisted:s=!1,onBeforeEnter:i,onEnter:a,onAfterEnter:c,onEnterCancelled:u,onBeforeLeave:f,onLeave:d,onAfterLeave:v,onLeaveCancelled:y,onBeforeAppear:w,onAppear:C,onAfterAppear:g,onAppearCancelled:b}=t,A=String(e.key),S=Bs(n,e),U=(m,j)=>{m&&Xe(m,r,9,j)},Z=(m,j)=>{const D=j[1];U(m,j),Q(m)?m.every(G=>G.length<=1)&&D():m.length<=1&&D()},$={mode:l,persisted:s,beforeEnter(m){let j=i;if(!n.isMounted)if(o)j=w||i;else return;m._leaveCb&&m._leaveCb(!0);const D=S[A];D&&zt(e,D)&&D.el._leaveCb&&D.el._leaveCb(),U(j,[m])},enter(m){let j=a,D=c,G=u;if(!n.isMounted)if(o)j=C||a,D=g||c,G=b||u;else return;let L=!1;const O=m._enterCb=I=>{L||(L=!0,I?U(G,[m]):U(D,[m]),$.delayedLeave&&$.delayedLeave(),m._enterCb=void 0)};j?Z(j,[m,O]):O()},leave(m,j){const D=String(e.key);if(m._enterCb&&m._enterCb(!0),n.isUnmounting)return j();U(f,[m]);let G=!1;const L=m._leaveCb=O=>{G||(G=!0,j(),O?U(y,[m]):U(v,[m]),m._leaveCb=void 0,S[D]===e&&delete S[D])};S[D]=e,d?Z(d,[m,L]):L()},clone(m){return to(m,t,n,r)}};return $}function Hr(e){if(jn(e))return e=It(e),e.children=null,e}function sl(e){return jn(e)?e.children?e.children[0]:void 0:e}function no(e,t){e.shapeFlag&6&&e.component?no(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function zs(e,t=!1,n){let r=[],o=0;for(let l=0;l1)for(let l=0;lRe({name:e.name},t,{setup:e}))():e}const sn=e=>!!e.type.__asyncLoader;function be(e){le(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:r,delay:o=200,timeout:l,suspensible:s=!0,onError:i}=e;let a=null,c,u=0;const f=()=>(u++,a=null,d()),d=()=>{let v;return a||(v=a=t().catch(y=>{if(y=y instanceof Error?y:new Error(String(y)),i)return new Promise((w,C)=>{i(y,()=>w(f()),()=>C(y),u+1)});throw y}).then(y=>v!==a&&a?a:(y&&(y.__esModule||y[Symbol.toStringTag]==="Module")&&(y=y.default),c=y,y)))};return ue({name:"AsyncComponentWrapper",__asyncLoader:d,get __asyncResolved(){return c},setup(){const v=Pe;if(c)return()=>Fr(c,v);const y=b=>{a=null,zn(b,v,13,!r)};if(s&&v.suspense||fn)return d().then(b=>()=>Fr(b,v)).catch(b=>(y(b),()=>r?te(r,{error:b}):null));const w=ge(!1),C=ge(),g=ge(!!o);return o&&setTimeout(()=>{g.value=!1},o),l!=null&&setTimeout(()=>{if(!w.value&&!C.value){const b=new Error(`Async component timed out after ${l}ms.`);y(b),C.value=b}},l),d().then(()=>{w.value=!0,v.parent&&jn(v.parent.vnode)&&Tr(v.parent.update)}).catch(b=>{y(b),C.value=b}),()=>{if(w.value&&c)return Fr(c,v);if(C.value&&r)return te(r,{error:C.value});if(n&&!g.value)return te(n)}}})}function Fr(e,t){const{ref:n,props:r,children:o,ce:l}=t.vnode,s=te(e,r,o);return s.ref=n,s.ce=l,delete t.vnode.ce,s}const jn=e=>e.type.__isKeepAlive;function oc(e,t){js(e,"a",t)}function lc(e,t){js(e,"da",t)}function js(e,t,n=Pe){const r=e.__wdc||(e.__wdc=()=>{let o=n;for(;o;){if(o.isDeactivated)return;o=o.parent}return e()});if(Ar(t,r,n),n){let o=n.parent;for(;o&&o.parent;)jn(o.parent.vnode)&&sc(r,t,n,o),o=o.parent}}function sc(e,t,n,r){const o=Ar(t,e,r,!0);Rr(()=>{mo(r[t],o)},n)}function Ar(e,t,n=Pe,r=!1){if(n){const o=n[e]||(n[e]=[]),l=t.__weh||(t.__weh=(...s)=>{if(n.isUnmounted)return;mn(),un(n);const i=Xe(t,n,e,s);return Wt(),vn(),i});return r?o.unshift(l):o.push(l),l}}const yt=e=>(t,n=Pe)=>(!fn||e==="sp")&&Ar(e,(...r)=>t(...r),n),ic=yt("bm"),Je=yt("m"),ac=yt("bu"),cc=yt("u"),Vn=yt("bum"),Rr=yt("um"),uc=yt("sp"),fc=yt("rtg"),dc=yt("rtc");function hc(e,t=Pe){Ar("ec",e,t)}const Vs="components";function bt(e,t){return mc(Vs,e,!0,t)||e}const pc=Symbol.for("v-ndc");function mc(e,t,n=!0,r=!1){const o=De||Pe;if(o){const l=o.type;if(e===Vs){const i=Kc(l,!1);if(i&&(i===t||i===ft(t)||i===kr(ft(t))))return l}const s=il(o[e]||l[e],t)||il(o.appContext[e],t);return!s&&r?l:s}}function il(e,t){return e&&(e[t]||e[ft(t)]||e[kr(ft(t))])}function Ot(e,t,n,r){let o;const l=n&&n[r];if(Q(e)||me(e)){o=new Array(e.length);for(let s=0,i=e.length;st(s,i,void 0,l&&l[i]));else{const s=Object.keys(e);o=new Array(s.length);for(let i=0,a=s.length;igr(t)?!(t.type===Ye||t.type===we&&!Us(t.children)):!0)?e:null}const ro=e=>e?ni(e)?Or(e)||e.proxy:ro(e.parent):null,Ln=Re(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>ro(e.parent),$root:e=>ro(e.root),$emit:e=>e.emit,$options:e=>Ro(e),$forceUpdate:e=>e.f||(e.f=()=>Tr(e.update)),$nextTick:e=>e.n||(e.n=Cr.bind(e.proxy)),$watch:e=>ec.bind(e)}),Br=(e,t)=>e!==ke&&!e.__isScriptSetup&&de(e,t),vc={get({_:e},t){const{ctx:n,setupState:r,data:o,props:l,accessCache:s,type:i,appContext:a}=e;let c;if(t[0]!=="$"){const v=s[t];if(v!==void 0)switch(v){case 1:return r[t];case 2:return o[t];case 4:return n[t];case 3:return l[t]}else{if(Br(r,t))return s[t]=1,r[t];if(o!==ke&&de(o,t))return s[t]=2,o[t];if((c=e.propsOptions[0])&&de(c,t))return s[t]=3,l[t];if(n!==ke&&de(n,t))return s[t]=4,n[t];oo&&(s[t]=0)}}const u=Ln[t];let f,d;if(u)return t==="$attrs"&&We(e,"get",t),u(e);if((f=i.__cssModules)&&(f=f[t]))return f;if(n!==ke&&de(n,t))return s[t]=4,n[t];if(d=a.config.globalProperties,de(d,t))return d[t]},set({_:e},t,n){const{data:r,setupState:o,ctx:l}=e;return Br(o,t)?(o[t]=n,!0):r!==ke&&de(r,t)?(r[t]=n,!0):de(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(l[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:r,appContext:o,propsOptions:l}},s){let i;return!!n[s]||e!==ke&&de(e,s)||Br(t,s)||(i=l[0])&&de(i,s)||de(r,s)||de(Ln,s)||de(o.config.globalProperties,s)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:de(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function al(e){return Q(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}let oo=!0;function gc(e){const t=Ro(e),n=e.proxy,r=e.ctx;oo=!1,t.beforeCreate&&cl(t.beforeCreate,e,"bc");const{data:o,computed:l,methods:s,watch:i,provide:a,inject:c,created:u,beforeMount:f,mounted:d,beforeUpdate:v,updated:y,activated:w,deactivated:C,beforeDestroy:g,beforeUnmount:b,destroyed:A,unmounted:S,render:U,renderTracked:Z,renderTriggered:$,errorCaptured:m,serverPrefetch:j,expose:D,inheritAttrs:G,components:L,directives:O,filters:I}=t;if(c&&_c(c,r,null),s)for(const re in s){const oe=s[re];le(oe)&&(r[re]=oe.bind(n))}if(o){const re=o.call(n,n);xe(re)&&(e.data=Fn(re))}if(oo=!0,l)for(const re in l){const oe=l[re],He=le(oe)?oe.bind(n,n):le(oe.get)?oe.get.bind(n,n):ot,Ne=!le(oe)&&le(oe.set)?oe.set.bind(n):ot,Ve=B({get:He,set:Ne});Object.defineProperty(r,re,{enumerable:!0,configurable:!0,get:()=>Ve.value,set:Fe=>Ve.value=Fe})}if(i)for(const re in i)Ks(i[re],r,n,re);if(a){const re=le(a)?a.call(n):a;Reflect.ownKeys(re).forEach(oe=>{Kt(oe,re[oe])})}u&&cl(u,e,"c");function V(re,oe){Q(oe)?oe.forEach(He=>re(He.bind(n))):oe&&re(oe.bind(n))}if(V(ic,f),V(Je,d),V(ac,v),V(cc,y),V(oc,w),V(lc,C),V(hc,m),V(dc,Z),V(fc,$),V(Vn,b),V(Rr,S),V(uc,j),Q(D))if(D.length){const re=e.exposed||(e.exposed={});D.forEach(oe=>{Object.defineProperty(re,oe,{get:()=>n[oe],set:He=>n[oe]=He})})}else e.exposed||(e.exposed={});U&&e.render===ot&&(e.render=U),G!=null&&(e.inheritAttrs=G),L&&(e.components=L),O&&(e.directives=O)}function _c(e,t,n=ot){Q(e)&&(e=lo(e));for(const r in e){const o=e[r];let l;xe(o)?"default"in o?l=Te(o.from||r,o.default,!0):l=Te(o.from||r):l=Te(o),$e(l)?Object.defineProperty(t,r,{enumerable:!0,configurable:!0,get:()=>l.value,set:s=>l.value=s}):t[r]=l}}function cl(e,t,n){Xe(Q(e)?e.map(r=>r.bind(t.proxy)):e.bind(t.proxy),t,n)}function Ks(e,t,n,r){const o=r.includes(".")?Hs(n,r):()=>n[r];if(me(e)){const l=t[e];le(l)&<(o,l)}else if(le(e))lt(o,e.bind(n));else if(xe(e))if(Q(e))e.forEach(l=>Ks(l,t,n,r));else{const l=le(e.handler)?e.handler.bind(n):t[e.handler];le(l)&<(o,l,e)}}function Ro(e){const t=e.type,{mixins:n,extends:r}=t,{mixins:o,optionsCache:l,config:{optionMergeStrategies:s}}=e.appContext,i=l.get(t);let a;return i?a=i:!o.length&&!n&&!r?a=t:(a={},o.length&&o.forEach(c=>pr(a,c,s,!0)),pr(a,t,s)),xe(t)&&l.set(t,a),a}function pr(e,t,n,r=!1){const{mixins:o,extends:l}=t;l&&pr(e,l,n,!0),o&&o.forEach(s=>pr(e,s,n,!0));for(const s in t)if(!(r&&s==="expose")){const i=bc[s]||n&&n[s];e[s]=i?i(e[s],t[s]):t[s]}return e}const bc={data:ul,props:fl,emits:fl,methods:kn,computed:kn,beforeCreate:ze,created:ze,beforeMount:ze,mounted:ze,beforeUpdate:ze,updated:ze,beforeDestroy:ze,beforeUnmount:ze,destroyed:ze,unmounted:ze,activated:ze,deactivated:ze,errorCaptured:ze,serverPrefetch:ze,components:kn,directives:kn,watch:Ec,provide:ul,inject:yc};function ul(e,t){return t?e?function(){return Re(le(e)?e.call(this,this):e,le(t)?t.call(this,this):t)}:t:e}function yc(e,t){return kn(lo(e),lo(t))}function lo(e){if(Q(e)){const t={};for(let n=0;n1)return n&&le(t)?t.call(r&&r.proxy):t}}function xc(e,t,n,r=!1){const o={},l={};ar(l,Pr,1),e.propsDefaults=Object.create(null),qs(e,t,o,l);for(const s in e.propsOptions[0])s in o||(o[s]=void 0);n?e.props=r?o:Cs(o):e.type.props?e.props=o:e.props=l,e.attrs=l}function Lc(e,t,n,r){const{props:o,attrs:l,vnode:{patchFlag:s}}=e,i=pe(o),[a]=e.propsOptions;let c=!1;if((r||s>0)&&!(s&16)){if(s&8){const u=e.vnode.dynamicProps;for(let f=0;f{a=!0;const[d,v]=Gs(f,t,!0);Re(s,d),v&&i.push(...v)};!n&&t.mixins.length&&t.mixins.forEach(u),e.extends&&u(e.extends),e.mixins&&e.mixins.forEach(u)}if(!l&&!a)return xe(e)&&r.set(e,nn),nn;if(Q(l))for(let u=0;u-1,v[1]=w<0||y-1||de(v,"default"))&&i.push(f)}}}const c=[s,i];return xe(e)&&r.set(e,c),c}function dl(e){return e[0]!=="$"}function hl(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:e===null?"null":""}function pl(e,t){return hl(e)===hl(t)}function ml(e,t){return Q(t)?t.findIndex(n=>pl(n,e)):le(t)&&pl(t,e)?0:-1}const Ys=e=>e[0]==="_"||e==="$stable",Po=e=>Q(e)?e.map(tt):[tt(e)],Cc=(e,t,n)=>{if(t._n)return t;const r=Me((...o)=>Po(t(...o)),n);return r._c=!1,r},Js=(e,t,n)=>{const r=e._ctx;for(const o in e){if(Ys(o))continue;const l=e[o];if(le(l))t[o]=Cc(o,l,r);else if(l!=null){const s=Po(l);t[o]=()=>s}}},Qs=(e,t)=>{const n=Po(t);e.slots.default=()=>n},Tc=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=pe(t),ar(t,"_",n)):Js(t,e.slots={})}else e.slots={},t&&Qs(e,t);ar(e.slots,Pr,1)},Sc=(e,t,n)=>{const{vnode:r,slots:o}=e;let l=!0,s=ke;if(r.shapeFlag&32){const i=t._;i?n&&i===1?l=!1:(Re(o,t),!n&&i===1&&delete o._):(l=!t.$stable,Js(t,o)),s=t}else t&&(Qs(e,t),s={default:1});if(l)for(const i in o)!Ys(i)&&!(i in s)&&delete o[i]};function vr(e,t,n,r,o=!1){if(Q(e)){e.forEach((d,v)=>vr(d,t&&(Q(t)?t[v]:t),n,r,o));return}if(sn(r)&&!o)return;const l=r.shapeFlag&4?Or(r.component)||r.component.proxy:r.el,s=o?null:l,{i,r:a}=e,c=t&&t.r,u=i.refs===ke?i.refs={}:i.refs,f=i.setupState;if(c!=null&&c!==a&&(me(c)?(u[c]=null,de(f,c)&&(f[c]=null)):$e(c)&&(c.value=null)),le(a))Rt(a,i,12,[s,u]);else{const d=me(a),v=$e(a);if(d||v){const y=()=>{if(e.f){const w=d?de(f,a)?f[a]:u[a]:a.value;o?Q(w)&&mo(w,l):Q(w)?w.includes(l)||w.push(l):d?(u[a]=[l],de(f,a)&&(f[a]=u[a])):(a.value=[l],e.k&&(u[e.k]=a.value))}else d?(u[a]=s,de(f,a)&&(f[a]=s)):v&&(a.value=s,e.k&&(u[e.k]=s))};s?(y.id=-1,Ue(y,n)):y()}}}let xt=!1;const Xn=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",er=e=>e.nodeType===8;function Ac(e){const{mt:t,p:n,o:{patchProp:r,createText:o,nextSibling:l,parentNode:s,remove:i,insert:a,createComment:c}}=e,u=(g,b)=>{if(!b.hasChildNodes()){n(null,g,b),fr(),b._vnode=g;return}xt=!1,f(b.firstChild,g,null,null,null),fr(),b._vnode=g,xt&&console.error("Hydration completed but contains mismatches.")},f=(g,b,A,S,U,Z=!1)=>{const $=er(g)&&g.data==="[",m=()=>w(g,b,A,S,U,$),{type:j,ref:D,shapeFlag:G,patchFlag:L}=b;let O=g.nodeType;b.el=g,L===-2&&(Z=!1,b.dynamicChildren=null);let I=null;switch(j){case cn:O!==3?b.children===""?(a(b.el=o(""),s(g),g),I=g):I=m():(g.data!==b.children&&(xt=!0,g.data=b.children),I=l(g));break;case Ye:O!==8||$?I=m():I=l(g);break;case Cn:if($&&(g=l(g),O=g.nodeType),O===1||O===3){I=g;const se=!b.children.length;for(let V=0;V{Z=Z||!!b.dynamicChildren;const{type:$,props:m,patchFlag:j,shapeFlag:D,dirs:G}=b,L=$==="input"&&G||$==="option";if(L||j!==-1){if(G&&ct(b,null,A,"created"),m)if(L||!Z||j&48)for(const I in m)(L&&I.endsWith("value")||Dn(I)&&!xn(I))&&r(g,I,null,m[I],!1,void 0,A);else m.onClick&&r(g,"onClick",null,m.onClick,!1,void 0,A);let O;if((O=m&&m.onVnodeBeforeMount)&&Ze(O,A,b),G&&ct(b,null,A,"beforeMount"),((O=m&&m.onVnodeMounted)||G)&&Ms(()=>{O&&Ze(O,A,b),G&&ct(b,null,A,"mounted")},S),D&16&&!(m&&(m.innerHTML||m.textContent))){let I=v(g.firstChild,b,g,A,S,U,Z);for(;I;){xt=!0;const se=I;I=I.nextSibling,i(se)}}else D&8&&g.textContent!==b.children&&(xt=!0,g.textContent=b.children)}return g.nextSibling},v=(g,b,A,S,U,Z,$)=>{$=$||!!b.dynamicChildren;const m=b.children,j=m.length;for(let D=0;D{const{slotScopeIds:$}=b;$&&(U=U?U.concat($):$);const m=s(g),j=v(l(g),b,m,A,S,U,Z);return j&&er(j)&&j.data==="]"?l(b.anchor=j):(xt=!0,a(b.anchor=c("]"),m,j),j)},w=(g,b,A,S,U,Z)=>{if(xt=!0,b.el=null,Z){const j=C(g);for(;;){const D=l(g);if(D&&D!==j)i(D);else break}}const $=l(g),m=s(g);return i(g),n(null,b,m,$,A,S,Xn(m),U),$},C=g=>{let b=0;for(;g;)if(g=l(g),g&&er(g)&&(g.data==="["&&b++,g.data==="]")){if(b===0)return l(g);b--}return g};return[u,f]}const Ue=Ms;function Rc(e){return Pc(e,Ac)}function Pc(e,t){const n=Jr();n.__VUE__=!0;const{insert:r,remove:o,patchProp:l,createElement:s,createText:i,createComment:a,setText:c,setElementText:u,parentNode:f,nextSibling:d,setScopeId:v=ot,insertStaticContent:y}=e,w=(h,p,_,E=null,x=null,T=null,H=!1,P=null,M=!!p.dynamicChildren)=>{if(h===p)return;h&&!zt(h,p)&&(E=k(h),Fe(h,x,T,!0),h=null),p.patchFlag===-2&&(M=!1,p.dynamicChildren=null);const{type:R,ref:Y,shapeFlag:K}=p;switch(R){case cn:C(h,p,_,E);break;case Ye:g(h,p,_,E);break;case Cn:h==null&&b(p,_,E,H);break;case we:L(h,p,_,E,x,T,H,P,M);break;default:K&1?U(h,p,_,E,x,T,H,P,M):K&6?O(h,p,_,E,x,T,H,P,M):(K&64||K&128)&&R.process(h,p,_,E,x,T,H,P,M,N)}Y!=null&&x&&vr(Y,h&&h.ref,T,p||h,!p)},C=(h,p,_,E)=>{if(h==null)r(p.el=i(p.children),_,E);else{const x=p.el=h.el;p.children!==h.children&&c(x,p.children)}},g=(h,p,_,E)=>{h==null?r(p.el=a(p.children||""),_,E):p.el=h.el},b=(h,p,_,E)=>{[h.el,h.anchor]=y(h.children,p,_,E,h.el,h.anchor)},A=({el:h,anchor:p},_,E)=>{let x;for(;h&&h!==p;)x=d(h),r(h,_,E),h=x;r(p,_,E)},S=({el:h,anchor:p})=>{let _;for(;h&&h!==p;)_=d(h),o(h),h=_;o(p)},U=(h,p,_,E,x,T,H,P,M)=>{H=H||p.type==="svg",h==null?Z(p,_,E,x,T,H,P,M):j(h,p,x,T,H,P,M)},Z=(h,p,_,E,x,T,H,P)=>{let M,R;const{type:Y,props:K,shapeFlag:J,transition:ne,dirs:ie}=h;if(M=h.el=s(h.type,T,K&&K.is,K),J&8?u(M,h.children):J&16&&m(h.children,M,null,E,x,T&&Y!=="foreignObject",H,P),ie&&ct(h,null,E,"created"),$(M,h,h.scopeId,H,E),K){for(const _e in K)_e!=="value"&&!xn(_e)&&l(M,_e,null,K[_e],T,h.children,E,x,Ie);"value"in K&&l(M,"value",null,K.value),(R=K.onVnodeBeforeMount)&&Ze(R,E,h)}ie&&ct(h,null,E,"beforeMount");const ye=(!x||x&&!x.pendingBranch)&&ne&&!ne.persisted;ye&&ne.beforeEnter(M),r(M,p,_),((R=K&&K.onVnodeMounted)||ye||ie)&&Ue(()=>{R&&Ze(R,E,h),ye&&ne.enter(M),ie&&ct(h,null,E,"mounted")},x)},$=(h,p,_,E,x)=>{if(_&&v(h,_),E)for(let T=0;T{for(let R=M;R{const P=p.el=h.el;let{patchFlag:M,dynamicChildren:R,dirs:Y}=p;M|=h.patchFlag&16;const K=h.props||ke,J=p.props||ke;let ne;_&&Mt(_,!1),(ne=J.onVnodeBeforeUpdate)&&Ze(ne,_,p,h),Y&&ct(p,h,_,"beforeUpdate"),_&&Mt(_,!0);const ie=x&&p.type!=="foreignObject";if(R?D(h.dynamicChildren,R,P,_,E,ie,T):H||oe(h,p,P,null,_,E,ie,T,!1),M>0){if(M&16)G(P,p,K,J,_,E,x);else if(M&2&&K.class!==J.class&&l(P,"class",null,J.class,x),M&4&&l(P,"style",K.style,J.style,x),M&8){const ye=p.dynamicProps;for(let _e=0;_e{ne&&Ze(ne,_,p,h),Y&&ct(p,h,_,"updated")},E)},D=(h,p,_,E,x,T,H)=>{for(let P=0;P{if(_!==E){if(_!==ke)for(const P in _)!xn(P)&&!(P in E)&&l(h,P,_[P],null,H,p.children,x,T,Ie);for(const P in E){if(xn(P))continue;const M=E[P],R=_[P];M!==R&&P!=="value"&&l(h,P,R,M,H,p.children,x,T,Ie)}"value"in E&&l(h,"value",_.value,E.value)}},L=(h,p,_,E,x,T,H,P,M)=>{const R=p.el=h?h.el:i(""),Y=p.anchor=h?h.anchor:i("");let{patchFlag:K,dynamicChildren:J,slotScopeIds:ne}=p;ne&&(P=P?P.concat(ne):ne),h==null?(r(R,_,E),r(Y,_,E),m(p.children,_,Y,x,T,H,P,M)):K>0&&K&64&&J&&h.dynamicChildren?(D(h.dynamicChildren,J,_,x,T,H,P),(p.key!=null||x&&p===x.subTree)&&Zs(h,p,!0)):oe(h,p,_,Y,x,T,H,P,M)},O=(h,p,_,E,x,T,H,P,M)=>{p.slotScopeIds=P,h==null?p.shapeFlag&512?x.ctx.activate(p,_,E,H,M):I(p,_,E,x,T,H,M):se(h,p,M)},I=(h,p,_,E,x,T,H)=>{const P=h.component=Bc(h,E,x);if(jn(h)&&(P.ctx.renderer=N),zc(P),P.asyncDep){if(x&&x.registerDep(P,V),!h.el){const M=P.subTree=te(Ye);g(null,M,p,_)}return}V(P,h,p,_,x,T,H)},se=(h,p,_)=>{const E=p.component=h.component;if(Qa(h,p,_))if(E.asyncDep&&!E.asyncResolved){re(E,p,_);return}else E.next=p,Ka(E.update),E.update();else p.el=h.el,E.vnode=p},V=(h,p,_,E,x,T,H)=>{const P=()=>{if(h.isMounted){let{next:Y,bu:K,u:J,parent:ne,vnode:ie}=h,ye=Y,_e;Mt(h,!1),Y?(Y.el=ie.el,re(h,Y,H)):Y=ie,K&&Mr(K),(_e=Y.props&&Y.props.onVnodeBeforeUpdate)&&Ze(_e,ne,Y,ie),Mt(h,!0);const Se=Dr(h),et=h.subTree;h.subTree=Se,w(et,Se,f(et.el),k(et),h,x,T),Y.el=Se.el,ye===null&&Za(h,Se.el),J&&Ue(J,x),(_e=Y.props&&Y.props.onVnodeUpdated)&&Ue(()=>Ze(_e,ne,Y,ie),x)}else{let Y;const{el:K,props:J}=p,{bm:ne,m:ie,parent:ye}=h,_e=sn(p);if(Mt(h,!1),ne&&Mr(ne),!_e&&(Y=J&&J.onVnodeBeforeMount)&&Ze(Y,ye,p),Mt(h,!0),K&&ce){const Se=()=>{h.subTree=Dr(h),ce(K,h.subTree,h,x,null)};_e?p.type.__asyncLoader().then(()=>!h.isUnmounted&&Se()):Se()}else{const Se=h.subTree=Dr(h);w(null,Se,_,E,h,x,T),p.el=Se.el}if(ie&&Ue(ie,x),!_e&&(Y=J&&J.onVnodeMounted)){const Se=p;Ue(()=>Ze(Y,ye,Se),x)}(p.shapeFlag&256||ye&&sn(ye.vnode)&&ye.vnode.shapeFlag&256)&&h.a&&Ue(h.a,x),h.isMounted=!0,p=_=E=null}},M=h.effect=new bo(P,()=>Tr(R),h.scope),R=h.update=()=>M.run();R.id=h.uid,Mt(h,!0),R()},re=(h,p,_)=>{p.component=h;const E=h.vnode.props;h.vnode=p,h.next=null,Lc(h,p.props,E,_),Sc(h,p.children,_),mn(),ol(),vn()},oe=(h,p,_,E,x,T,H,P,M=!1)=>{const R=h&&h.children,Y=h?h.shapeFlag:0,K=p.children,{patchFlag:J,shapeFlag:ne}=p;if(J>0){if(J&128){Ne(R,K,_,E,x,T,H,P,M);return}else if(J&256){He(R,K,_,E,x,T,H,P,M);return}}ne&8?(Y&16&&Ie(R,x,T),K!==R&&u(_,K)):Y&16?ne&16?Ne(R,K,_,E,x,T,H,P,M):Ie(R,x,T,!0):(Y&8&&u(_,""),ne&16&&m(K,_,E,x,T,H,P,M))},He=(h,p,_,E,x,T,H,P,M)=>{h=h||nn,p=p||nn;const R=h.length,Y=p.length,K=Math.min(R,Y);let J;for(J=0;JY?Ie(h,x,T,!0,!1,K):m(p,_,E,x,T,H,P,M,K)},Ne=(h,p,_,E,x,T,H,P,M)=>{let R=0;const Y=p.length;let K=h.length-1,J=Y-1;for(;R<=K&&R<=J;){const ne=h[R],ie=p[R]=M?Tt(p[R]):tt(p[R]);if(zt(ne,ie))w(ne,ie,_,null,x,T,H,P,M);else break;R++}for(;R<=K&&R<=J;){const ne=h[K],ie=p[J]=M?Tt(p[J]):tt(p[J]);if(zt(ne,ie))w(ne,ie,_,null,x,T,H,P,M);else break;K--,J--}if(R>K){if(R<=J){const ne=J+1,ie=neJ)for(;R<=K;)Fe(h[R],x,T,!0),R++;else{const ne=R,ie=R,ye=new Map;for(R=ie;R<=J;R++){const qe=p[R]=M?Tt(p[R]):tt(p[R]);qe.key!=null&&ye.set(qe.key,R)}let _e,Se=0;const et=J-ie+1;let Qt=!1,Wo=0;const gn=new Array(et);for(R=0;R=et){Fe(qe,x,T,!0);continue}let at;if(qe.key!=null)at=ye.get(qe.key);else for(_e=ie;_e<=J;_e++)if(gn[_e-ie]===0&&zt(qe,p[_e])){at=_e;break}at===void 0?Fe(qe,x,T,!0):(gn[at-ie]=R+1,at>=Wo?Wo=at:Qt=!0,w(qe,p[at],_,null,x,T,H,P,M),Se++)}const qo=Qt?Oc(gn):nn;for(_e=qo.length-1,R=et-1;R>=0;R--){const qe=ie+R,at=p[qe],Go=qe+1{const{el:T,type:H,transition:P,children:M,shapeFlag:R}=h;if(R&6){Ve(h.component.subTree,p,_,E);return}if(R&128){h.suspense.move(p,_,E);return}if(R&64){H.move(h,p,_,N);return}if(H===we){r(T,p,_);for(let K=0;KP.enter(T),x);else{const{leave:K,delayLeave:J,afterLeave:ne}=P,ie=()=>r(T,p,_),ye=()=>{K(T,()=>{ie(),ne&&ne()})};J?J(T,ie,ye):ye()}else r(T,p,_)},Fe=(h,p,_,E=!1,x=!1)=>{const{type:T,props:H,ref:P,children:M,dynamicChildren:R,shapeFlag:Y,patchFlag:K,dirs:J}=h;if(P!=null&&vr(P,null,_,h,!0),Y&256){p.ctx.deactivate(h);return}const ne=Y&1&&J,ie=!sn(h);let ye;if(ie&&(ye=H&&H.onVnodeBeforeUnmount)&&Ze(ye,p,h),Y&6)it(h.component,_,E);else{if(Y&128){h.suspense.unmount(_,E);return}ne&&ct(h,null,p,"beforeUnmount"),Y&64?h.type.remove(h,p,_,x,N,E):R&&(T!==we||K>0&&K&64)?Ie(R,p,_,!1,!0):(T===we&&K&384||!x&&Y&16)&&Ie(M,p,_),E&&Et(h)}(ie&&(ye=H&&H.onVnodeUnmounted)||ne)&&Ue(()=>{ye&&Ze(ye,p,h),ne&&ct(h,null,p,"unmounted")},_)},Et=h=>{const{type:p,el:_,anchor:E,transition:x}=h;if(p===we){wt(_,E);return}if(p===Cn){S(h);return}const T=()=>{o(_),x&&!x.persisted&&x.afterLeave&&x.afterLeave()};if(h.shapeFlag&1&&x&&!x.persisted){const{leave:H,delayLeave:P}=x,M=()=>H(_,T);P?P(h.el,T,M):M()}else T()},wt=(h,p)=>{let _;for(;h!==p;)_=d(h),o(h),h=_;o(p)},it=(h,p,_)=>{const{bum:E,scope:x,update:T,subTree:H,um:P}=h;E&&Mr(E),x.stop(),T&&(T.active=!1,Fe(H,h,p,_)),P&&Ue(P,p),Ue(()=>{h.isUnmounted=!0},p),p&&p.pendingBranch&&!p.isUnmounted&&h.asyncDep&&!h.asyncResolved&&h.suspenseId===p.pendingId&&(p.deps--,p.deps===0&&p.resolve())},Ie=(h,p,_,E=!1,x=!1,T=0)=>{for(let H=T;Hh.shapeFlag&6?k(h.component.subTree):h.shapeFlag&128?h.suspense.next():d(h.anchor||h.el),z=(h,p,_)=>{h==null?p._vnode&&Fe(p._vnode,null,null,!0):w(p._vnode||null,h,p,null,null,null,_),ol(),fr(),p._vnode=h},N={p:w,um:Fe,m:Ve,r:Et,mt:I,mc:m,pc:oe,pbc:D,n:k,o:e};let W,ce;return t&&([W,ce]=t(N)),{render:z,hydrate:W,createApp:kc(z,W)}}function Mt({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function Zs(e,t,n=!1){const r=e.children,o=t.children;if(Q(r)&&Q(o))for(let l=0;l>1,e[n[i]]0&&(t[r]=n[l-1]),n[l]=r)}}for(l=n.length,s=n[l-1];l-- >0;)n[l]=s,s=t[s];return n}const Ic=e=>e.__isTeleport,we=Symbol.for("v-fgt"),cn=Symbol.for("v-txt"),Ye=Symbol.for("v-cmt"),Cn=Symbol.for("v-stc"),Tn=[];let rt=null;function F(e=!1){Tn.push(rt=e?null:[])}function $c(){Tn.pop(),rt=Tn[Tn.length-1]||null}let $n=1;function vl(e){$n+=e}function Xs(e){return e.dynamicChildren=$n>0?rt||nn:null,$c(),$n>0&&rt&&rt.push(e),e}function X(e,t,n,r,o,l){return Xs(he(e,t,n,r,o,l,!0))}function Ae(e,t,n,r,o){return Xs(te(e,t,n,r,o,!0))}function gr(e){return e?e.__v_isVNode===!0:!1}function zt(e,t){return e.type===t.type&&e.key===t.key}const Pr="__vInternal",ei=({key:e})=>e??null,sr=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?me(e)||$e(e)||le(e)?{i:De,r:e,k:t,f:!!n}:e:null);function he(e,t=null,n=null,r=0,o=null,l=e===we?0:1,s=!1,i=!1){const a={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&ei(t),ref:t&&sr(t),scopeId:Ns,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:l,patchFlag:r,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:De};return i?(Oo(a,n),l&128&&e.normalize(a)):n&&(a.shapeFlag|=me(n)?8:16),$n>0&&!s&&rt&&(a.patchFlag>0||l&6)&&a.patchFlag!==32&&rt.push(a),a}const te=Nc;function Nc(e,t=null,n=null,r=0,o=null,l=!1){if((!e||e===pc)&&(e=Ye),gr(e)){const i=It(e,t,!0);return n&&Oo(i,n),$n>0&&!l&&rt&&(i.shapeFlag&6?rt[rt.indexOf(e)]=i:rt.push(i)),i.patchFlag|=-2,i}if(Wc(e)&&(e=e.__vccOpts),t){t=Mc(t);let{class:i,style:a}=t;i&&!me(i)&&(t.class=Ke(i)),xe(a)&&(Ts(a)&&!Q(a)&&(a=Re({},a)),t.style=Hn(a))}const s=me(e)?1:Xa(e)?128:Ic(e)?64:xe(e)?4:le(e)?2:0;return he(e,t,n,r,o,s,l,!0)}function Mc(e){return e?Ts(e)||Pr in e?Re({},e):e:null}function It(e,t,n=!1){const{props:r,ref:o,patchFlag:l,children:s}=e,i=t?io(r||{},t):r;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:i,key:i&&ei(i),ref:t&&t.ref?n&&o?Q(o)?o.concat(sr(t)):[o,sr(t)]:sr(t):o,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:s,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==we?l===-1?16:l|16:l,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&It(e.ssContent),ssFallback:e.ssFallback&&It(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function $t(e=" ",t=0){return te(cn,null,e,t)}function Dc(e,t){const n=te(Cn,null,e);return n.staticCount=t,n}function Ce(e="",t=!1){return t?(F(),Ae(Ye,null,e)):te(Ye,null,e)}function tt(e){return e==null||typeof e=="boolean"?te(Ye):Q(e)?te(we,null,e.slice()):typeof e=="object"?Tt(e):te(cn,null,String(e))}function Tt(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:It(e)}function Oo(e,t){let n=0;const{shapeFlag:r}=e;if(t==null)t=null;else if(Q(t))n=16;else if(typeof t=="object")if(r&65){const o=t.default;o&&(o._c&&(o._d=!1),Oo(e,o()),o._c&&(o._d=!0));return}else{n=32;const o=t._;!o&&!(Pr in t)?t._ctx=De:o===3&&De&&(De.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else le(t)?(t={default:t,_ctx:De},n=32):(t=String(t),r&64?(n=16,t=[$t(t)]):n=8);e.children=t,e.shapeFlag|=n}function io(...e){const t={};for(let n=0;nPe||De;let Io,Zt,gl="__VUE_INSTANCE_SETTERS__";(Zt=Jr()[gl])||(Zt=Jr()[gl]=[]),Zt.push(e=>Pe=e),Io=e=>{Zt.length>1?Zt.forEach(t=>t(e)):Zt[0](e)};const un=e=>{Io(e),e.scope.on()},Wt=()=>{Pe&&Pe.scope.off(),Io(null)};function ni(e){return e.vnode.shapeFlag&4}let fn=!1;function zc(e,t=!1){fn=t;const{props:n,children:r}=e.vnode,o=ni(e);xc(e,n,o,t),Tc(e,r);const l=o?jc(e,t):void 0;return fn=!1,l}function jc(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=Ss(new Proxy(e.ctx,vc));const{setup:r}=n;if(r){const o=e.setupContext=r.length>1?Uc(e):null;un(e),mn();const l=Rt(r,e,0,[e.props,o]);if(vn(),Wt(),us(l)){if(l.then(Wt,Wt),t)return l.then(s=>{_l(e,s,t)}).catch(s=>{zn(s,e,0)});e.asyncDep=l}else _l(e,l,t)}else ri(e,t)}function _l(e,t,n){le(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:xe(t)&&(e.setupState=Rs(t)),ri(e,n)}let bl;function ri(e,t,n){const r=e.type;if(!e.render){if(!t&&bl&&!r.render){const o=r.template||Ro(e).template;if(o){const{isCustomElement:l,compilerOptions:s}=e.appContext.config,{delimiters:i,compilerOptions:a}=r,c=Re(Re({isCustomElement:l,delimiters:i},s),a);r.render=bl(o,c)}}e.render=r.render||ot}un(e),mn(),gc(e),vn(),Wt()}function Vc(e){return e.attrsProxy||(e.attrsProxy=new Proxy(e.attrs,{get(t,n){return We(e,"get","$attrs"),t[n]}}))}function Uc(e){const t=n=>{e.exposed=n||{}};return{get attrs(){return Vc(e)},slots:e.slots,emit:e.emit,expose:t}}function Or(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(Rs(Ss(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in Ln)return Ln[n](e)},has(t,n){return n in t||n in Ln}}))}function Kc(e,t=!0){return le(e)?e.displayName||e.name:e.name||t&&e.__name}function Wc(e){return le(e)&&"__vccOpts"in e}const B=(e,t)=>ja(e,t,fn);function ae(e,t,n){const r=arguments.length;return r===2?xe(t)&&!Q(t)?gr(t)?te(e,null,[t]):te(e,t):te(e,null,t):(r>3?n=Array.prototype.slice.call(arguments,2):r===3&&gr(n)&&(n=[n]),te(e,t,n))}const qc=Symbol.for("v-scx"),Gc=()=>Te(qc),Yc="3.3.4",Jc="http://www.w3.org/2000/svg",jt=typeof document<"u"?document:null,yl=jt&&jt.createElement("template"),Qc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,r)=>{const o=t?jt.createElementNS(Jc,e):jt.createElement(e,n?{is:n}:void 0);return e==="select"&&r&&r.multiple!=null&&o.setAttribute("multiple",r.multiple),o},createText:e=>jt.createTextNode(e),createComment:e=>jt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>jt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,r,o,l){const s=n?n.previousSibling:t.lastChild;if(o&&(o===l||o.nextSibling))for(;t.insertBefore(o.cloneNode(!0),n),!(o===l||!(o=o.nextSibling)););else{yl.innerHTML=r?`${e}`:e;const i=yl.content;if(r){const a=i.firstChild;for(;a.firstChild;)i.appendChild(a.firstChild);i.removeChild(a)}t.insertBefore(i,n)}return[s?s.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function Zc(e,t,n){const r=e._vtc;r&&(t=(t?[t,...r]:[...r]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function Xc(e,t,n){const r=e.style,o=me(n);if(n&&!o){if(t&&!me(t))for(const l in t)n[l]==null&&ao(r,l,"");for(const l in n)ao(r,l,n[l])}else{const l=r.display;o?t!==n&&(r.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(r.display=l)}}const El=/\s*!important$/;function ao(e,t,n){if(Q(n))n.forEach(r=>ao(e,t,r));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const r=eu(e,t);El.test(n)?e.setProperty(Gt(r),n.replace(El,""),"important"):e[r]=n}}const wl=["Webkit","Moz","ms"],zr={};function eu(e,t){const n=zr[t];if(n)return n;let r=ft(t);if(r!=="filter"&&r in e)return zr[t]=r;r=kr(r);for(let o=0;ojr||(iu.then(()=>jr=0),jr=Date.now());function cu(e,t){const n=r=>{if(!r._vts)r._vts=Date.now();else if(r._vts<=n.attached)return;Xe(uu(r,n.value),t,5,[r])};return n.value=e,n.attached=au(),n}function uu(e,t){if(Q(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(r=>o=>!o._stopped&&r&&r(o))}else return t}const Ll=/^on[a-z]/,fu=(e,t,n,r,o=!1,l,s,i,a)=>{t==="class"?Zc(e,r,o):t==="style"?Xc(e,n,r):Dn(t)?po(t)||lu(e,t,n,r,s):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):du(e,t,r,o))?nu(e,t,r,l,s,i,a):(t==="true-value"?e._trueValue=r:t==="false-value"&&(e._falseValue=r),tu(e,t,r,o))};function du(e,t,n,r){return r?!!(t==="innerHTML"||t==="textContent"||t in e&&Ll.test(t)&&le(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||Ll.test(t)&&me(n)?!1:t in e}const Lt="transition",_n="animation",Un=(e,{slots:t})=>ae(rc,hu(e),t);Un.displayName="Transition";const oi={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Un.props=Re({},Fs,oi);const Dt=(e,t=[])=>{Q(e)?e.forEach(n=>n(...t)):e&&e(...t)},Cl=e=>e?Q(e)?e.some(t=>t.length>1):e.length>1:!1;function hu(e){const t={};for(const L in e)L in oi||(t[L]=e[L]);if(e.css===!1)return t;const{name:n="v",type:r,duration:o,enterFromClass:l=`${n}-enter-from`,enterActiveClass:s=`${n}-enter-active`,enterToClass:i=`${n}-enter-to`,appearFromClass:a=l,appearActiveClass:c=s,appearToClass:u=i,leaveFromClass:f=`${n}-leave-from`,leaveActiveClass:d=`${n}-leave-active`,leaveToClass:v=`${n}-leave-to`}=e,y=pu(o),w=y&&y[0],C=y&&y[1],{onBeforeEnter:g,onEnter:b,onEnterCancelled:A,onLeave:S,onLeaveCancelled:U,onBeforeAppear:Z=g,onAppear:$=b,onAppearCancelled:m=A}=t,j=(L,O,I)=>{Ht(L,O?u:i),Ht(L,O?c:s),I&&I()},D=(L,O)=>{L._isLeaving=!1,Ht(L,f),Ht(L,v),Ht(L,d),O&&O()},G=L=>(O,I)=>{const se=L?$:b,V=()=>j(O,L,I);Dt(se,[O,V]),Tl(()=>{Ht(O,L?a:l),Ct(O,L?u:i),Cl(se)||Sl(O,r,w,V)})};return Re(t,{onBeforeEnter(L){Dt(g,[L]),Ct(L,l),Ct(L,s)},onBeforeAppear(L){Dt(Z,[L]),Ct(L,a),Ct(L,c)},onEnter:G(!1),onAppear:G(!0),onLeave(L,O){L._isLeaving=!0;const I=()=>D(L,O);Ct(L,f),gu(),Ct(L,d),Tl(()=>{L._isLeaving&&(Ht(L,f),Ct(L,v),Cl(S)||Sl(L,r,C,I))}),Dt(S,[L,I])},onEnterCancelled(L){j(L,!1),Dt(A,[L])},onAppearCancelled(L){j(L,!0),Dt(m,[L])},onLeaveCancelled(L){D(L),Dt(U,[L])}})}function pu(e){if(e==null)return null;if(xe(e))return[Vr(e.enter),Vr(e.leave)];{const t=Vr(e);return[t,t]}}function Vr(e){return Zi(e)}function Ct(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e._vtc||(e._vtc=new Set)).add(t)}function Ht(e,t){t.split(/\s+/).forEach(r=>r&&e.classList.remove(r));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function Tl(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let mu=0;function Sl(e,t,n,r){const o=e._endId=++mu,l=()=>{o===e._endId&&r()};if(n)return setTimeout(l,n);const{type:s,timeout:i,propCount:a}=vu(e,t);if(!s)return r();const c=s+"end";let u=0;const f=()=>{e.removeEventListener(c,d),l()},d=v=>{v.target===e&&++u>=a&&f()};setTimeout(()=>{u(n[y]||"").split(", "),o=r(`${Lt}Delay`),l=r(`${Lt}Duration`),s=Al(o,l),i=r(`${_n}Delay`),a=r(`${_n}Duration`),c=Al(i,a);let u=null,f=0,d=0;t===Lt?s>0&&(u=Lt,f=s,d=l.length):t===_n?c>0&&(u=_n,f=c,d=a.length):(f=Math.max(s,c),u=f>0?s>c?Lt:_n:null,d=u?u===Lt?l.length:a.length:0);const v=u===Lt&&/\b(transform|all)(,|$)/.test(r(`${Lt}Property`).toString());return{type:u,timeout:f,propCount:d,hasTransform:v}}function Al(e,t){for(;e.lengthRl(n)+Rl(e[r])))}function Rl(e){return Number(e.slice(0,-1).replace(",","."))*1e3}function gu(){return document.body.offsetHeight}const _u={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},bu=(e,t)=>n=>{if(!("key"in n))return;const r=Gt(n.key);if(t.some(o=>o===r||_u[o]===r))return e(n)},_r={beforeMount(e,{value:t},{transition:n}){e._vod=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):bn(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:r}){!t!=!n&&(r?t?(r.beforeEnter(e),bn(e,!0),r.enter(e)):r.leave(e,()=>{bn(e,!1)}):bn(e,t))},beforeUnmount(e,{value:t}){bn(e,t)}};function bn(e,t){e.style.display=t?e._vod:"none"}const yu=Re({patchProp:fu},Qc);let Ur,Pl=!1;function Eu(){return Ur=Pl?Ur:Rc(yu),Pl=!0,Ur}const wu=(...e)=>{const t=Eu().createApp(...e),{mount:n}=t;return t.mount=r=>{const o=ku(r);if(o)return n(o,!0,o instanceof SVGElement)},t};function ku(e){return me(e)?document.querySelector(e):e}const xu={"v-18cc131e":()=>q(()=>import("./CHANGELOG.html-fe05d6a3.js"),[]).then(({data:e})=>e),"v-8daa1a0e":()=>q(()=>import("./index.html-97c40830.js"),[]).then(({data:e})=>e),"v-587e1e66":()=>q(()=>import("./api.html-0f91ca6a.js"),[]).then(({data:e})=>e),"v-ab448fd4":()=>q(()=>import("./style.html-17d017a0.js"),[]).then(({data:e})=>e),"v-d009f75c":()=>q(()=>import("./tags.html-c9042894.js"),[]).then(({data:e})=>e),"v-4a2618c8":()=>q(()=>import("./tween.html-9a1751af.js"),[]).then(({data:e})=>e),"v-262adb4a":()=>q(()=>import("./bitmapfont.html-bedb4f99.js"),[]).then(({data:e})=>e),"v-3bb939a7":()=>q(()=>import("./button.html-234102f6.js"),[]).then(({data:e})=>e),"v-34f9d341":()=>q(()=>import("./canvas.html-af48fbc0.js"),[]).then(({data:e})=>e),"v-1dbcc69d":()=>q(()=>import("./element.html-ca33ad4a.js"),[]).then(({data:e})=>e),"v-d82ea0c4":()=>q(()=>import("./image.html-af226794.js"),[]).then(({data:e})=>e),"v-2e5d17c0":()=>q(()=>import("./overview.html-db387343.js"),[]).then(({data:e})=>e),"v-dc0dd396":()=>q(()=>import("./rect.html-f2bbe2a1.js"),[]).then(({data:e})=>e),"v-14a00c9a":()=>q(()=>import("./scrollbar.html-e4368a11.js"),[]).then(({data:e})=>e),"v-5e5b65e7":()=>q(()=>import("./scrollview.html-fd67ea20.js"),[]).then(({data:e})=>e),"v-1164d08c":()=>q(()=>import("./text.html-8bfccc71.js"),[]).then(({data:e})=>e),"v-1d0af3d8":()=>q(()=>import("./view.html-2e48d689.js"),[]).then(({data:e})=>e),"v-7e5b80f8":()=>q(()=>import("./invite.html-aeee0b2c.js"),[]).then(({data:e})=>e),"v-f50a3896":()=>q(()=>import("./rank.html-68a4c1a2.js"),[]).then(({data:e})=>e),"v-3d4ac21a":()=>q(()=>import("./guide.html-32f4aad3.js"),[]).then(({data:e})=>e),"v-79f3f269":()=>q(()=>import("./plugin.html-30cccd24.js"),[]).then(({data:e})=>e),"v-785ab5e0":()=>q(()=>import("./guide.html-4f8a027e.js"),[]).then(({data:e})=>e),"v-4779190d":()=>q(()=>import("./richtext.html-cd0670cf.js"),[]).then(({data:e})=>e),"v-79802700":()=>q(()=>import("./cocos2.x.html-9ad9a920.js"),[]).then(({data:e})=>e),"v-b00cf256":()=>q(()=>import("./loading.html-e77055cb.js"),[]).then(({data:e})=>e),"v-cfeec4e4":()=>q(()=>import("./platform.html-0dcd3617.js"),[]).then(({data:e})=>e),"v-1da74265":()=>q(()=>import("./templateengine.html-17e466fe.js"),[]).then(({data:e})=>e),"v-3706649a":()=>q(()=>import("./404.html-60b35caa.js"),[]).then(({data:e})=>e)},Lu=JSON.parse('{"base":"/minigame-canvas-engine/","lang":"en-US","title":"","description":"轻量级canvas渲染引擎","head":[["meta",{"name":"robots","content":"all"}],["meta",{"name":"author","content":"yuanzm"}],["meta",{"name":"keywords","content":"minigame-canvans-engine, minigame, canvas, engine, game engine"}],["link",{"rel":"shortcut icon","type":"image/x-icon","href":"./imgs/favicon.ico"}],["script",{},"\\n  var sc_project=12873270; \\n  var sc_invisible=1; \\n  var sc_security=\\"efed24b4\\"; \\n  "],["script",{"src":"https://www.statcounter.com/counter/counter.js","async":true}]],"locales":{}}');var Cu=([e,t,n])=>e==="meta"&&t.name?`${e}.${t.name}`:["title","base"].includes(e)?e:e==="template"&&t.id?`${e}.${t.id}`:JSON.stringify([e,t,n]),Tu=e=>{const t=new Set,n=[];return e.forEach(r=>{const o=Cu(r);t.has(o)||(t.add(o),n.push(r))}),n},Kn=e=>/^(https?:)?\/\//.test(e),Su=e=>/^mailto:/.test(e),Au=e=>/^tel:/.test(e),$o=e=>Object.prototype.toString.call(e)==="[object Object]",li=e=>e[e.length-1]==="/"?e.slice(0,-1):e,si=e=>e[0]==="/"?e.slice(1):e,ii=(e,t)=>{const n=Object.keys(e).sort((r,o)=>{const l=o.split("/").length-r.split("/").length;return l!==0?l:o.length-r.length});for(const r of n)if(t.startsWith(r))return r;return"/"};const ai={"v-18cc131e":be(()=>q(()=>import("./CHANGELOG.html-35619e25.js"),[])),"v-8daa1a0e":be(()=>q(()=>import("./index.html-760218d7.js"),[])),"v-587e1e66":be(()=>q(()=>import("./api.html-276938aa.js"),[])),"v-ab448fd4":be(()=>q(()=>import("./style.html-f6565649.js"),[])),"v-d009f75c":be(()=>q(()=>import("./tags.html-5d877979.js"),[])),"v-4a2618c8":be(()=>q(()=>import("./tween.html-acf194c8.js"),[])),"v-262adb4a":be(()=>q(()=>import("./bitmapfont.html-04a28794.js"),[])),"v-3bb939a7":be(()=>q(()=>import("./button.html-53b14087.js"),[])),"v-34f9d341":be(()=>q(()=>import("./canvas.html-825a0551.js"),[])),"v-1dbcc69d":be(()=>q(()=>import("./element.html-0483780a.js"),[])),"v-d82ea0c4":be(()=>q(()=>import("./image.html-070cbf15.js"),[])),"v-2e5d17c0":be(()=>q(()=>import("./overview.html-4ce55a1a.js"),[])),"v-dc0dd396":be(()=>q(()=>import("./rect.html-6d0bfd40.js"),[])),"v-14a00c9a":be(()=>q(()=>import("./scrollbar.html-b4e2e9bd.js"),[])),"v-5e5b65e7":be(()=>q(()=>import("./scrollview.html-79d65deb.js"),[])),"v-1164d08c":be(()=>q(()=>import("./text.html-abe59a52.js"),[])),"v-1d0af3d8":be(()=>q(()=>import("./view.html-f8cfe1c3.js"),[])),"v-7e5b80f8":be(()=>q(()=>import("./invite.html-e6964095.js"),[])),"v-f50a3896":be(()=>q(()=>import("./rank.html-05cfe597.js"),[])),"v-3d4ac21a":be(()=>q(()=>import("./guide.html-3d8ab861.js"),[])),"v-79f3f269":be(()=>q(()=>import("./plugin.html-b20bb174.js"),[])),"v-785ab5e0":be(()=>q(()=>import("./guide.html-5d8a4808.js"),[])),"v-4779190d":be(()=>q(()=>import("./richtext.html-533e0048.js"),[])),"v-79802700":be(()=>q(()=>import("./cocos2.x.html-d11580bb.js"),[])),"v-b00cf256":be(()=>q(()=>import("./loading.html-265b11a1.js"),[])),"v-cfeec4e4":be(()=>q(()=>import("./platform.html-fb530028.js"),[])),"v-1da74265":be(()=>q(()=>import("./templateengine.html-1b239a49.js"),[])),"v-3706649a":be(()=>q(()=>import("./404.html-cafe97ae.js"),[]))};var Ru=Symbol(""),ci=Symbol(""),Pu=Bn({key:"",path:"",title:"",lang:"",frontmatter:{},headers:[]}),qt=()=>{const e=Te(ci);if(!e)throw new Error("pageData() is called without provider.");return e},ui=Symbol(""),vt=()=>{const e=Te(ui);if(!e)throw new Error("usePageFrontmatter() is called without provider.");return e},fi=Symbol(""),Ou=()=>{const e=Te(fi);if(!e)throw new Error("usePageHead() is called without provider.");return e},Iu=Symbol(""),di=Symbol(""),$u=()=>{const e=Te(di);if(!e)throw new Error("usePageLang() is called without provider.");return e},hi=Symbol(""),Nu=()=>{const e=Te(hi);if(!e)throw new Error("usePageLayout() is called without provider.");return e},Mu=ge(xu),No=Symbol(""),Wn=()=>{const e=Te(No);if(!e)throw new Error("useRouteLocale() is called without provider.");return e},tn=ge(Lu),pi=()=>tn,mi=Symbol(""),Mo=()=>{const e=Te(mi);if(!e)throw new Error("useSiteLocaleData() is called without provider.");return e},Du=Symbol(""),Hu="Layout",Fu="NotFound",ht=Fn({resolveLayouts:e=>e.reduce((t,n)=>({...t,...n.layouts}),{}),resolvePageData:async e=>{const t=Mu.value[e];return await(t==null?void 0:t())??Pu},resolvePageFrontmatter:e=>e.frontmatter,resolvePageHead:(e,t,n)=>{const r=me(t.description)?t.description:n.description,o=[...Q(t.head)?t.head:[],...n.head,["title",{},e],["meta",{name:"description",content:r}]];return Tu(o)},resolvePageHeadTitle:(e,t)=>[e.title,t.title].filter(n=>!!n).join(" | "),resolvePageLang:(e,t)=>e.lang||t.lang||"en-US",resolvePageLayout:(e,t)=>{let n;if(e.path){const r=e.frontmatter.layout;me(r)?n=r:n=Hu}else n=Fu;return t[n]},resolveRouteLocale:(e,t)=>ii(e,t),resolveSiteLocaleData:(e,t)=>({...e,...e.locales[t]})}),Do=ue({name:"ClientOnly",setup(e,t){const n=ge(!1);return Je(()=>{n.value=!0}),()=>{var r,o;return n.value?(o=(r=t.slots).default)==null?void 0:o.call(r):null}}}),Bu=ue({name:"Content",props:{pageKey:{type:String,required:!1,default:""}},setup(e){const t=qt(),n=B(()=>ai[e.pageKey||t.value.key]);return()=>n.value?ae(n.value):ae("div","404 Not Found")}}),Nt=(e={})=>e,Ho=e=>Kn(e)?e:`/minigame-canvas-engine/${si(e)}`;function vi(e,t,n){var r,o,l;t===void 0&&(t=50),n===void 0&&(n={});var s=(r=n.isImmediate)!=null&&r,i=(o=n.callback)!=null&&o,a=n.maxWait,c=Date.now(),u=[];function f(){if(a!==void 0){var v=Date.now()-c;if(v+t>=a)return a-v}return t}var d=function(){var v=[].slice.call(arguments),y=this;return new Promise(function(w,C){var g=s&&l===void 0;if(l!==void 0&&clearTimeout(l),l=setTimeout(function(){if(l=void 0,c=Date.now(),!s){var A=e.apply(y,v);i&&i(A),u.forEach(function(S){return(0,S.resolve)(A)}),u=[]}},f()),g){var b=e.apply(y,v);return i&&i(b),w(b)}u.push({resolve:w,reject:C})})};return d.cancel=function(v){l!==void 0&&clearTimeout(l),u.forEach(function(y){return(0,y.reject)(v)}),u=[]},d}/*!
    +const Vi="modulepreload",Ui=function(e){return"/minigame-canvas-engine/"+e},Yo={},q=function(t,n,r){if(!n||n.length===0)return t();const o=document.getElementsByTagName("link");return Promise.all(n.map(l=>{if(l=Ui(l),l in Yo)return;Yo[l]=!0;const s=l.endsWith(".css"),i=s?'[rel="stylesheet"]':"";if(!!r)for(let u=o.length-1;u>=0;u--){const f=o[u];if(f.href===l&&(!s||f.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${l}"]${i}`))return;const c=document.createElement("link");if(c.rel=s?"stylesheet":Vi,s||(c.as="script",c.crossOrigin=""),c.href=l,document.head.appendChild(c),s)return new Promise((u,f)=>{c.addEventListener("load",u),c.addEventListener("error",()=>f(new Error(`Unable to preload CSS for ${l}`)))})})).then(()=>t()).catch(l=>{const s=new Event("vite:preloadError",{cancelable:!0});if(s.payload=l,window.dispatchEvent(s),!s.defaultPrevented)throw l})};function ho(e,t){const n=Object.create(null),r=e.split(",");for(let o=0;o!!n[o.toLowerCase()]:o=>!!n[o]}const ke={},nn=[],ot=()=>{},Ki=()=>!1,Wi=/^on[^a-z]/,Dn=e=>Wi.test(e),po=e=>e.startsWith("onUpdate:"),Re=Object.assign,mo=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},qi=Object.prototype.hasOwnProperty,de=(e,t)=>qi.call(e,t),Q=Array.isArray,rn=e=>Er(e)==="[object Map]",cs=e=>Er(e)==="[object Set]",le=e=>typeof e=="function",me=e=>typeof e=="string",vo=e=>typeof e=="symbol",xe=e=>e!==null&&typeof e=="object",us=e=>xe(e)&&le(e.then)&&le(e.catch),fs=Object.prototype.toString,Er=e=>fs.call(e),Gi=e=>Er(e).slice(8,-1),ds=e=>Er(e)==="[object Object]",go=e=>me(e)&&e!=="NaN"&&e[0]!=="-"&&""+parseInt(e,10)===e,xn=ho(",key,ref,ref_for,ref_key,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),wr=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},Yi=/-(\w)/g,ft=wr(e=>e.replace(Yi,(t,n)=>n?n.toUpperCase():"")),Ji=/\B([A-Z])/g,Gt=wr(e=>e.replace(Ji,"-$1").toLowerCase()),kr=wr(e=>e.charAt(0).toUpperCase()+e.slice(1)),Nr=wr(e=>e?`on${kr(e)}`:""),Rn=(e,t)=>!Object.is(e,t),Mr=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},Qi=e=>{const t=parseFloat(e);return isNaN(t)?e:t},Zi=e=>{const t=me(e)?Number(e):NaN;return isNaN(t)?e:t};let Jo;const Jr=()=>Jo||(Jo=typeof globalThis<"u"?globalThis:typeof self<"u"?self:typeof window<"u"?window:typeof global<"u"?global:{});function Hn(e){if(Q(e)){const t={};for(let n=0;n{if(n){const r=n.split(ea);r.length>1&&(t[r[0].trim()]=r[1].trim())}}),t}function Ke(e){let t="";if(me(e))t=e;else if(Q(e))for(let n=0;nme(e)?e:e==null?"":Q(e)||xe(e)&&(e.toString===fs||!le(e.toString))?JSON.stringify(e,ps,2):String(e),ps=(e,t)=>t&&t.__v_isRef?ps(e,t.value):rn(t)?{[`Map(${t.size})`]:[...t.entries()].reduce((n,[r,o])=>(n[`${r} =>`]=o,n),{})}:cs(t)?{[`Set(${t.size})`]:[...t.values()]}:xe(t)&&!Q(t)&&!ds(t)?String(t):t;let Ge;class la{constructor(t=!1){this.detached=t,this._active=!0,this.effects=[],this.cleanups=[],this.parent=Ge,!t&&Ge&&(this.index=(Ge.scopes||(Ge.scopes=[])).push(this)-1)}get active(){return this._active}run(t){if(this._active){const n=Ge;try{return Ge=this,t()}finally{Ge=n}}}on(){Ge=this}off(){Ge=this.parent}stop(t){if(this._active){let n,r;for(n=0,r=this.effects.length;n{const t=new Set(e);return t.w=0,t.n=0,t},vs=e=>(e.w&Pt)>0,gs=e=>(e.n&Pt)>0,aa=({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let r=0;r{(u==="length"||u>=a)&&i.push(c)})}else switch(n!==void 0&&i.push(s.get(n)),t){case"add":Q(e)?go(n)&&i.push(s.get("length")):(i.push(s.get(Ut)),rn(e)&&i.push(s.get(Zr)));break;case"delete":Q(e)||(i.push(s.get(Ut)),rn(e)&&i.push(s.get(Zr)));break;case"set":rn(e)&&i.push(s.get(Ut));break}if(i.length===1)i[0]&&Xr(i[0]);else{const a=[];for(const c of i)c&&a.push(...c);Xr(_o(a))}}function Xr(e,t){const n=Q(e)?e:[...e];for(const r of n)r.computed&&Zo(r);for(const r of n)r.computed||Zo(r)}function Zo(e,t){(e!==nt||e.allowRecurse)&&(e.scheduler?e.scheduler():e.run())}function ua(e,t){var n;return(n=cr.get(e))==null?void 0:n.get(t)}const fa=ho("__proto__,__v_isRef,__isVue"),ys=new Set(Object.getOwnPropertyNames(Symbol).filter(e=>e!=="arguments"&&e!=="caller").map(e=>Symbol[e]).filter(vo)),da=yo(),ha=yo(!1,!0),pa=yo(!0),Xo=ma();function ma(){const e={};return["includes","indexOf","lastIndexOf"].forEach(t=>{e[t]=function(...n){const r=pe(this);for(let l=0,s=this.length;l{e[t]=function(...n){mn();const r=pe(this)[t].apply(this,n);return vn(),r}}),e}function va(e){const t=pe(this);return We(t,"has",e),t.hasOwnProperty(e)}function yo(e=!1,t=!1){return function(r,o,l){if(o==="__v_isReactive")return!e;if(o==="__v_isReadonly")return e;if(o==="__v_isShallow")return t;if(o==="__v_raw"&&l===(e?t?Oa:Ls:t?xs:ks).get(r))return r;const s=Q(r);if(!e){if(s&&de(Xo,o))return Reflect.get(Xo,o,l);if(o==="hasOwnProperty")return va}const i=Reflect.get(r,o,l);return(vo(o)?ys.has(o):fa(o))||(e||We(r,"get",o),t)?i:$e(i)?s&&go(o)?i:i.value:xe(i)?e?Bn(i):Fn(i):i}}const ga=Es(),_a=Es(!0);function Es(e=!1){return function(n,r,o,l){let s=n[r];if(an(s)&&$e(s)&&!$e(o))return!1;if(!e&&(!ur(o)&&!an(o)&&(s=pe(s),o=pe(o)),!Q(n)&&$e(s)&&!$e(o)))return s.value=o,!0;const i=Q(n)&&go(r)?Number(r)e,xr=e=>Reflect.getPrototypeOf(e);function qn(e,t,n=!1,r=!1){e=e.__v_raw;const o=pe(e),l=pe(t);n||(t!==l&&We(o,"get",t),We(o,"get",l));const{has:s}=xr(o),i=r?Eo:n?xo:Pn;if(s.call(o,t))return i(e.get(t));if(s.call(o,l))return i(e.get(l));e!==o&&e.get(t)}function Gn(e,t=!1){const n=this.__v_raw,r=pe(n),o=pe(e);return t||(e!==o&&We(r,"has",e),We(r,"has",o)),e===o?n.has(e):n.has(e)||n.has(o)}function Yn(e,t=!1){return e=e.__v_raw,!t&&We(pe(e),"iterate",Ut),Reflect.get(e,"size",e)}function el(e){e=pe(e);const t=pe(this);return xr(t).has.call(t,e)||(t.add(e),_t(t,"add",e,e)),this}function tl(e,t){t=pe(t);const n=pe(this),{has:r,get:o}=xr(n);let l=r.call(n,e);l||(e=pe(e),l=r.call(n,e));const s=o.call(n,e);return n.set(e,t),l?Rn(t,s)&&_t(n,"set",e,t):_t(n,"add",e,t),this}function nl(e){const t=pe(this),{has:n,get:r}=xr(t);let o=n.call(t,e);o||(e=pe(e),o=n.call(t,e)),r&&r.call(t,e);const l=t.delete(e);return o&&_t(t,"delete",e,void 0),l}function rl(){const e=pe(this),t=e.size!==0,n=e.clear();return t&&_t(e,"clear",void 0,void 0),n}function Jn(e,t){return function(r,o){const l=this,s=l.__v_raw,i=pe(s),a=t?Eo:e?xo:Pn;return!e&&We(i,"iterate",Ut),s.forEach((c,u)=>r.call(o,a(c),a(u),l))}}function Qn(e,t,n){return function(...r){const o=this.__v_raw,l=pe(o),s=rn(l),i=e==="entries"||e===Symbol.iterator&&s,a=e==="keys"&&s,c=o[e](...r),u=n?Eo:t?xo:Pn;return!t&&We(l,"iterate",a?Zr:Ut),{next(){const{value:f,done:d}=c.next();return d?{value:f,done:d}:{value:i?[u(f[0]),u(f[1])]:u(f),done:d}},[Symbol.iterator](){return this}}}}function kt(e){return function(...t){return e==="delete"?!1:this}}function xa(){const e={get(l){return qn(this,l)},get size(){return Yn(this)},has:Gn,add:el,set:tl,delete:nl,clear:rl,forEach:Jn(!1,!1)},t={get(l){return qn(this,l,!1,!0)},get size(){return Yn(this)},has:Gn,add:el,set:tl,delete:nl,clear:rl,forEach:Jn(!1,!0)},n={get(l){return qn(this,l,!0)},get size(){return Yn(this,!0)},has(l){return Gn.call(this,l,!0)},add:kt("add"),set:kt("set"),delete:kt("delete"),clear:kt("clear"),forEach:Jn(!0,!1)},r={get(l){return qn(this,l,!0,!0)},get size(){return Yn(this,!0)},has(l){return Gn.call(this,l,!0)},add:kt("add"),set:kt("set"),delete:kt("delete"),clear:kt("clear"),forEach:Jn(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach(l=>{e[l]=Qn(l,!1,!1),n[l]=Qn(l,!0,!1),t[l]=Qn(l,!1,!0),r[l]=Qn(l,!0,!0)}),[e,n,t,r]}const[La,Ca,Ta,Sa]=xa();function wo(e,t){const n=t?e?Sa:Ta:e?Ca:La;return(r,o,l)=>o==="__v_isReactive"?!e:o==="__v_isReadonly"?e:o==="__v_raw"?r:Reflect.get(de(n,o)&&o in r?n:r,o,l)}const Aa={get:wo(!1,!1)},Ra={get:wo(!1,!0)},Pa={get:wo(!0,!1)},ks=new WeakMap,xs=new WeakMap,Ls=new WeakMap,Oa=new WeakMap;function Ia(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}function $a(e){return e.__v_skip||!Object.isExtensible(e)?0:Ia(Gi(e))}function Fn(e){return an(e)?e:ko(e,!1,ws,Aa,ks)}function Cs(e){return ko(e,!1,ka,Ra,xs)}function Bn(e){return ko(e,!0,wa,Pa,Ls)}function ko(e,t,n,r,o){if(!xe(e)||e.__v_raw&&!(t&&e.__v_isReactive))return e;const l=o.get(e);if(l)return l;const s=$a(e);if(s===0)return e;const i=new Proxy(e,s===2?r:n);return o.set(e,i),i}function on(e){return an(e)?on(e.__v_raw):!!(e&&e.__v_isReactive)}function an(e){return!!(e&&e.__v_isReadonly)}function ur(e){return!!(e&&e.__v_isShallow)}function Ts(e){return on(e)||an(e)}function pe(e){const t=e&&e.__v_raw;return t?pe(t):e}function Ss(e){return ar(e,"__v_skip",!0),e}const Pn=e=>xe(e)?Fn(e):e,xo=e=>xe(e)?Bn(e):e;function Lo(e){At&&nt&&(e=pe(e),bs(e.dep||(e.dep=_o())))}function Co(e,t){e=pe(e);const n=e.dep;n&&Xr(n)}function $e(e){return!!(e&&e.__v_isRef===!0)}function ge(e){return As(e,!1)}function To(e){return As(e,!0)}function As(e,t){return $e(e)?e:new Na(e,t)}class Na{constructor(t,n){this.__v_isShallow=n,this.dep=void 0,this.__v_isRef=!0,this._rawValue=n?t:pe(t),this._value=n?t:Pn(t)}get value(){return Lo(this),this._value}set value(t){const n=this.__v_isShallow||ur(t)||an(t);t=n?t:pe(t),Rn(t,this._rawValue)&&(this._rawValue=t,this._value=n?t:Pn(t),Co(this))}}function ee(e){return $e(e)?e.value:e}const Ma={get:(e,t,n)=>ee(Reflect.get(e,t,n)),set:(e,t,n,r)=>{const o=e[t];return $e(o)&&!$e(n)?(o.value=n,!0):Reflect.set(e,t,n,r)}};function Rs(e){return on(e)?e:new Proxy(e,Ma)}class Da{constructor(t){this.dep=void 0,this.__v_isRef=!0;const{get:n,set:r}=t(()=>Lo(this),()=>Co(this));this._get=n,this._set=r}get value(){return this._get()}set value(t){this._set(t)}}function Ha(e){return new Da(e)}function Lr(e){const t=Q(e)?new Array(e.length):{};for(const n in e)t[n]=Ba(e,n);return t}class Fa{constructor(t,n,r){this._object=t,this._key=n,this._defaultValue=r,this.__v_isRef=!0}get value(){const t=this._object[this._key];return t===void 0?this._defaultValue:t}set value(t){this._object[this._key]=t}get dep(){return ua(pe(this._object),this._key)}}function Ba(e,t,n){const r=e[t];return $e(r)?r:new Fa(e,t,n)}class za{constructor(t,n,r,o){this._setter=n,this.dep=void 0,this.__v_isRef=!0,this.__v_isReadonly=!1,this._dirty=!0,this.effect=new bo(t,()=>{this._dirty||(this._dirty=!0,Co(this))}),this.effect.computed=this,this.effect.active=this._cacheable=!o,this.__v_isReadonly=r}get value(){const t=pe(this);return Lo(t),(t._dirty||!t._cacheable)&&(t._dirty=!1,t._value=t.effect.run()),t._value}set value(t){this._setter(t)}}function ja(e,t,n=!1){let r,o;const l=le(e);return l?(r=e,o=ot):(r=e.get,o=e.set),new za(r,o,l||!o,n)}function Rt(e,t,n,r){let o;try{o=r?e(...r):e()}catch(l){zn(l,t,n)}return o}function Xe(e,t,n,r){if(le(e)){const l=Rt(e,t,n,r);return l&&us(l)&&l.catch(s=>{zn(s,t,n)}),l}const o=[];for(let l=0;l>>1;In(Be[r])ut&&Be.splice(t,1)}function Wa(e){Q(e)?ln.push(...e):(!mt||!mt.includes(e,e.allowRecurse?Bt+1:Bt))&&ln.push(e),Os()}function ol(e,t=On?ut+1:0){for(;tIn(n)-In(r)),Bt=0;Bte.id==null?1/0:e.id,qa=(e,t)=>{const n=In(e)-In(t);if(n===0){if(e.pre&&!t.pre)return-1;if(t.pre&&!e.pre)return 1}return n};function Is(e){eo=!1,On=!0,Be.sort(qa);const t=ot;try{for(ut=0;utme(v)?v.trim():v)),f&&(o=n.map(Qi))}let i,a=r[i=Nr(t)]||r[i=Nr(ft(t))];!a&&l&&(a=r[i=Nr(Gt(t))]),a&&Xe(a,e,6,o);const c=r[i+"Once"];if(c){if(!e.emitted)e.emitted={};else if(e.emitted[i])return;e.emitted[i]=!0,Xe(c,e,6,o)}}function $s(e,t,n=!1){const r=t.emitsCache,o=r.get(e);if(o!==void 0)return o;const l=e.emits;let s={},i=!1;if(!le(e)){const a=c=>{const u=$s(c,t,!0);u&&(i=!0,Re(s,u))};!n&&t.mixins.length&&t.mixins.forEach(a),e.extends&&a(e.extends),e.mixins&&e.mixins.forEach(a)}return!l&&!i?(xe(e)&&r.set(e,null),null):(Q(l)?l.forEach(a=>s[a]=null):Re(s,l),xe(e)&&r.set(e,s),s)}function Sr(e,t){return!e||!Dn(t)?!1:(t=t.slice(2).replace(/Once$/,""),de(e,t[0].toLowerCase()+t.slice(1))||de(e,Gt(t))||de(e,t))}let De=null,Ns=null;function dr(e){const t=De;return De=e,Ns=e&&e.type.__scopeId||null,t}function Me(e,t=De,n){if(!t||e._n)return e;const r=(...o)=>{r._d&&vl(-1);const l=dr(t);let s;try{s=e(...o)}finally{dr(l),r._d&&vl(1)}return s};return r._n=!0,r._c=!0,r._d=!0,r}function Dr(e){const{type:t,vnode:n,proxy:r,withProxy:o,props:l,propsOptions:[s],slots:i,attrs:a,emit:c,render:u,renderCache:f,data:d,setupState:v,ctx:y,inheritAttrs:w}=e;let C,g;const b=dr(e);try{if(n.shapeFlag&4){const S=o||r;C=tt(u.call(S,S,f,l,v,d,y)),g=a}else{const S=t;C=tt(S.length>1?S(l,{attrs:a,slots:i,emit:c}):S(l,null)),g=t.props?a:Ya(a)}}catch(S){Tn.length=0,zn(S,e,1),C=te(Ye)}let A=C;if(g&&w!==!1){const S=Object.keys(g),{shapeFlag:U}=A;S.length&&U&7&&(s&&S.some(po)&&(g=Ja(g,s)),A=It(A,g))}return n.dirs&&(A=It(A),A.dirs=A.dirs?A.dirs.concat(n.dirs):n.dirs),n.transition&&(A.transition=n.transition),C=A,dr(b),C}const Ya=e=>{let t;for(const n in e)(n==="class"||n==="style"||Dn(n))&&((t||(t={}))[n]=e[n]);return t},Ja=(e,t)=>{const n={};for(const r in e)(!po(r)||!(r.slice(9)in t))&&(n[r]=e[r]);return n};function Qa(e,t,n){const{props:r,children:o,component:l}=e,{props:s,children:i,patchFlag:a}=t,c=l.emitsOptions;if(t.dirs||t.transition)return!0;if(n&&a>=0){if(a&1024)return!0;if(a&16)return r?ll(r,s,c):!!s;if(a&8){const u=t.dynamicProps;for(let f=0;fe.__isSuspense;function Ms(e,t){t&&t.pendingBranch?Q(e)?t.effects.push(...e):t.effects.push(e):Wa(e)}function Ds(e,t){return Ao(e,null,t)}const Zn={};function lt(e,t,n){return Ao(e,t,n)}function Ao(e,t,{immediate:n,deep:r,flush:o,onTrack:l,onTrigger:s}=ke){var i;const a=ms()===((i=Pe)==null?void 0:i.scope)?Pe:null;let c,u=!1,f=!1;if($e(e)?(c=()=>e.value,u=ur(e)):on(e)?(c=()=>e,r=!0):Q(e)?(f=!0,u=e.some(S=>on(S)||ur(S)),c=()=>e.map(S=>{if($e(S))return S.value;if(on(S))return Vt(S);if(le(S))return Rt(S,a,2)})):le(e)?t?c=()=>Rt(e,a,2):c=()=>{if(!(a&&a.isUnmounted))return d&&d(),Xe(e,a,3,[v])}:c=ot,t&&r){const S=c;c=()=>Vt(S())}let d,v=S=>{d=b.onStop=()=>{Rt(S,a,4)}},y;if(fn)if(v=ot,t?n&&Xe(t,a,3,[c(),f?[]:void 0,v]):c(),o==="sync"){const S=Gc();y=S.__watcherHandles||(S.__watcherHandles=[])}else return ot;let w=f?new Array(e.length).fill(Zn):Zn;const C=()=>{if(b.active)if(t){const S=b.run();(r||u||(f?S.some((U,Z)=>Rn(U,w[Z])):Rn(S,w)))&&(d&&d(),Xe(t,a,3,[S,w===Zn?void 0:f&&w[0]===Zn?[]:w,v]),w=S)}else b.run()};C.allowRecurse=!!t;let g;o==="sync"?g=C:o==="post"?g=()=>Ue(C,a&&a.suspense):(C.pre=!0,a&&(C.id=a.uid),g=()=>Tr(C));const b=new bo(c,g);t?n?C():w=b.run():o==="post"?Ue(b.run.bind(b),a&&a.suspense):b.run();const A=()=>{b.stop(),a&&a.scope&&mo(a.scope.effects,b)};return y&&y.push(A),A}function ec(e,t,n){const r=this.proxy,o=me(e)?e.includes(".")?Hs(r,e):()=>r[e]:e.bind(r,r);let l;le(t)?l=t:(l=t.handler,n=t);const s=Pe;un(this);const i=Ao(o,l.bind(r),n);return s?un(s):Wt(),i}function Hs(e,t){const n=t.split(".");return()=>{let r=e;for(let o=0;o{Vt(n,t)});else if(ds(e))for(const n in e)Vt(e[n],t);return e}function hr(e,t){const n=De;if(n===null)return e;const r=Or(n)||n.proxy,o=e.dirs||(e.dirs=[]);for(let l=0;l{e.isMounted=!0}),Vn(()=>{e.isUnmounting=!0}),e}const Qe=[Function,Array],Fs={mode:String,appear:Boolean,persisted:Boolean,onBeforeEnter:Qe,onEnter:Qe,onAfterEnter:Qe,onEnterCancelled:Qe,onBeforeLeave:Qe,onLeave:Qe,onAfterLeave:Qe,onLeaveCancelled:Qe,onBeforeAppear:Qe,onAppear:Qe,onAfterAppear:Qe,onAppearCancelled:Qe},nc={name:"BaseTransition",props:Fs,setup(e,{slots:t}){const n=ti(),r=tc();let o;return()=>{const l=t.default&&zs(t.default(),!0);if(!l||!l.length)return;let s=l[0];if(l.length>1){for(const w of l)if(w.type!==Ye){s=w;break}}const i=pe(e),{mode:a}=i;if(r.isLeaving)return Hr(s);const c=sl(s);if(!c)return Hr(s);const u=to(c,i,r,n);no(c,u);const f=n.subTree,d=f&&sl(f);let v=!1;const{getTransitionKey:y}=c.type;if(y){const w=y();o===void 0?o=w:w!==o&&(o=w,v=!0)}if(d&&d.type!==Ye&&(!zt(c,d)||v)){const w=to(d,i,r,n);if(no(d,w),a==="out-in")return r.isLeaving=!0,w.afterLeave=()=>{r.isLeaving=!1,n.update.active!==!1&&n.update()},Hr(s);a==="in-out"&&c.type!==Ye&&(w.delayLeave=(C,g,b)=>{const A=Bs(r,d);A[String(d.key)]=d,C._leaveCb=()=>{g(),C._leaveCb=void 0,delete u.delayedLeave},u.delayedLeave=b})}return s}}},rc=nc;function Bs(e,t){const{leavingVNodes:n}=e;let r=n.get(t.type);return r||(r=Object.create(null),n.set(t.type,r)),r}function to(e,t,n,r){const{appear:o,mode:l,persisted:s=!1,onBeforeEnter:i,onEnter:a,onAfterEnter:c,onEnterCancelled:u,onBeforeLeave:f,onLeave:d,onAfterLeave:v,onLeaveCancelled:y,onBeforeAppear:w,onAppear:C,onAfterAppear:g,onAppearCancelled:b}=t,A=String(e.key),S=Bs(n,e),U=(m,j)=>{m&&Xe(m,r,9,j)},Z=(m,j)=>{const D=j[1];U(m,j),Q(m)?m.every(G=>G.length<=1)&&D():m.length<=1&&D()},$={mode:l,persisted:s,beforeEnter(m){let j=i;if(!n.isMounted)if(o)j=w||i;else return;m._leaveCb&&m._leaveCb(!0);const D=S[A];D&&zt(e,D)&&D.el._leaveCb&&D.el._leaveCb(),U(j,[m])},enter(m){let j=a,D=c,G=u;if(!n.isMounted)if(o)j=C||a,D=g||c,G=b||u;else return;let L=!1;const O=m._enterCb=I=>{L||(L=!0,I?U(G,[m]):U(D,[m]),$.delayedLeave&&$.delayedLeave(),m._enterCb=void 0)};j?Z(j,[m,O]):O()},leave(m,j){const D=String(e.key);if(m._enterCb&&m._enterCb(!0),n.isUnmounting)return j();U(f,[m]);let G=!1;const L=m._leaveCb=O=>{G||(G=!0,j(),O?U(y,[m]):U(v,[m]),m._leaveCb=void 0,S[D]===e&&delete S[D])};S[D]=e,d?Z(d,[m,L]):L()},clone(m){return to(m,t,n,r)}};return $}function Hr(e){if(jn(e))return e=It(e),e.children=null,e}function sl(e){return jn(e)?e.children?e.children[0]:void 0:e}function no(e,t){e.shapeFlag&6&&e.component?no(e.component.subTree,t):e.shapeFlag&128?(e.ssContent.transition=t.clone(e.ssContent),e.ssFallback.transition=t.clone(e.ssFallback)):e.transition=t}function zs(e,t=!1,n){let r=[],o=0;for(let l=0;l1)for(let l=0;lRe({name:e.name},t,{setup:e}))():e}const sn=e=>!!e.type.__asyncLoader;function be(e){le(e)&&(e={loader:e});const{loader:t,loadingComponent:n,errorComponent:r,delay:o=200,timeout:l,suspensible:s=!0,onError:i}=e;let a=null,c,u=0;const f=()=>(u++,a=null,d()),d=()=>{let v;return a||(v=a=t().catch(y=>{if(y=y instanceof Error?y:new Error(String(y)),i)return new Promise((w,C)=>{i(y,()=>w(f()),()=>C(y),u+1)});throw y}).then(y=>v!==a&&a?a:(y&&(y.__esModule||y[Symbol.toStringTag]==="Module")&&(y=y.default),c=y,y)))};return ue({name:"AsyncComponentWrapper",__asyncLoader:d,get __asyncResolved(){return c},setup(){const v=Pe;if(c)return()=>Fr(c,v);const y=b=>{a=null,zn(b,v,13,!r)};if(s&&v.suspense||fn)return d().then(b=>()=>Fr(b,v)).catch(b=>(y(b),()=>r?te(r,{error:b}):null));const w=ge(!1),C=ge(),g=ge(!!o);return o&&setTimeout(()=>{g.value=!1},o),l!=null&&setTimeout(()=>{if(!w.value&&!C.value){const b=new Error(`Async component timed out after ${l}ms.`);y(b),C.value=b}},l),d().then(()=>{w.value=!0,v.parent&&jn(v.parent.vnode)&&Tr(v.parent.update)}).catch(b=>{y(b),C.value=b}),()=>{if(w.value&&c)return Fr(c,v);if(C.value&&r)return te(r,{error:C.value});if(n&&!g.value)return te(n)}}})}function Fr(e,t){const{ref:n,props:r,children:o,ce:l}=t.vnode,s=te(e,r,o);return s.ref=n,s.ce=l,delete t.vnode.ce,s}const jn=e=>e.type.__isKeepAlive;function oc(e,t){js(e,"a",t)}function lc(e,t){js(e,"da",t)}function js(e,t,n=Pe){const r=e.__wdc||(e.__wdc=()=>{let o=n;for(;o;){if(o.isDeactivated)return;o=o.parent}return e()});if(Ar(t,r,n),n){let o=n.parent;for(;o&&o.parent;)jn(o.parent.vnode)&&sc(r,t,n,o),o=o.parent}}function sc(e,t,n,r){const o=Ar(t,e,r,!0);Rr(()=>{mo(r[t],o)},n)}function Ar(e,t,n=Pe,r=!1){if(n){const o=n[e]||(n[e]=[]),l=t.__weh||(t.__weh=(...s)=>{if(n.isUnmounted)return;mn(),un(n);const i=Xe(t,n,e,s);return Wt(),vn(),i});return r?o.unshift(l):o.push(l),l}}const yt=e=>(t,n=Pe)=>(!fn||e==="sp")&&Ar(e,(...r)=>t(...r),n),ic=yt("bm"),Je=yt("m"),ac=yt("bu"),cc=yt("u"),Vn=yt("bum"),Rr=yt("um"),uc=yt("sp"),fc=yt("rtg"),dc=yt("rtc");function hc(e,t=Pe){Ar("ec",e,t)}const Vs="components";function bt(e,t){return mc(Vs,e,!0,t)||e}const pc=Symbol.for("v-ndc");function mc(e,t,n=!0,r=!1){const o=De||Pe;if(o){const l=o.type;if(e===Vs){const i=Kc(l,!1);if(i&&(i===t||i===ft(t)||i===kr(ft(t))))return l}const s=il(o[e]||l[e],t)||il(o.appContext[e],t);return!s&&r?l:s}}function il(e,t){return e&&(e[t]||e[ft(t)]||e[kr(ft(t))])}function Ot(e,t,n,r){let o;const l=n&&n[r];if(Q(e)||me(e)){o=new Array(e.length);for(let s=0,i=e.length;st(s,i,void 0,l&&l[i]));else{const s=Object.keys(e);o=new Array(s.length);for(let i=0,a=s.length;igr(t)?!(t.type===Ye||t.type===we&&!Us(t.children)):!0)?e:null}const ro=e=>e?ni(e)?Or(e)||e.proxy:ro(e.parent):null,Ln=Re(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>ro(e.parent),$root:e=>ro(e.root),$emit:e=>e.emit,$options:e=>Ro(e),$forceUpdate:e=>e.f||(e.f=()=>Tr(e.update)),$nextTick:e=>e.n||(e.n=Cr.bind(e.proxy)),$watch:e=>ec.bind(e)}),Br=(e,t)=>e!==ke&&!e.__isScriptSetup&&de(e,t),vc={get({_:e},t){const{ctx:n,setupState:r,data:o,props:l,accessCache:s,type:i,appContext:a}=e;let c;if(t[0]!=="$"){const v=s[t];if(v!==void 0)switch(v){case 1:return r[t];case 2:return o[t];case 4:return n[t];case 3:return l[t]}else{if(Br(r,t))return s[t]=1,r[t];if(o!==ke&&de(o,t))return s[t]=2,o[t];if((c=e.propsOptions[0])&&de(c,t))return s[t]=3,l[t];if(n!==ke&&de(n,t))return s[t]=4,n[t];oo&&(s[t]=0)}}const u=Ln[t];let f,d;if(u)return t==="$attrs"&&We(e,"get",t),u(e);if((f=i.__cssModules)&&(f=f[t]))return f;if(n!==ke&&de(n,t))return s[t]=4,n[t];if(d=a.config.globalProperties,de(d,t))return d[t]},set({_:e},t,n){const{data:r,setupState:o,ctx:l}=e;return Br(o,t)?(o[t]=n,!0):r!==ke&&de(r,t)?(r[t]=n,!0):de(e.props,t)||t[0]==="$"&&t.slice(1)in e?!1:(l[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:r,appContext:o,propsOptions:l}},s){let i;return!!n[s]||e!==ke&&de(e,s)||Br(t,s)||(i=l[0])&&de(i,s)||de(r,s)||de(Ln,s)||de(o.config.globalProperties,s)},defineProperty(e,t,n){return n.get!=null?e._.accessCache[t]=0:de(n,"value")&&this.set(e,t,n.value,null),Reflect.defineProperty(e,t,n)}};function al(e){return Q(e)?e.reduce((t,n)=>(t[n]=null,t),{}):e}let oo=!0;function gc(e){const t=Ro(e),n=e.proxy,r=e.ctx;oo=!1,t.beforeCreate&&cl(t.beforeCreate,e,"bc");const{data:o,computed:l,methods:s,watch:i,provide:a,inject:c,created:u,beforeMount:f,mounted:d,beforeUpdate:v,updated:y,activated:w,deactivated:C,beforeDestroy:g,beforeUnmount:b,destroyed:A,unmounted:S,render:U,renderTracked:Z,renderTriggered:$,errorCaptured:m,serverPrefetch:j,expose:D,inheritAttrs:G,components:L,directives:O,filters:I}=t;if(c&&_c(c,r,null),s)for(const re in s){const oe=s[re];le(oe)&&(r[re]=oe.bind(n))}if(o){const re=o.call(n,n);xe(re)&&(e.data=Fn(re))}if(oo=!0,l)for(const re in l){const oe=l[re],He=le(oe)?oe.bind(n,n):le(oe.get)?oe.get.bind(n,n):ot,Ne=!le(oe)&&le(oe.set)?oe.set.bind(n):ot,Ve=B({get:He,set:Ne});Object.defineProperty(r,re,{enumerable:!0,configurable:!0,get:()=>Ve.value,set:Fe=>Ve.value=Fe})}if(i)for(const re in i)Ks(i[re],r,n,re);if(a){const re=le(a)?a.call(n):a;Reflect.ownKeys(re).forEach(oe=>{Kt(oe,re[oe])})}u&&cl(u,e,"c");function V(re,oe){Q(oe)?oe.forEach(He=>re(He.bind(n))):oe&&re(oe.bind(n))}if(V(ic,f),V(Je,d),V(ac,v),V(cc,y),V(oc,w),V(lc,C),V(hc,m),V(dc,Z),V(fc,$),V(Vn,b),V(Rr,S),V(uc,j),Q(D))if(D.length){const re=e.exposed||(e.exposed={});D.forEach(oe=>{Object.defineProperty(re,oe,{get:()=>n[oe],set:He=>n[oe]=He})})}else e.exposed||(e.exposed={});U&&e.render===ot&&(e.render=U),G!=null&&(e.inheritAttrs=G),L&&(e.components=L),O&&(e.directives=O)}function _c(e,t,n=ot){Q(e)&&(e=lo(e));for(const r in e){const o=e[r];let l;xe(o)?"default"in o?l=Te(o.from||r,o.default,!0):l=Te(o.from||r):l=Te(o),$e(l)?Object.defineProperty(t,r,{enumerable:!0,configurable:!0,get:()=>l.value,set:s=>l.value=s}):t[r]=l}}function cl(e,t,n){Xe(Q(e)?e.map(r=>r.bind(t.proxy)):e.bind(t.proxy),t,n)}function Ks(e,t,n,r){const o=r.includes(".")?Hs(n,r):()=>n[r];if(me(e)){const l=t[e];le(l)&<(o,l)}else if(le(e))lt(o,e.bind(n));else if(xe(e))if(Q(e))e.forEach(l=>Ks(l,t,n,r));else{const l=le(e.handler)?e.handler.bind(n):t[e.handler];le(l)&<(o,l,e)}}function Ro(e){const t=e.type,{mixins:n,extends:r}=t,{mixins:o,optionsCache:l,config:{optionMergeStrategies:s}}=e.appContext,i=l.get(t);let a;return i?a=i:!o.length&&!n&&!r?a=t:(a={},o.length&&o.forEach(c=>pr(a,c,s,!0)),pr(a,t,s)),xe(t)&&l.set(t,a),a}function pr(e,t,n,r=!1){const{mixins:o,extends:l}=t;l&&pr(e,l,n,!0),o&&o.forEach(s=>pr(e,s,n,!0));for(const s in t)if(!(r&&s==="expose")){const i=bc[s]||n&&n[s];e[s]=i?i(e[s],t[s]):t[s]}return e}const bc={data:ul,props:fl,emits:fl,methods:kn,computed:kn,beforeCreate:ze,created:ze,beforeMount:ze,mounted:ze,beforeUpdate:ze,updated:ze,beforeDestroy:ze,beforeUnmount:ze,destroyed:ze,unmounted:ze,activated:ze,deactivated:ze,errorCaptured:ze,serverPrefetch:ze,components:kn,directives:kn,watch:Ec,provide:ul,inject:yc};function ul(e,t){return t?e?function(){return Re(le(e)?e.call(this,this):e,le(t)?t.call(this,this):t)}:t:e}function yc(e,t){return kn(lo(e),lo(t))}function lo(e){if(Q(e)){const t={};for(let n=0;n1)return n&&le(t)?t.call(r&&r.proxy):t}}function xc(e,t,n,r=!1){const o={},l={};ar(l,Pr,1),e.propsDefaults=Object.create(null),qs(e,t,o,l);for(const s in e.propsOptions[0])s in o||(o[s]=void 0);n?e.props=r?o:Cs(o):e.type.props?e.props=o:e.props=l,e.attrs=l}function Lc(e,t,n,r){const{props:o,attrs:l,vnode:{patchFlag:s}}=e,i=pe(o),[a]=e.propsOptions;let c=!1;if((r||s>0)&&!(s&16)){if(s&8){const u=e.vnode.dynamicProps;for(let f=0;f{a=!0;const[d,v]=Gs(f,t,!0);Re(s,d),v&&i.push(...v)};!n&&t.mixins.length&&t.mixins.forEach(u),e.extends&&u(e.extends),e.mixins&&e.mixins.forEach(u)}if(!l&&!a)return xe(e)&&r.set(e,nn),nn;if(Q(l))for(let u=0;u-1,v[1]=w<0||y-1||de(v,"default"))&&i.push(f)}}}const c=[s,i];return xe(e)&&r.set(e,c),c}function dl(e){return e[0]!=="$"}function hl(e){const t=e&&e.toString().match(/^\s*(function|class) (\w+)/);return t?t[2]:e===null?"null":""}function pl(e,t){return hl(e)===hl(t)}function ml(e,t){return Q(t)?t.findIndex(n=>pl(n,e)):le(t)&&pl(t,e)?0:-1}const Ys=e=>e[0]==="_"||e==="$stable",Po=e=>Q(e)?e.map(tt):[tt(e)],Cc=(e,t,n)=>{if(t._n)return t;const r=Me((...o)=>Po(t(...o)),n);return r._c=!1,r},Js=(e,t,n)=>{const r=e._ctx;for(const o in e){if(Ys(o))continue;const l=e[o];if(le(l))t[o]=Cc(o,l,r);else if(l!=null){const s=Po(l);t[o]=()=>s}}},Qs=(e,t)=>{const n=Po(t);e.slots.default=()=>n},Tc=(e,t)=>{if(e.vnode.shapeFlag&32){const n=t._;n?(e.slots=pe(t),ar(t,"_",n)):Js(t,e.slots={})}else e.slots={},t&&Qs(e,t);ar(e.slots,Pr,1)},Sc=(e,t,n)=>{const{vnode:r,slots:o}=e;let l=!0,s=ke;if(r.shapeFlag&32){const i=t._;i?n&&i===1?l=!1:(Re(o,t),!n&&i===1&&delete o._):(l=!t.$stable,Js(t,o)),s=t}else t&&(Qs(e,t),s={default:1});if(l)for(const i in o)!Ys(i)&&!(i in s)&&delete o[i]};function vr(e,t,n,r,o=!1){if(Q(e)){e.forEach((d,v)=>vr(d,t&&(Q(t)?t[v]:t),n,r,o));return}if(sn(r)&&!o)return;const l=r.shapeFlag&4?Or(r.component)||r.component.proxy:r.el,s=o?null:l,{i,r:a}=e,c=t&&t.r,u=i.refs===ke?i.refs={}:i.refs,f=i.setupState;if(c!=null&&c!==a&&(me(c)?(u[c]=null,de(f,c)&&(f[c]=null)):$e(c)&&(c.value=null)),le(a))Rt(a,i,12,[s,u]);else{const d=me(a),v=$e(a);if(d||v){const y=()=>{if(e.f){const w=d?de(f,a)?f[a]:u[a]:a.value;o?Q(w)&&mo(w,l):Q(w)?w.includes(l)||w.push(l):d?(u[a]=[l],de(f,a)&&(f[a]=u[a])):(a.value=[l],e.k&&(u[e.k]=a.value))}else d?(u[a]=s,de(f,a)&&(f[a]=s)):v&&(a.value=s,e.k&&(u[e.k]=s))};s?(y.id=-1,Ue(y,n)):y()}}}let xt=!1;const Xn=e=>/svg/.test(e.namespaceURI)&&e.tagName!=="foreignObject",er=e=>e.nodeType===8;function Ac(e){const{mt:t,p:n,o:{patchProp:r,createText:o,nextSibling:l,parentNode:s,remove:i,insert:a,createComment:c}}=e,u=(g,b)=>{if(!b.hasChildNodes()){n(null,g,b),fr(),b._vnode=g;return}xt=!1,f(b.firstChild,g,null,null,null),fr(),b._vnode=g,xt&&console.error("Hydration completed but contains mismatches.")},f=(g,b,A,S,U,Z=!1)=>{const $=er(g)&&g.data==="[",m=()=>w(g,b,A,S,U,$),{type:j,ref:D,shapeFlag:G,patchFlag:L}=b;let O=g.nodeType;b.el=g,L===-2&&(Z=!1,b.dynamicChildren=null);let I=null;switch(j){case cn:O!==3?b.children===""?(a(b.el=o(""),s(g),g),I=g):I=m():(g.data!==b.children&&(xt=!0,g.data=b.children),I=l(g));break;case Ye:O!==8||$?I=m():I=l(g);break;case Cn:if($&&(g=l(g),O=g.nodeType),O===1||O===3){I=g;const se=!b.children.length;for(let V=0;V{Z=Z||!!b.dynamicChildren;const{type:$,props:m,patchFlag:j,shapeFlag:D,dirs:G}=b,L=$==="input"&&G||$==="option";if(L||j!==-1){if(G&&ct(b,null,A,"created"),m)if(L||!Z||j&48)for(const I in m)(L&&I.endsWith("value")||Dn(I)&&!xn(I))&&r(g,I,null,m[I],!1,void 0,A);else m.onClick&&r(g,"onClick",null,m.onClick,!1,void 0,A);let O;if((O=m&&m.onVnodeBeforeMount)&&Ze(O,A,b),G&&ct(b,null,A,"beforeMount"),((O=m&&m.onVnodeMounted)||G)&&Ms(()=>{O&&Ze(O,A,b),G&&ct(b,null,A,"mounted")},S),D&16&&!(m&&(m.innerHTML||m.textContent))){let I=v(g.firstChild,b,g,A,S,U,Z);for(;I;){xt=!0;const se=I;I=I.nextSibling,i(se)}}else D&8&&g.textContent!==b.children&&(xt=!0,g.textContent=b.children)}return g.nextSibling},v=(g,b,A,S,U,Z,$)=>{$=$||!!b.dynamicChildren;const m=b.children,j=m.length;for(let D=0;D{const{slotScopeIds:$}=b;$&&(U=U?U.concat($):$);const m=s(g),j=v(l(g),b,m,A,S,U,Z);return j&&er(j)&&j.data==="]"?l(b.anchor=j):(xt=!0,a(b.anchor=c("]"),m,j),j)},w=(g,b,A,S,U,Z)=>{if(xt=!0,b.el=null,Z){const j=C(g);for(;;){const D=l(g);if(D&&D!==j)i(D);else break}}const $=l(g),m=s(g);return i(g),n(null,b,m,$,A,S,Xn(m),U),$},C=g=>{let b=0;for(;g;)if(g=l(g),g&&er(g)&&(g.data==="["&&b++,g.data==="]")){if(b===0)return l(g);b--}return g};return[u,f]}const Ue=Ms;function Rc(e){return Pc(e,Ac)}function Pc(e,t){const n=Jr();n.__VUE__=!0;const{insert:r,remove:o,patchProp:l,createElement:s,createText:i,createComment:a,setText:c,setElementText:u,parentNode:f,nextSibling:d,setScopeId:v=ot,insertStaticContent:y}=e,w=(h,p,_,E=null,x=null,T=null,H=!1,P=null,M=!!p.dynamicChildren)=>{if(h===p)return;h&&!zt(h,p)&&(E=k(h),Fe(h,x,T,!0),h=null),p.patchFlag===-2&&(M=!1,p.dynamicChildren=null);const{type:R,ref:Y,shapeFlag:K}=p;switch(R){case cn:C(h,p,_,E);break;case Ye:g(h,p,_,E);break;case Cn:h==null&&b(p,_,E,H);break;case we:L(h,p,_,E,x,T,H,P,M);break;default:K&1?U(h,p,_,E,x,T,H,P,M):K&6?O(h,p,_,E,x,T,H,P,M):(K&64||K&128)&&R.process(h,p,_,E,x,T,H,P,M,N)}Y!=null&&x&&vr(Y,h&&h.ref,T,p||h,!p)},C=(h,p,_,E)=>{if(h==null)r(p.el=i(p.children),_,E);else{const x=p.el=h.el;p.children!==h.children&&c(x,p.children)}},g=(h,p,_,E)=>{h==null?r(p.el=a(p.children||""),_,E):p.el=h.el},b=(h,p,_,E)=>{[h.el,h.anchor]=y(h.children,p,_,E,h.el,h.anchor)},A=({el:h,anchor:p},_,E)=>{let x;for(;h&&h!==p;)x=d(h),r(h,_,E),h=x;r(p,_,E)},S=({el:h,anchor:p})=>{let _;for(;h&&h!==p;)_=d(h),o(h),h=_;o(p)},U=(h,p,_,E,x,T,H,P,M)=>{H=H||p.type==="svg",h==null?Z(p,_,E,x,T,H,P,M):j(h,p,x,T,H,P,M)},Z=(h,p,_,E,x,T,H,P)=>{let M,R;const{type:Y,props:K,shapeFlag:J,transition:ne,dirs:ie}=h;if(M=h.el=s(h.type,T,K&&K.is,K),J&8?u(M,h.children):J&16&&m(h.children,M,null,E,x,T&&Y!=="foreignObject",H,P),ie&&ct(h,null,E,"created"),$(M,h,h.scopeId,H,E),K){for(const _e in K)_e!=="value"&&!xn(_e)&&l(M,_e,null,K[_e],T,h.children,E,x,Ie);"value"in K&&l(M,"value",null,K.value),(R=K.onVnodeBeforeMount)&&Ze(R,E,h)}ie&&ct(h,null,E,"beforeMount");const ye=(!x||x&&!x.pendingBranch)&&ne&&!ne.persisted;ye&&ne.beforeEnter(M),r(M,p,_),((R=K&&K.onVnodeMounted)||ye||ie)&&Ue(()=>{R&&Ze(R,E,h),ye&&ne.enter(M),ie&&ct(h,null,E,"mounted")},x)},$=(h,p,_,E,x)=>{if(_&&v(h,_),E)for(let T=0;T{for(let R=M;R{const P=p.el=h.el;let{patchFlag:M,dynamicChildren:R,dirs:Y}=p;M|=h.patchFlag&16;const K=h.props||ke,J=p.props||ke;let ne;_&&Mt(_,!1),(ne=J.onVnodeBeforeUpdate)&&Ze(ne,_,p,h),Y&&ct(p,h,_,"beforeUpdate"),_&&Mt(_,!0);const ie=x&&p.type!=="foreignObject";if(R?D(h.dynamicChildren,R,P,_,E,ie,T):H||oe(h,p,P,null,_,E,ie,T,!1),M>0){if(M&16)G(P,p,K,J,_,E,x);else if(M&2&&K.class!==J.class&&l(P,"class",null,J.class,x),M&4&&l(P,"style",K.style,J.style,x),M&8){const ye=p.dynamicProps;for(let _e=0;_e{ne&&Ze(ne,_,p,h),Y&&ct(p,h,_,"updated")},E)},D=(h,p,_,E,x,T,H)=>{for(let P=0;P{if(_!==E){if(_!==ke)for(const P in _)!xn(P)&&!(P in E)&&l(h,P,_[P],null,H,p.children,x,T,Ie);for(const P in E){if(xn(P))continue;const M=E[P],R=_[P];M!==R&&P!=="value"&&l(h,P,R,M,H,p.children,x,T,Ie)}"value"in E&&l(h,"value",_.value,E.value)}},L=(h,p,_,E,x,T,H,P,M)=>{const R=p.el=h?h.el:i(""),Y=p.anchor=h?h.anchor:i("");let{patchFlag:K,dynamicChildren:J,slotScopeIds:ne}=p;ne&&(P=P?P.concat(ne):ne),h==null?(r(R,_,E),r(Y,_,E),m(p.children,_,Y,x,T,H,P,M)):K>0&&K&64&&J&&h.dynamicChildren?(D(h.dynamicChildren,J,_,x,T,H,P),(p.key!=null||x&&p===x.subTree)&&Zs(h,p,!0)):oe(h,p,_,Y,x,T,H,P,M)},O=(h,p,_,E,x,T,H,P,M)=>{p.slotScopeIds=P,h==null?p.shapeFlag&512?x.ctx.activate(p,_,E,H,M):I(p,_,E,x,T,H,M):se(h,p,M)},I=(h,p,_,E,x,T,H)=>{const P=h.component=Bc(h,E,x);if(jn(h)&&(P.ctx.renderer=N),zc(P),P.asyncDep){if(x&&x.registerDep(P,V),!h.el){const M=P.subTree=te(Ye);g(null,M,p,_)}return}V(P,h,p,_,x,T,H)},se=(h,p,_)=>{const E=p.component=h.component;if(Qa(h,p,_))if(E.asyncDep&&!E.asyncResolved){re(E,p,_);return}else E.next=p,Ka(E.update),E.update();else p.el=h.el,E.vnode=p},V=(h,p,_,E,x,T,H)=>{const P=()=>{if(h.isMounted){let{next:Y,bu:K,u:J,parent:ne,vnode:ie}=h,ye=Y,_e;Mt(h,!1),Y?(Y.el=ie.el,re(h,Y,H)):Y=ie,K&&Mr(K),(_e=Y.props&&Y.props.onVnodeBeforeUpdate)&&Ze(_e,ne,Y,ie),Mt(h,!0);const Se=Dr(h),et=h.subTree;h.subTree=Se,w(et,Se,f(et.el),k(et),h,x,T),Y.el=Se.el,ye===null&&Za(h,Se.el),J&&Ue(J,x),(_e=Y.props&&Y.props.onVnodeUpdated)&&Ue(()=>Ze(_e,ne,Y,ie),x)}else{let Y;const{el:K,props:J}=p,{bm:ne,m:ie,parent:ye}=h,_e=sn(p);if(Mt(h,!1),ne&&Mr(ne),!_e&&(Y=J&&J.onVnodeBeforeMount)&&Ze(Y,ye,p),Mt(h,!0),K&&ce){const Se=()=>{h.subTree=Dr(h),ce(K,h.subTree,h,x,null)};_e?p.type.__asyncLoader().then(()=>!h.isUnmounted&&Se()):Se()}else{const Se=h.subTree=Dr(h);w(null,Se,_,E,h,x,T),p.el=Se.el}if(ie&&Ue(ie,x),!_e&&(Y=J&&J.onVnodeMounted)){const Se=p;Ue(()=>Ze(Y,ye,Se),x)}(p.shapeFlag&256||ye&&sn(ye.vnode)&&ye.vnode.shapeFlag&256)&&h.a&&Ue(h.a,x),h.isMounted=!0,p=_=E=null}},M=h.effect=new bo(P,()=>Tr(R),h.scope),R=h.update=()=>M.run();R.id=h.uid,Mt(h,!0),R()},re=(h,p,_)=>{p.component=h;const E=h.vnode.props;h.vnode=p,h.next=null,Lc(h,p.props,E,_),Sc(h,p.children,_),mn(),ol(),vn()},oe=(h,p,_,E,x,T,H,P,M=!1)=>{const R=h&&h.children,Y=h?h.shapeFlag:0,K=p.children,{patchFlag:J,shapeFlag:ne}=p;if(J>0){if(J&128){Ne(R,K,_,E,x,T,H,P,M);return}else if(J&256){He(R,K,_,E,x,T,H,P,M);return}}ne&8?(Y&16&&Ie(R,x,T),K!==R&&u(_,K)):Y&16?ne&16?Ne(R,K,_,E,x,T,H,P,M):Ie(R,x,T,!0):(Y&8&&u(_,""),ne&16&&m(K,_,E,x,T,H,P,M))},He=(h,p,_,E,x,T,H,P,M)=>{h=h||nn,p=p||nn;const R=h.length,Y=p.length,K=Math.min(R,Y);let J;for(J=0;JY?Ie(h,x,T,!0,!1,K):m(p,_,E,x,T,H,P,M,K)},Ne=(h,p,_,E,x,T,H,P,M)=>{let R=0;const Y=p.length;let K=h.length-1,J=Y-1;for(;R<=K&&R<=J;){const ne=h[R],ie=p[R]=M?Tt(p[R]):tt(p[R]);if(zt(ne,ie))w(ne,ie,_,null,x,T,H,P,M);else break;R++}for(;R<=K&&R<=J;){const ne=h[K],ie=p[J]=M?Tt(p[J]):tt(p[J]);if(zt(ne,ie))w(ne,ie,_,null,x,T,H,P,M);else break;K--,J--}if(R>K){if(R<=J){const ne=J+1,ie=neJ)for(;R<=K;)Fe(h[R],x,T,!0),R++;else{const ne=R,ie=R,ye=new Map;for(R=ie;R<=J;R++){const qe=p[R]=M?Tt(p[R]):tt(p[R]);qe.key!=null&&ye.set(qe.key,R)}let _e,Se=0;const et=J-ie+1;let Qt=!1,Wo=0;const gn=new Array(et);for(R=0;R=et){Fe(qe,x,T,!0);continue}let at;if(qe.key!=null)at=ye.get(qe.key);else for(_e=ie;_e<=J;_e++)if(gn[_e-ie]===0&&zt(qe,p[_e])){at=_e;break}at===void 0?Fe(qe,x,T,!0):(gn[at-ie]=R+1,at>=Wo?Wo=at:Qt=!0,w(qe,p[at],_,null,x,T,H,P,M),Se++)}const qo=Qt?Oc(gn):nn;for(_e=qo.length-1,R=et-1;R>=0;R--){const qe=ie+R,at=p[qe],Go=qe+1{const{el:T,type:H,transition:P,children:M,shapeFlag:R}=h;if(R&6){Ve(h.component.subTree,p,_,E);return}if(R&128){h.suspense.move(p,_,E);return}if(R&64){H.move(h,p,_,N);return}if(H===we){r(T,p,_);for(let K=0;KP.enter(T),x);else{const{leave:K,delayLeave:J,afterLeave:ne}=P,ie=()=>r(T,p,_),ye=()=>{K(T,()=>{ie(),ne&&ne()})};J?J(T,ie,ye):ye()}else r(T,p,_)},Fe=(h,p,_,E=!1,x=!1)=>{const{type:T,props:H,ref:P,children:M,dynamicChildren:R,shapeFlag:Y,patchFlag:K,dirs:J}=h;if(P!=null&&vr(P,null,_,h,!0),Y&256){p.ctx.deactivate(h);return}const ne=Y&1&&J,ie=!sn(h);let ye;if(ie&&(ye=H&&H.onVnodeBeforeUnmount)&&Ze(ye,p,h),Y&6)it(h.component,_,E);else{if(Y&128){h.suspense.unmount(_,E);return}ne&&ct(h,null,p,"beforeUnmount"),Y&64?h.type.remove(h,p,_,x,N,E):R&&(T!==we||K>0&&K&64)?Ie(R,p,_,!1,!0):(T===we&&K&384||!x&&Y&16)&&Ie(M,p,_),E&&Et(h)}(ie&&(ye=H&&H.onVnodeUnmounted)||ne)&&Ue(()=>{ye&&Ze(ye,p,h),ne&&ct(h,null,p,"unmounted")},_)},Et=h=>{const{type:p,el:_,anchor:E,transition:x}=h;if(p===we){wt(_,E);return}if(p===Cn){S(h);return}const T=()=>{o(_),x&&!x.persisted&&x.afterLeave&&x.afterLeave()};if(h.shapeFlag&1&&x&&!x.persisted){const{leave:H,delayLeave:P}=x,M=()=>H(_,T);P?P(h.el,T,M):M()}else T()},wt=(h,p)=>{let _;for(;h!==p;)_=d(h),o(h),h=_;o(p)},it=(h,p,_)=>{const{bum:E,scope:x,update:T,subTree:H,um:P}=h;E&&Mr(E),x.stop(),T&&(T.active=!1,Fe(H,h,p,_)),P&&Ue(P,p),Ue(()=>{h.isUnmounted=!0},p),p&&p.pendingBranch&&!p.isUnmounted&&h.asyncDep&&!h.asyncResolved&&h.suspenseId===p.pendingId&&(p.deps--,p.deps===0&&p.resolve())},Ie=(h,p,_,E=!1,x=!1,T=0)=>{for(let H=T;Hh.shapeFlag&6?k(h.component.subTree):h.shapeFlag&128?h.suspense.next():d(h.anchor||h.el),z=(h,p,_)=>{h==null?p._vnode&&Fe(p._vnode,null,null,!0):w(p._vnode||null,h,p,null,null,null,_),ol(),fr(),p._vnode=h},N={p:w,um:Fe,m:Ve,r:Et,mt:I,mc:m,pc:oe,pbc:D,n:k,o:e};let W,ce;return t&&([W,ce]=t(N)),{render:z,hydrate:W,createApp:kc(z,W)}}function Mt({effect:e,update:t},n){e.allowRecurse=t.allowRecurse=n}function Zs(e,t,n=!1){const r=e.children,o=t.children;if(Q(r)&&Q(o))for(let l=0;l>1,e[n[i]]0&&(t[r]=n[l-1]),n[l]=r)}}for(l=n.length,s=n[l-1];l-- >0;)n[l]=s,s=t[s];return n}const Ic=e=>e.__isTeleport,we=Symbol.for("v-fgt"),cn=Symbol.for("v-txt"),Ye=Symbol.for("v-cmt"),Cn=Symbol.for("v-stc"),Tn=[];let rt=null;function F(e=!1){Tn.push(rt=e?null:[])}function $c(){Tn.pop(),rt=Tn[Tn.length-1]||null}let $n=1;function vl(e){$n+=e}function Xs(e){return e.dynamicChildren=$n>0?rt||nn:null,$c(),$n>0&&rt&&rt.push(e),e}function X(e,t,n,r,o,l){return Xs(he(e,t,n,r,o,l,!0))}function Ae(e,t,n,r,o){return Xs(te(e,t,n,r,o,!0))}function gr(e){return e?e.__v_isVNode===!0:!1}function zt(e,t){return e.type===t.type&&e.key===t.key}const Pr="__vInternal",ei=({key:e})=>e??null,sr=({ref:e,ref_key:t,ref_for:n})=>(typeof e=="number"&&(e=""+e),e!=null?me(e)||$e(e)||le(e)?{i:De,r:e,k:t,f:!!n}:e:null);function he(e,t=null,n=null,r=0,o=null,l=e===we?0:1,s=!1,i=!1){const a={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&ei(t),ref:t&&sr(t),scopeId:Ns,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:l,patchFlag:r,dynamicProps:o,dynamicChildren:null,appContext:null,ctx:De};return i?(Oo(a,n),l&128&&e.normalize(a)):n&&(a.shapeFlag|=me(n)?8:16),$n>0&&!s&&rt&&(a.patchFlag>0||l&6)&&a.patchFlag!==32&&rt.push(a),a}const te=Nc;function Nc(e,t=null,n=null,r=0,o=null,l=!1){if((!e||e===pc)&&(e=Ye),gr(e)){const i=It(e,t,!0);return n&&Oo(i,n),$n>0&&!l&&rt&&(i.shapeFlag&6?rt[rt.indexOf(e)]=i:rt.push(i)),i.patchFlag|=-2,i}if(Wc(e)&&(e=e.__vccOpts),t){t=Mc(t);let{class:i,style:a}=t;i&&!me(i)&&(t.class=Ke(i)),xe(a)&&(Ts(a)&&!Q(a)&&(a=Re({},a)),t.style=Hn(a))}const s=me(e)?1:Xa(e)?128:Ic(e)?64:xe(e)?4:le(e)?2:0;return he(e,t,n,r,o,s,l,!0)}function Mc(e){return e?Ts(e)||Pr in e?Re({},e):e:null}function It(e,t,n=!1){const{props:r,ref:o,patchFlag:l,children:s}=e,i=t?io(r||{},t):r;return{__v_isVNode:!0,__v_skip:!0,type:e.type,props:i,key:i&&ei(i),ref:t&&t.ref?n&&o?Q(o)?o.concat(sr(t)):[o,sr(t)]:sr(t):o,scopeId:e.scopeId,slotScopeIds:e.slotScopeIds,children:s,target:e.target,targetAnchor:e.targetAnchor,staticCount:e.staticCount,shapeFlag:e.shapeFlag,patchFlag:t&&e.type!==we?l===-1?16:l|16:l,dynamicProps:e.dynamicProps,dynamicChildren:e.dynamicChildren,appContext:e.appContext,dirs:e.dirs,transition:e.transition,component:e.component,suspense:e.suspense,ssContent:e.ssContent&&It(e.ssContent),ssFallback:e.ssFallback&&It(e.ssFallback),el:e.el,anchor:e.anchor,ctx:e.ctx,ce:e.ce}}function $t(e=" ",t=0){return te(cn,null,e,t)}function Dc(e,t){const n=te(Cn,null,e);return n.staticCount=t,n}function Ce(e="",t=!1){return t?(F(),Ae(Ye,null,e)):te(Ye,null,e)}function tt(e){return e==null||typeof e=="boolean"?te(Ye):Q(e)?te(we,null,e.slice()):typeof e=="object"?Tt(e):te(cn,null,String(e))}function Tt(e){return e.el===null&&e.patchFlag!==-1||e.memo?e:It(e)}function Oo(e,t){let n=0;const{shapeFlag:r}=e;if(t==null)t=null;else if(Q(t))n=16;else if(typeof t=="object")if(r&65){const o=t.default;o&&(o._c&&(o._d=!1),Oo(e,o()),o._c&&(o._d=!0));return}else{n=32;const o=t._;!o&&!(Pr in t)?t._ctx=De:o===3&&De&&(De.slots._===1?t._=1:(t._=2,e.patchFlag|=1024))}else le(t)?(t={default:t,_ctx:De},n=32):(t=String(t),r&64?(n=16,t=[$t(t)]):n=8);e.children=t,e.shapeFlag|=n}function io(...e){const t={};for(let n=0;nPe||De;let Io,Zt,gl="__VUE_INSTANCE_SETTERS__";(Zt=Jr()[gl])||(Zt=Jr()[gl]=[]),Zt.push(e=>Pe=e),Io=e=>{Zt.length>1?Zt.forEach(t=>t(e)):Zt[0](e)};const un=e=>{Io(e),e.scope.on()},Wt=()=>{Pe&&Pe.scope.off(),Io(null)};function ni(e){return e.vnode.shapeFlag&4}let fn=!1;function zc(e,t=!1){fn=t;const{props:n,children:r}=e.vnode,o=ni(e);xc(e,n,o,t),Tc(e,r);const l=o?jc(e,t):void 0;return fn=!1,l}function jc(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=Ss(new Proxy(e.ctx,vc));const{setup:r}=n;if(r){const o=e.setupContext=r.length>1?Uc(e):null;un(e),mn();const l=Rt(r,e,0,[e.props,o]);if(vn(),Wt(),us(l)){if(l.then(Wt,Wt),t)return l.then(s=>{_l(e,s,t)}).catch(s=>{zn(s,e,0)});e.asyncDep=l}else _l(e,l,t)}else ri(e,t)}function _l(e,t,n){le(t)?e.type.__ssrInlineRender?e.ssrRender=t:e.render=t:xe(t)&&(e.setupState=Rs(t)),ri(e,n)}let bl;function ri(e,t,n){const r=e.type;if(!e.render){if(!t&&bl&&!r.render){const o=r.template||Ro(e).template;if(o){const{isCustomElement:l,compilerOptions:s}=e.appContext.config,{delimiters:i,compilerOptions:a}=r,c=Re(Re({isCustomElement:l,delimiters:i},s),a);r.render=bl(o,c)}}e.render=r.render||ot}un(e),mn(),gc(e),vn(),Wt()}function Vc(e){return e.attrsProxy||(e.attrsProxy=new Proxy(e.attrs,{get(t,n){return We(e,"get","$attrs"),t[n]}}))}function Uc(e){const t=n=>{e.exposed=n||{}};return{get attrs(){return Vc(e)},slots:e.slots,emit:e.emit,expose:t}}function Or(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(Rs(Ss(e.exposed)),{get(t,n){if(n in t)return t[n];if(n in Ln)return Ln[n](e)},has(t,n){return n in t||n in Ln}}))}function Kc(e,t=!0){return le(e)?e.displayName||e.name:e.name||t&&e.__name}function Wc(e){return le(e)&&"__vccOpts"in e}const B=(e,t)=>ja(e,t,fn);function ae(e,t,n){const r=arguments.length;return r===2?xe(t)&&!Q(t)?gr(t)?te(e,null,[t]):te(e,t):te(e,null,t):(r>3?n=Array.prototype.slice.call(arguments,2):r===3&&gr(n)&&(n=[n]),te(e,t,n))}const qc=Symbol.for("v-scx"),Gc=()=>Te(qc),Yc="3.3.4",Jc="http://www.w3.org/2000/svg",jt=typeof document<"u"?document:null,yl=jt&&jt.createElement("template"),Qc={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,r)=>{const o=t?jt.createElementNS(Jc,e):jt.createElement(e,n?{is:n}:void 0);return e==="select"&&r&&r.multiple!=null&&o.setAttribute("multiple",r.multiple),o},createText:e=>jt.createTextNode(e),createComment:e=>jt.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>jt.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},insertStaticContent(e,t,n,r,o,l){const s=n?n.previousSibling:t.lastChild;if(o&&(o===l||o.nextSibling))for(;t.insertBefore(o.cloneNode(!0),n),!(o===l||!(o=o.nextSibling)););else{yl.innerHTML=r?`${e}`:e;const i=yl.content;if(r){const a=i.firstChild;for(;a.firstChild;)i.appendChild(a.firstChild);i.removeChild(a)}t.insertBefore(i,n)}return[s?s.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};function Zc(e,t,n){const r=e._vtc;r&&(t=(t?[t,...r]:[...r]).join(" ")),t==null?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}function Xc(e,t,n){const r=e.style,o=me(n);if(n&&!o){if(t&&!me(t))for(const l in t)n[l]==null&&ao(r,l,"");for(const l in n)ao(r,l,n[l])}else{const l=r.display;o?t!==n&&(r.cssText=n):t&&e.removeAttribute("style"),"_vod"in e&&(r.display=l)}}const El=/\s*!important$/;function ao(e,t,n){if(Q(n))n.forEach(r=>ao(e,t,r));else if(n==null&&(n=""),t.startsWith("--"))e.setProperty(t,n);else{const r=eu(e,t);El.test(n)?e.setProperty(Gt(r),n.replace(El,""),"important"):e[r]=n}}const wl=["Webkit","Moz","ms"],zr={};function eu(e,t){const n=zr[t];if(n)return n;let r=ft(t);if(r!=="filter"&&r in e)return zr[t]=r;r=kr(r);for(let o=0;ojr||(iu.then(()=>jr=0),jr=Date.now());function cu(e,t){const n=r=>{if(!r._vts)r._vts=Date.now();else if(r._vts<=n.attached)return;Xe(uu(r,n.value),t,5,[r])};return n.value=e,n.attached=au(),n}function uu(e,t){if(Q(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map(r=>o=>!o._stopped&&r&&r(o))}else return t}const Ll=/^on[a-z]/,fu=(e,t,n,r,o=!1,l,s,i,a)=>{t==="class"?Zc(e,r,o):t==="style"?Xc(e,n,r):Dn(t)?po(t)||lu(e,t,n,r,s):(t[0]==="."?(t=t.slice(1),!0):t[0]==="^"?(t=t.slice(1),!1):du(e,t,r,o))?nu(e,t,r,l,s,i,a):(t==="true-value"?e._trueValue=r:t==="false-value"&&(e._falseValue=r),tu(e,t,r,o))};function du(e,t,n,r){return r?!!(t==="innerHTML"||t==="textContent"||t in e&&Ll.test(t)&&le(n)):t==="spellcheck"||t==="draggable"||t==="translate"||t==="form"||t==="list"&&e.tagName==="INPUT"||t==="type"&&e.tagName==="TEXTAREA"||Ll.test(t)&&me(n)?!1:t in e}const Lt="transition",_n="animation",Un=(e,{slots:t})=>ae(rc,hu(e),t);Un.displayName="Transition";const oi={name:String,type:String,css:{type:Boolean,default:!0},duration:[String,Number,Object],enterFromClass:String,enterActiveClass:String,enterToClass:String,appearFromClass:String,appearActiveClass:String,appearToClass:String,leaveFromClass:String,leaveActiveClass:String,leaveToClass:String};Un.props=Re({},Fs,oi);const Dt=(e,t=[])=>{Q(e)?e.forEach(n=>n(...t)):e&&e(...t)},Cl=e=>e?Q(e)?e.some(t=>t.length>1):e.length>1:!1;function hu(e){const t={};for(const L in e)L in oi||(t[L]=e[L]);if(e.css===!1)return t;const{name:n="v",type:r,duration:o,enterFromClass:l=`${n}-enter-from`,enterActiveClass:s=`${n}-enter-active`,enterToClass:i=`${n}-enter-to`,appearFromClass:a=l,appearActiveClass:c=s,appearToClass:u=i,leaveFromClass:f=`${n}-leave-from`,leaveActiveClass:d=`${n}-leave-active`,leaveToClass:v=`${n}-leave-to`}=e,y=pu(o),w=y&&y[0],C=y&&y[1],{onBeforeEnter:g,onEnter:b,onEnterCancelled:A,onLeave:S,onLeaveCancelled:U,onBeforeAppear:Z=g,onAppear:$=b,onAppearCancelled:m=A}=t,j=(L,O,I)=>{Ht(L,O?u:i),Ht(L,O?c:s),I&&I()},D=(L,O)=>{L._isLeaving=!1,Ht(L,f),Ht(L,v),Ht(L,d),O&&O()},G=L=>(O,I)=>{const se=L?$:b,V=()=>j(O,L,I);Dt(se,[O,V]),Tl(()=>{Ht(O,L?a:l),Ct(O,L?u:i),Cl(se)||Sl(O,r,w,V)})};return Re(t,{onBeforeEnter(L){Dt(g,[L]),Ct(L,l),Ct(L,s)},onBeforeAppear(L){Dt(Z,[L]),Ct(L,a),Ct(L,c)},onEnter:G(!1),onAppear:G(!0),onLeave(L,O){L._isLeaving=!0;const I=()=>D(L,O);Ct(L,f),gu(),Ct(L,d),Tl(()=>{L._isLeaving&&(Ht(L,f),Ct(L,v),Cl(S)||Sl(L,r,C,I))}),Dt(S,[L,I])},onEnterCancelled(L){j(L,!1),Dt(A,[L])},onAppearCancelled(L){j(L,!0),Dt(m,[L])},onLeaveCancelled(L){D(L),Dt(U,[L])}})}function pu(e){if(e==null)return null;if(xe(e))return[Vr(e.enter),Vr(e.leave)];{const t=Vr(e);return[t,t]}}function Vr(e){return Zi(e)}function Ct(e,t){t.split(/\s+/).forEach(n=>n&&e.classList.add(n)),(e._vtc||(e._vtc=new Set)).add(t)}function Ht(e,t){t.split(/\s+/).forEach(r=>r&&e.classList.remove(r));const{_vtc:n}=e;n&&(n.delete(t),n.size||(e._vtc=void 0))}function Tl(e){requestAnimationFrame(()=>{requestAnimationFrame(e)})}let mu=0;function Sl(e,t,n,r){const o=e._endId=++mu,l=()=>{o===e._endId&&r()};if(n)return setTimeout(l,n);const{type:s,timeout:i,propCount:a}=vu(e,t);if(!s)return r();const c=s+"end";let u=0;const f=()=>{e.removeEventListener(c,d),l()},d=v=>{v.target===e&&++u>=a&&f()};setTimeout(()=>{u(n[y]||"").split(", "),o=r(`${Lt}Delay`),l=r(`${Lt}Duration`),s=Al(o,l),i=r(`${_n}Delay`),a=r(`${_n}Duration`),c=Al(i,a);let u=null,f=0,d=0;t===Lt?s>0&&(u=Lt,f=s,d=l.length):t===_n?c>0&&(u=_n,f=c,d=a.length):(f=Math.max(s,c),u=f>0?s>c?Lt:_n:null,d=u?u===Lt?l.length:a.length:0);const v=u===Lt&&/\b(transform|all)(,|$)/.test(r(`${Lt}Property`).toString());return{type:u,timeout:f,propCount:d,hasTransform:v}}function Al(e,t){for(;e.lengthRl(n)+Rl(e[r])))}function Rl(e){return Number(e.slice(0,-1).replace(",","."))*1e3}function gu(){return document.body.offsetHeight}const _u={esc:"escape",space:" ",up:"arrow-up",left:"arrow-left",right:"arrow-right",down:"arrow-down",delete:"backspace"},bu=(e,t)=>n=>{if(!("key"in n))return;const r=Gt(n.key);if(t.some(o=>o===r||_u[o]===r))return e(n)},_r={beforeMount(e,{value:t},{transition:n}){e._vod=e.style.display==="none"?"":e.style.display,n&&t?n.beforeEnter(e):bn(e,t)},mounted(e,{value:t},{transition:n}){n&&t&&n.enter(e)},updated(e,{value:t,oldValue:n},{transition:r}){!t!=!n&&(r?t?(r.beforeEnter(e),bn(e,!0),r.enter(e)):r.leave(e,()=>{bn(e,!1)}):bn(e,t))},beforeUnmount(e,{value:t}){bn(e,t)}};function bn(e,t){e.style.display=t?e._vod:"none"}const yu=Re({patchProp:fu},Qc);let Ur,Pl=!1;function Eu(){return Ur=Pl?Ur:Rc(yu),Pl=!0,Ur}const wu=(...e)=>{const t=Eu().createApp(...e),{mount:n}=t;return t.mount=r=>{const o=ku(r);if(o)return n(o,!0,o instanceof SVGElement)},t};function ku(e){return me(e)?document.querySelector(e):e}const xu={"v-18cc131e":()=>q(()=>import("./CHANGELOG.html-9ea461a4.js"),[]).then(({data:e})=>e),"v-8daa1a0e":()=>q(()=>import("./index.html-34929b9c.js"),[]).then(({data:e})=>e),"v-587e1e66":()=>q(()=>import("./api.html-462ea688.js"),[]).then(({data:e})=>e),"v-ab448fd4":()=>q(()=>import("./style.html-db8345a5.js"),[]).then(({data:e})=>e),"v-d009f75c":()=>q(()=>import("./tags.html-12ef7cdd.js"),[]).then(({data:e})=>e),"v-4a2618c8":()=>q(()=>import("./tween.html-05b35220.js"),[]).then(({data:e})=>e),"v-262adb4a":()=>q(()=>import("./bitmapfont.html-fac5369d.js"),[]).then(({data:e})=>e),"v-3bb939a7":()=>q(()=>import("./button.html-08c089c7.js"),[]).then(({data:e})=>e),"v-34f9d341":()=>q(()=>import("./canvas.html-e76c842f.js"),[]).then(({data:e})=>e),"v-1dbcc69d":()=>q(()=>import("./element.html-4246a337.js"),[]).then(({data:e})=>e),"v-d82ea0c4":()=>q(()=>import("./image.html-30863611.js"),[]).then(({data:e})=>e),"v-2e5d17c0":()=>q(()=>import("./overview.html-7794e747.js"),[]).then(({data:e})=>e),"v-dc0dd396":()=>q(()=>import("./rect.html-9425258f.js"),[]).then(({data:e})=>e),"v-14a00c9a":()=>q(()=>import("./scrollbar.html-3feb5aed.js"),[]).then(({data:e})=>e),"v-5e5b65e7":()=>q(()=>import("./scrollview.html-99477649.js"),[]).then(({data:e})=>e),"v-1164d08c":()=>q(()=>import("./text.html-f03e8081.js"),[]).then(({data:e})=>e),"v-1d0af3d8":()=>q(()=>import("./view.html-d378fd93.js"),[]).then(({data:e})=>e),"v-7e5b80f8":()=>q(()=>import("./invite.html-fd5c2c95.js"),[]).then(({data:e})=>e),"v-f50a3896":()=>q(()=>import("./rank.html-e364c687.js"),[]).then(({data:e})=>e),"v-3d4ac21a":()=>q(()=>import("./guide.html-ab7db34f.js"),[]).then(({data:e})=>e),"v-79f3f269":()=>q(()=>import("./plugin.html-232641d3.js"),[]).then(({data:e})=>e),"v-785ab5e0":()=>q(()=>import("./guide.html-5bfa5c1a.js"),[]).then(({data:e})=>e),"v-4779190d":()=>q(()=>import("./richtext.html-104f8948.js"),[]).then(({data:e})=>e),"v-79802700":()=>q(()=>import("./cocos2.x.html-c5d3a370.js"),[]).then(({data:e})=>e),"v-b00cf256":()=>q(()=>import("./loading.html-8102ceb9.js"),[]).then(({data:e})=>e),"v-cfeec4e4":()=>q(()=>import("./platform.html-09de90c2.js"),[]).then(({data:e})=>e),"v-1da74265":()=>q(()=>import("./templateengine.html-7ced2644.js"),[]).then(({data:e})=>e),"v-3706649a":()=>q(()=>import("./404.html-60b35caa.js"),[]).then(({data:e})=>e)},Lu=JSON.parse('{"base":"/minigame-canvas-engine/","lang":"en-US","title":"","description":"轻量级canvas渲染引擎","head":[["meta",{"name":"robots","content":"all"}],["meta",{"name":"author","content":"yuanzm"}],["meta",{"name":"keywords","content":"minigame-canvans-engine, minigame, canvas, engine, game engine"}],["link",{"rel":"shortcut icon","type":"image/x-icon","href":"./imgs/favicon.ico"}],["script",{},"\\n  var sc_project=12873270; \\n  var sc_invisible=1; \\n  var sc_security=\\"efed24b4\\"; \\n  "],["script",{"src":"https://www.statcounter.com/counter/counter.js","async":true}]],"locales":{}}');var Cu=([e,t,n])=>e==="meta"&&t.name?`${e}.${t.name}`:["title","base"].includes(e)?e:e==="template"&&t.id?`${e}.${t.id}`:JSON.stringify([e,t,n]),Tu=e=>{const t=new Set,n=[];return e.forEach(r=>{const o=Cu(r);t.has(o)||(t.add(o),n.push(r))}),n},Kn=e=>/^(https?:)?\/\//.test(e),Su=e=>/^mailto:/.test(e),Au=e=>/^tel:/.test(e),$o=e=>Object.prototype.toString.call(e)==="[object Object]",li=e=>e[e.length-1]==="/"?e.slice(0,-1):e,si=e=>e[0]==="/"?e.slice(1):e,ii=(e,t)=>{const n=Object.keys(e).sort((r,o)=>{const l=o.split("/").length-r.split("/").length;return l!==0?l:o.length-r.length});for(const r of n)if(t.startsWith(r))return r;return"/"};const ai={"v-18cc131e":be(()=>q(()=>import("./CHANGELOG.html-7f8918ee.js"),[])),"v-8daa1a0e":be(()=>q(()=>import("./index.html-70f8fc8c.js"),[])),"v-587e1e66":be(()=>q(()=>import("./api.html-64fa6ca5.js"),[])),"v-ab448fd4":be(()=>q(()=>import("./style.html-002366e2.js"),[])),"v-d009f75c":be(()=>q(()=>import("./tags.html-ab11926b.js"),[])),"v-4a2618c8":be(()=>q(()=>import("./tween.html-8a91f58b.js"),[])),"v-262adb4a":be(()=>q(()=>import("./bitmapfont.html-ac9dbca8.js"),[])),"v-3bb939a7":be(()=>q(()=>import("./button.html-875962e9.js"),[])),"v-34f9d341":be(()=>q(()=>import("./canvas.html-6252f16d.js"),[])),"v-1dbcc69d":be(()=>q(()=>import("./element.html-51f0116e.js"),[])),"v-d82ea0c4":be(()=>q(()=>import("./image.html-aa40003e.js"),[])),"v-2e5d17c0":be(()=>q(()=>import("./overview.html-4039f849.js"),[])),"v-dc0dd396":be(()=>q(()=>import("./rect.html-2651dea0.js"),[])),"v-14a00c9a":be(()=>q(()=>import("./scrollbar.html-ba50a89c.js"),[])),"v-5e5b65e7":be(()=>q(()=>import("./scrollview.html-8f3f709b.js"),[])),"v-1164d08c":be(()=>q(()=>import("./text.html-e6c80c3a.js"),[])),"v-1d0af3d8":be(()=>q(()=>import("./view.html-d71163d3.js"),[])),"v-7e5b80f8":be(()=>q(()=>import("./invite.html-f4d87430.js"),[])),"v-f50a3896":be(()=>q(()=>import("./rank.html-1a6c9104.js"),[])),"v-3d4ac21a":be(()=>q(()=>import("./guide.html-93b55473.js"),[])),"v-79f3f269":be(()=>q(()=>import("./plugin.html-9a42a6e6.js"),[])),"v-785ab5e0":be(()=>q(()=>import("./guide.html-0f7d6ea3.js"),[])),"v-4779190d":be(()=>q(()=>import("./richtext.html-31ff4652.js"),[])),"v-79802700":be(()=>q(()=>import("./cocos2.x.html-ccc307c2.js"),[])),"v-b00cf256":be(()=>q(()=>import("./loading.html-0ed1c6e9.js"),[])),"v-cfeec4e4":be(()=>q(()=>import("./platform.html-a0d12aa4.js"),[])),"v-1da74265":be(()=>q(()=>import("./templateengine.html-e9ef9b76.js"),[])),"v-3706649a":be(()=>q(()=>import("./404.html-4b3e6783.js"),[]))};var Ru=Symbol(""),ci=Symbol(""),Pu=Bn({key:"",path:"",title:"",lang:"",frontmatter:{},headers:[]}),qt=()=>{const e=Te(ci);if(!e)throw new Error("pageData() is called without provider.");return e},ui=Symbol(""),vt=()=>{const e=Te(ui);if(!e)throw new Error("usePageFrontmatter() is called without provider.");return e},fi=Symbol(""),Ou=()=>{const e=Te(fi);if(!e)throw new Error("usePageHead() is called without provider.");return e},Iu=Symbol(""),di=Symbol(""),$u=()=>{const e=Te(di);if(!e)throw new Error("usePageLang() is called without provider.");return e},hi=Symbol(""),Nu=()=>{const e=Te(hi);if(!e)throw new Error("usePageLayout() is called without provider.");return e},Mu=ge(xu),No=Symbol(""),Wn=()=>{const e=Te(No);if(!e)throw new Error("useRouteLocale() is called without provider.");return e},tn=ge(Lu),pi=()=>tn,mi=Symbol(""),Mo=()=>{const e=Te(mi);if(!e)throw new Error("useSiteLocaleData() is called without provider.");return e},Du=Symbol(""),Hu="Layout",Fu="NotFound",ht=Fn({resolveLayouts:e=>e.reduce((t,n)=>({...t,...n.layouts}),{}),resolvePageData:async e=>{const t=Mu.value[e];return await(t==null?void 0:t())??Pu},resolvePageFrontmatter:e=>e.frontmatter,resolvePageHead:(e,t,n)=>{const r=me(t.description)?t.description:n.description,o=[...Q(t.head)?t.head:[],...n.head,["title",{},e],["meta",{name:"description",content:r}]];return Tu(o)},resolvePageHeadTitle:(e,t)=>[e.title,t.title].filter(n=>!!n).join(" | "),resolvePageLang:(e,t)=>e.lang||t.lang||"en-US",resolvePageLayout:(e,t)=>{let n;if(e.path){const r=e.frontmatter.layout;me(r)?n=r:n=Hu}else n=Fu;return t[n]},resolveRouteLocale:(e,t)=>ii(e,t),resolveSiteLocaleData:(e,t)=>({...e,...e.locales[t]})}),Do=ue({name:"ClientOnly",setup(e,t){const n=ge(!1);return Je(()=>{n.value=!0}),()=>{var r,o;return n.value?(o=(r=t.slots).default)==null?void 0:o.call(r):null}}}),Bu=ue({name:"Content",props:{pageKey:{type:String,required:!1,default:""}},setup(e){const t=qt(),n=B(()=>ai[e.pageKey||t.value.key]);return()=>n.value?ae(n.value):ae("div","404 Not Found")}}),Nt=(e={})=>e,Ho=e=>Kn(e)?e:`/minigame-canvas-engine/${si(e)}`;function vi(e,t,n){var r,o,l;t===void 0&&(t=50),n===void 0&&(n={});var s=(r=n.isImmediate)!=null&&r,i=(o=n.callback)!=null&&o,a=n.maxWait,c=Date.now(),u=[];function f(){if(a!==void 0){var v=Date.now()-c;if(v+t>=a)return a-v}return t}var d=function(){var v=[].slice.call(arguments),y=this;return new Promise(function(w,C){var g=s&&l===void 0;if(l!==void 0&&clearTimeout(l),l=setTimeout(function(){if(l=void 0,c=Date.now(),!s){var A=e.apply(y,v);i&&i(A),u.forEach(function(S){return(0,S.resolve)(A)}),u=[]}},f()),g){var b=e.apply(y,v);return i&&i(b),w(b)}u.push({resolve:w,reject:C})})};return d.cancel=function(v){l!==void 0&&clearTimeout(l),u.forEach(function(y){return(0,y.reject)(v)}),u=[]},d}/*!
       * vue-router v4.2.5
       * (c) 2023 Eduardo San Martin Morote
       * @license MIT
    diff --git a/assets/bitmapfont.html-04a28794.js b/assets/bitmapfont.html-ac9dbca8.js
    similarity index 97%
    rename from assets/bitmapfont.html-04a28794.js
    rename to assets/bitmapfont.html-ac9dbca8.js
    index f2707949..e333823b 100644
    --- a/assets/bitmapfont.html-04a28794.js
    +++ b/assets/bitmapfont.html-ac9dbca8.js
    @@ -1,4 +1,4 @@
    -import{_ as r,r as n,o,c as i,a as t,b as e,d as a,e as h}from"./app-ea6643d5.js";const l={},c=t("h1",{id:"bitmaptext",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#bitmaptext","aria-hidden":"true"},"#"),e(" BitMapText")],-1),s=t("p",null,"在游戏开发里面,为了更好的视觉效果,经常要将一些常用文字经过设计成图片,然后打包成特殊的字体,称为BitmapFont,基本上所有的游戏引擎都支持了这种技术。",-1),p={href:"https://www.angelcode.com/products/bmfont/",target:"_blank",rel:"noopener noreferrer"},m={href:"/api/api.html#registbitmapfont",target:"_blank",rel:"noopener noreferrer"},u=h('

    特殊样式

    属性类型是否必填说明
    widthNumber文字的容器宽度,当width大于文字实际绘制占据的宽度,textAlign生效
    heightNumber文字的容器高度,当height大于lineHeight,verticalAlign属性生效
    lineHeightNumber渲染文字的行高,默认为配置文件里面的lineHeight
    textAlignString文字水平居中方式,默认left,支持right、center
    verticalAlignString文字垂直居中的方式,默认为middle,支持top和bottom
    letterSpacingNumber字符间距

    示例

    ',3),f=t("iframe",{height:"599.1077270507812",style:{width:"100%"},scrolling:"no",title:"Layout BitMapText",src:"https://codepen.io/yuanzm/embed/LYgGvQm?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},` +import{_ as r,r as n,o,c as i,a as t,b as e,d as a,e as h}from"./app-af1e9e55.js";const l={},c=t("h1",{id:"bitmaptext",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#bitmaptext","aria-hidden":"true"},"#"),e(" BitMapText")],-1),s=t("p",null,"在游戏开发里面,为了更好的视觉效果,经常要将一些常用文字经过设计成图片,然后打包成特殊的字体,称为BitmapFont,基本上所有的游戏引擎都支持了这种技术。",-1),p={href:"https://www.angelcode.com/products/bmfont/",target:"_blank",rel:"noopener noreferrer"},m={href:"/api/api.html#registbitmapfont",target:"_blank",rel:"noopener noreferrer"},u=h('

    特殊样式

    属性类型是否必填说明
    widthNumber文字的容器宽度,当width大于文字实际绘制占据的宽度,textAlign生效
    heightNumber文字的容器高度,当height大于lineHeight,verticalAlign属性生效
    lineHeightNumber渲染文字的行高,默认为配置文件里面的lineHeight
    textAlignString文字水平居中方式,默认left,支持right、center
    verticalAlignString文字垂直居中的方式,默认为middle,支持top和bottom
    letterSpacingNumber字符间距

    示例

    ',3),f=t("iframe",{height:"599.1077270507812",style:{width:"100%"},scrolling:"no",title:"Layout BitMapText",src:"https://codepen.io/yuanzm/embed/LYgGvQm?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},` See the Pen Layout BitMapText by yuanzm (@yuanzm) on CodePen. diff --git a/assets/bitmapfont.html-bedb4f99.js b/assets/bitmapfont.html-fac5369d.js similarity index 84% rename from assets/bitmapfont.html-bedb4f99.js rename to assets/bitmapfont.html-fac5369d.js index 6e424d7e..50e8af2a 100644 --- a/assets/bitmapfont.html-bedb4f99.js +++ b/assets/bitmapfont.html-fac5369d.js @@ -1 +1 @@ -const t=JSON.parse('{"key":"v-262adb4a","path":"/components/bitmapfont.html","title":"BitMapText","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"特殊样式","slug":"特殊样式","link":"#特殊样式","children":[]},{"level":3,"title":"示例","slug":"示例","link":"#示例","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/bitmapfont.md"}');export{t as data}; +const t=JSON.parse('{"key":"v-262adb4a","path":"/components/bitmapfont.html","title":"BitMapText","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"特殊样式","slug":"特殊样式","link":"#特殊样式","children":[]},{"level":3,"title":"示例","slug":"示例","link":"#示例","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/bitmapfont.md"}');export{t as data}; diff --git a/assets/button.html-234102f6.js b/assets/button.html-08c089c7.js similarity index 87% rename from assets/button.html-234102f6.js rename to assets/button.html-08c089c7.js index 8953a2e4..7c986dc6 100644 --- a/assets/button.html-234102f6.js +++ b/assets/button.html-08c089c7.js @@ -1 +1 @@ -const e=JSON.parse('{"key":"v-3bb939a7","path":"/components/button.html","title":"Button","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"特殊属性","slug":"特殊属性","link":"#特殊属性","children":[]},{"level":2,"title":"实例属性","slug":"实例属性","link":"#实例属性","children":[{"level":3,"title":"label","slug":"label","link":"#label","children":[]}]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/button.md"}');export{e as data}; +const e=JSON.parse('{"key":"v-3bb939a7","path":"/components/button.html","title":"Button","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"特殊属性","slug":"特殊属性","link":"#特殊属性","children":[]},{"level":2,"title":"实例属性","slug":"实例属性","link":"#实例属性","children":[{"level":3,"title":"label","slug":"label","link":"#label","children":[]}]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/button.md"}');export{e as data}; diff --git a/assets/button.html-53b14087.js b/assets/button.html-875962e9.js similarity index 99% rename from assets/button.html-53b14087.js rename to assets/button.html-875962e9.js index 07c50331..fa3a764e 100644 --- a/assets/button.html-53b14087.js +++ b/assets/button.html-875962e9.js @@ -1,4 +1,4 @@ -import{_ as n,o as a,c as s,e as t}from"./app-ea6643d5.js";const e={},o=t(`

    Button

    Button 组件是一种常见的需求,当 Button 被点击的时候,自身会有一些状态变化,比如元素会有一定的缩放行为。

    一般的引擎设计,Button 由两部分构成,第一部分是容器,这个容器承载了 Button 的背景色、背景图等内容,第二部分是一个 label,代表 Button 的文本。Layout 同样如此,Button 组件实际上是由一个 View 包裹着 Text 实现的,View 负责背景色和背景图等逻辑的渲染,Text 只关注按钮文案。

    <button id="testButton" value="邀请"></button>
    +import{_ as n,o as a,c as s,e as t}from"./app-af1e9e55.js";const e={},o=t(`

    Button

    Button 组件是一种常见的需求,当 Button 被点击的时候,自身会有一些状态变化,比如元素会有一定的缩放行为。

    一般的引擎设计,Button 由两部分构成,第一部分是容器,这个容器承载了 Button 的背景色、背景图等内容,第二部分是一个 label,代表 Button 的文本。Layout 同样如此,Button 组件实际上是由一个 View 包裹着 Text 实现的,View 负责背景色和背景图等逻辑的渲染,Text 只关注按钮文案。

    <button id="testButton" value="邀请"></button>
     

    当在 xml 声明一个 Button 组件的时候,Layout 实际上做了几个事情:

    1. 创建一个 View 容器,容器样式如下,这是一个绿色背景的矩形,矩形内的元素(即label)会水平和垂直居中。
    {
       width: 300,
       height: 60,
    diff --git a/assets/canvas.html-825a0551.js b/assets/canvas.html-6252f16d.js
    similarity index 99%
    rename from assets/canvas.html-825a0551.js
    rename to assets/canvas.html-6252f16d.js
    index 5190400b..dc05285f 100644
    --- a/assets/canvas.html-825a0551.js
    +++ b/assets/canvas.html-6252f16d.js
    @@ -1,4 +1,4 @@
    -import{_ as e,r as p,o,c,a as n,b as a,d as t,e as l}from"./app-ea6643d5.js";const i={},r=n("h1",{id:"canvas",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#canvas","aria-hidden":"true"},"#"),a(" Canvas")],-1),u={href:"/components/element.html",target:"_blank",rel:"noopener noreferrer"},d={href:"https://github.com/wechat-miniprogram/minigame-canvas-engine/tree/master/demos/noengine",target:"_blank",rel:"noopener noreferrer"},k=l(`

    标签属性

    属性类型是否必填说明
    widthNumbercanvas 画布的尺寸,与样式的尺寸不是一个概念
    heightNumbercanvas 画布的尺寸,与样式的尺寸不是一个概念
    autoCreateCanvasString是否自动创建 canvas,默认为 "false",有些场景如微信小游戏场景,sharedCavans非业务创建,则需要手动设置canvas 实例

    属性

    属性类型说明
    canvasHTMLCanvasElement当标签属性 autoCreateCanvas 为 false 的时候,意味着 canvas 需要手动创建并设置给 Canvas 组件实例

    方法

    update

    Canvas 组件本身只是个容器,并不关心具体的 canvas 画布是不是更新了,需要手动调用 update 方法才能将 canvas 同步到 Layout 画布。

    示例

    <view id="container">
    +import{_ as e,r as p,o,c,a as n,b as a,d as t,e as l}from"./app-af1e9e55.js";const i={},r=n("h1",{id:"canvas",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#canvas","aria-hidden":"true"},"#"),a(" Canvas")],-1),u={href:"/components/element.html",target:"_blank",rel:"noopener noreferrer"},d={href:"https://github.com/wechat-miniprogram/minigame-canvas-engine/tree/master/demos/noengine",target:"_blank",rel:"noopener noreferrer"},k=l(`

    标签属性

    属性类型是否必填说明
    widthNumbercanvas 画布的尺寸,与样式的尺寸不是一个概念
    heightNumbercanvas 画布的尺寸,与样式的尺寸不是一个概念
    autoCreateCanvasString是否自动创建 canvas,默认为 "false",有些场景如微信小游戏场景,sharedCavans非业务创建,则需要手动设置canvas 实例

    属性

    属性类型说明
    canvasHTMLCanvasElement当标签属性 autoCreateCanvas 为 false 的时候,意味着 canvas 需要手动创建并设置给 Canvas 组件实例

    方法

    update

    Canvas 组件本身只是个容器,并不关心具体的 canvas 画布是不是更新了,需要手动调用 update 方法才能将 canvas 同步到 Layout 画布。

    示例

    <view id="container">
       <canvas id="rank" width="300" height="300"></canvas>
     </view>
     
    let style = {
    diff --git a/assets/canvas.html-af48fbc0.js b/assets/canvas.html-e76c842f.js
    similarity index 89%
    rename from assets/canvas.html-af48fbc0.js
    rename to assets/canvas.html-e76c842f.js
    index ad29d2ff..9f7aad63 100644
    --- a/assets/canvas.html-af48fbc0.js
    +++ b/assets/canvas.html-e76c842f.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-34f9d341","path":"/components/canvas.html","title":"Canvas","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"标签属性","slug":"标签属性","link":"#标签属性","children":[]},{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"update","slug":"update","link":"#update","children":[]}]},{"level":2,"title":"示例","slug":"示例","link":"#示例","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/canvas.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-34f9d341","path":"/components/canvas.html","title":"Canvas","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"标签属性","slug":"标签属性","link":"#标签属性","children":[]},{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"update","slug":"update","link":"#update","children":[]}]},{"level":2,"title":"示例","slug":"示例","link":"#示例","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/canvas.md"}');export{e as data};
    diff --git a/assets/cocos2.x.html-9ad9a920.js b/assets/cocos2.x.html-c5d3a370.js
    similarity index 91%
    rename from assets/cocos2.x.html-9ad9a920.js
    rename to assets/cocos2.x.html-c5d3a370.js
    index e33c268e..4acdcaf3 100644
    --- a/assets/cocos2.x.html-9ad9a920.js
    +++ b/assets/cocos2.x.html-c5d3a370.js
    @@ -1 +1 @@
    -const l=JSON.parse('{"key":"v-79802700","path":"/tutorial/cocos2.x.html","title":"cocos2.x版本适配","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"简介","slug":"简介","link":"#简介","children":[]},{"level":2,"title":"适配流程","slug":"适配流程","link":"#适配流程","children":[{"level":3,"title":"1. 项目创建","slug":"_1-项目创建","link":"#_1-项目创建","children":[]},{"level":3,"title":"2. 项目打包","slug":"_2-项目打包","link":"#_2-项目打包","children":[]},{"level":3,"title":"3. 开放数据域工程","slug":"_3-开放数据域工程","link":"#_3-开放数据域工程","children":[]}]}],"git":{"updatedTime":1712821672000},"filePathRelative":"tutorial/cocos2.x.md"}');export{l as data};
    +const l=JSON.parse('{"key":"v-79802700","path":"/tutorial/cocos2.x.html","title":"cocos2.x版本适配","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"简介","slug":"简介","link":"#简介","children":[]},{"level":2,"title":"适配流程","slug":"适配流程","link":"#适配流程","children":[{"level":3,"title":"1. 项目创建","slug":"_1-项目创建","link":"#_1-项目创建","children":[]},{"level":3,"title":"2. 项目打包","slug":"_2-项目打包","link":"#_2-项目打包","children":[]},{"level":3,"title":"3. 开放数据域工程","slug":"_3-开放数据域工程","link":"#_3-开放数据域工程","children":[]}]}],"git":{"updatedTime":1717588138000},"filePathRelative":"tutorial/cocos2.x.md"}');export{l as data};
    diff --git a/assets/cocos2.x.html-d11580bb.js b/assets/cocos2.x.html-ccc307c2.js
    similarity index 99%
    rename from assets/cocos2.x.html-d11580bb.js
    rename to assets/cocos2.x.html-ccc307c2.js
    index 89bb968b..928121a2 100644
    --- a/assets/cocos2.x.html-d11580bb.js
    +++ b/assets/cocos2.x.html-ccc307c2.js
    @@ -1,4 +1,4 @@
    -import{_ as e,r as o,o as p,c,a as n,b as s,d as t,e as i}from"./app-ea6643d5.js";const l="/minigame-canvas-engine/assets/image-1-601832b4.png",u="/minigame-canvas-engine/assets/image-a22b86a3.png",r="/minigame-canvas-engine/assets/image-2-33c0a0cd.png",d={},k=n("h1",{id:"cocos2-x版本适配",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#cocos2-x版本适配","aria-hidden":"true"},"#"),s(" cocos2.x版本适配")],-1),m=n("h2",{id:"简介",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#简介","aria-hidden":"true"},"#"),s(" 简介")],-1),v={href:"https://docs.cocos.com/creator/2.4/manual/zh/publish/publish-wechatgame-sub-domain.html",target:"_blank",rel:"noopener noreferrer"},h=n("code",null,"SubContextView",-1),b={href:"https://docs.cocos.com/creator/manual/zh/editor/publish/build-open-data-context.html",target:"_blank",rel:"noopener noreferrer"},g=i('

    实际上,Cocos Creator 2.x 同样支持使用 Layout 来开发开放数据域,本文详细介绍。

    适配流程

    1. 项目创建

    本文采用 Cocos Creator 2.4.11 版本 ,低版本的处理大同小异。

    示例很简单,添加一个精灵,精灵挂载 SubContextView 组件和 一个自定义脚本(Rank),如下图所示。 Alt text

    挂载了SubContextView组件之后,按照 Cocos 默认的流程,会自动给开放数据域发送几个事件:viewport、boot、frameRate然后开放数据域的 Cocos 工程会根据这些事件做一些处理保证游戏主域和开放数据域配合工作(核心是事件处理)。

    如果使用 Layout 来处理开放数据域,我们忽略这些 Cocos 的事件,通过挂载的自定义脚本来处理。

    const { ccclass, property } = cc._decorator;
    +import{_ as e,r as o,o as p,c,a as n,b as s,d as t,e as i}from"./app-af1e9e55.js";const l="/minigame-canvas-engine/assets/image-1-601832b4.png",u="/minigame-canvas-engine/assets/image-a22b86a3.png",r="/minigame-canvas-engine/assets/image-2-33c0a0cd.png",d={},k=n("h1",{id:"cocos2-x版本适配",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#cocos2-x版本适配","aria-hidden":"true"},"#"),s(" cocos2.x版本适配")],-1),m=n("h2",{id:"简介",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#简介","aria-hidden":"true"},"#"),s(" 简介")],-1),v={href:"https://docs.cocos.com/creator/2.4/manual/zh/publish/publish-wechatgame-sub-domain.html",target:"_blank",rel:"noopener noreferrer"},h=n("code",null,"SubContextView",-1),b={href:"https://docs.cocos.com/creator/manual/zh/editor/publish/build-open-data-context.html",target:"_blank",rel:"noopener noreferrer"},g=i('

    实际上,Cocos Creator 2.x 同样支持使用 Layout 来开发开放数据域,本文详细介绍。

    适配流程

    1. 项目创建

    本文采用 Cocos Creator 2.4.11 版本 ,低版本的处理大同小异。

    示例很简单,添加一个精灵,精灵挂载 SubContextView 组件和 一个自定义脚本(Rank),如下图所示。 Alt text

    挂载了SubContextView组件之后,按照 Cocos 默认的流程,会自动给开放数据域发送几个事件:viewport、boot、frameRate然后开放数据域的 Cocos 工程会根据这些事件做一些处理保证游戏主域和开放数据域配合工作(核心是事件处理)。

    如果使用 Layout 来处理开放数据域,我们忽略这些 Cocos 的事件,通过挂载的自定义脚本来处理。

    const { ccclass, property } = cc._decorator;
     
     @ccclass
     export default class NewClass extends cc.Component {
    diff --git a/assets/element.html-ca33ad4a.js b/assets/element.html-4246a337.js
    similarity index 94%
    rename from assets/element.html-ca33ad4a.js
    rename to assets/element.html-4246a337.js
    index 2c3f74d7..dbd177af 100644
    --- a/assets/element.html-ca33ad4a.js
    +++ b/assets/element.html-4246a337.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-1dbcc69d","path":"/components/element.html","title":"Element","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"xml属性","slug":"xml属性","link":"#xml属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"getElementsById(elementId: string): Element[]","slug":"getelementsbyid-elementid-string-element","link":"#getelementsbyid-elementid-string-element","children":[]},{"level":3,"title":"getElementById","slug":"getelementbyid","link":"#getelementbyid","children":[]},{"level":3,"title":"getElementsByClassName(className: string): Element[]","slug":"getelementsbyclassname-classname-string-element","link":"#getelementsbyclassname-classname-string-element","children":[]},{"level":3,"title":"getBoundingClientRect(): Rect","slug":"getboundingclientrect-rect","link":"#getboundingclientrect-rect","children":[]},{"level":3,"title":"getViewportRect(): Rect","slug":"getviewportrect-rect","link":"#getviewportrect-rect","children":[]},{"level":3,"title":"appendChild(ele: Element)","slug":"appendchild-ele-element","link":"#appendchild-ele-element","children":[]}]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/element.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-1dbcc69d","path":"/components/element.html","title":"Element","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"xml属性","slug":"xml属性","link":"#xml属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"getElementsById(elementId: string): Element[]","slug":"getelementsbyid-elementid-string-element","link":"#getelementsbyid-elementid-string-element","children":[]},{"level":3,"title":"getElementById","slug":"getelementbyid","link":"#getelementbyid","children":[]},{"level":3,"title":"getElementsByClassName(className: string): Element[]","slug":"getelementsbyclassname-classname-string-element","link":"#getelementsbyclassname-classname-string-element","children":[]},{"level":3,"title":"getBoundingClientRect(): Rect","slug":"getboundingclientrect-rect","link":"#getboundingclientrect-rect","children":[]},{"level":3,"title":"getViewportRect(): Rect","slug":"getviewportrect-rect","link":"#getviewportrect-rect","children":[]},{"level":3,"title":"appendChild(ele: Element)","slug":"appendchild-ele-element","link":"#appendchild-ele-element","children":[]}]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/element.md"}');export{e as data};
    diff --git a/assets/element.html-0483780a.js b/assets/element.html-51f0116e.js
    similarity index 99%
    rename from assets/element.html-0483780a.js
    rename to assets/element.html-51f0116e.js
    index 7bb12d22..eeedd2f9 100644
    --- a/assets/element.html-0483780a.js
    +++ b/assets/element.html-51f0116e.js
    @@ -1,4 +1,4 @@
    -import{_ as l,r as c,o as u,c as d,f as o,a as s,b as n,d as a,w as i,e}from"./app-ea6643d5.js";const r={},m=e('

    Element

    Element 是所有组件的基类,Element 描述了所有组件所普遍具有的方法和属性。一些组件继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。

    xml属性

    属性类型说明
    datasetObject标签上通过 data-* 设置的属性会存到 dataset 字段,方便记录一些节点信息
    ',4),k=e(`

    方法

    getElementsById(elementId: string): Element[]

    获取元素id为elementId的一组元素,之所以是一组元素是因为这里 id 的实现没有对齐 Web,id并不是唯一的,只是一个标识。

    // <view id="container"></view>
    +import{_ as l,r as c,o as u,c as d,f as o,a as s,b as n,d as a,w as i,e}from"./app-af1e9e55.js";const r={},m=e('

    Element

    Element 是所有组件的基类,Element 描述了所有组件所普遍具有的方法和属性。一些组件继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。

    xml属性

    属性类型说明
    datasetObject标签上通过 data-* 设置的属性会存到 dataset 字段,方便记录一些节点信息
    ',4),k=e(`

    方法

    getElementsById(elementId: string): Element[]

    获取元素id为elementId的一组元素,之所以是一组元素是因为这里 id 的实现没有对齐 Web,id并不是唯一的,只是一个标识。

    // <view id="container"></view>
     const container = Layout.getElementsById('container')[0];
     

    getElementById

    兼容性

    v1.0.1版本开始支持

    Layout.getElementById(String elementId)

    获取元素id为elementId的第一个节点,id唯一性由业务侧自行保证。

    // <view id="container"></view>
     const container = Layout.getElementById('container');
    diff --git a/assets/guide.html-5d8a4808.js b/assets/guide.html-0f7d6ea3.js
    similarity index 98%
    rename from assets/guide.html-5d8a4808.js
    rename to assets/guide.html-0f7d6ea3.js
    index 11edda8b..72930514 100644
    --- a/assets/guide.html-5d8a4808.js
    +++ b/assets/guide.html-0f7d6ea3.js
    @@ -1,4 +1,4 @@
    -import{_ as n,o as a,c as s,e,a as t}from"./app-ea6643d5.js";const o={},p=e(`

    概览

    随着应用场景变多,不可避免需要新增一些组件来满足需求,而 Layout 设计里面很重要的一个点是轻量,所以提供了插件机制来满足这些场景。

    插件开发

    插件借鉴了 Vue 的设计,对插件能做什么,没什么限制,插件只需要暴露一个 install 方法和 name 即可,Layout.use 方法实现插件的安装。一个最简单的插件示意如下

    const HelloPlugin =  {
    +import{_ as n,o as a,c as s,e,a as t}from"./app-af1e9e55.js";const o={},p=e(`

    概览

    随着应用场景变多,不可避免需要新增一些组件来满足需求,而 Layout 设计里面很重要的一个点是轻量,所以提供了插件机制来满足这些场景。

    插件开发

    插件借鉴了 Vue 的设计,对插件能做什么,没什么限制,插件只需要暴露一个 install 方法和 name 即可,Layout.use 方法实现插件的安装。一个最简单的插件示意如下

    const HelloPlugin =  {
       install(Layout) {
         Layout.sayHello = () => {
           console.log('Hello Layout Plugin');
    diff --git a/assets/guide.html-4f8a027e.js b/assets/guide.html-5bfa5c1a.js
    similarity index 71%
    rename from assets/guide.html-4f8a027e.js
    rename to assets/guide.html-5bfa5c1a.js
    index b1648800..7952862d 100644
    --- a/assets/guide.html-4f8a027e.js
    +++ b/assets/guide.html-5bfa5c1a.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-785ab5e0","path":"/plugin/guide.html","title":"概览","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1712821672000},"filePathRelative":"plugin/guide.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-785ab5e0","path":"/plugin/guide.html","title":"概览","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1717588138000},"filePathRelative":"plugin/guide.md"}');export{e as data};
    diff --git a/assets/guide.html-3d8ab861.js b/assets/guide.html-93b55473.js
    similarity index 99%
    rename from assets/guide.html-3d8ab861.js
    rename to assets/guide.html-93b55473.js
    index 3b59bb62..04604fcc 100644
    --- a/assets/guide.html-3d8ab861.js
    +++ b/assets/guide.html-93b55473.js
    @@ -1,4 +1,4 @@
    -import{_ as o,r as l,o as i,c,a as n,b as s,d as t,e}from"./app-ea6643d5.js";const r={},u=e(`

    快速入门

    安装

    # npm安装方式
    +import{_ as o,r as l,o as i,c,a as n,b as s,d as t,e}from"./app-af1e9e55.js";const r={},u=e(`

    快速入门

    安装

    # npm安装方式
     npm install minigame-canvas-engine --save
     

    极简示例

    1. 引用渲染引擎:
    import Layout from "minigame-canvas-engine";
     
    `,6),d={start:"2"},k={href:"https://olado.github.io/doT/index.html",target:"_blank",rel:"noopener noreferrer"},v={href:"https://www.runoob.com/css/css-tutorial.html",target:"_blank",rel:"noopener noreferrer"},m={href:"https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html",target:"_blank",rel:"noopener noreferrer"},b=e(`
    let template = \`
    diff --git a/assets/guide.html-32f4aad3.js b/assets/guide.html-ab7db34f.js
    similarity index 84%
    rename from assets/guide.html-32f4aad3.js
    rename to assets/guide.html-ab7db34f.js
    index 1080a220..e49aa8fe 100644
    --- a/assets/guide.html-32f4aad3.js
    +++ b/assets/guide.html-ab7db34f.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-3d4ac21a","path":"/overview/guide.html","title":"快速入门","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"极简示例","slug":"极简示例","link":"#极简示例","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"overview/guide.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-3d4ac21a","path":"/overview/guide.html","title":"快速入门","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"安装","slug":"安装","link":"#安装","children":[]},{"level":2,"title":"极简示例","slug":"极简示例","link":"#极简示例","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"overview/guide.md"}');export{e as data};
    diff --git a/assets/image.html-af226794.js b/assets/image.html-30863611.js
    similarity index 84%
    rename from assets/image.html-af226794.js
    rename to assets/image.html-30863611.js
    index 49a2e2ee..ad51be4e 100644
    --- a/assets/image.html-af226794.js
    +++ b/assets/image.html-30863611.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-d82ea0c4","path":"/components/image.html","title":"Image","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"特殊属性","slug":"特殊属性","link":"#特殊属性","children":[]},{"level":2,"title":"示例","slug":"示例","link":"#示例","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/image.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-d82ea0c4","path":"/components/image.html","title":"Image","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"特殊属性","slug":"特殊属性","link":"#特殊属性","children":[]},{"level":2,"title":"示例","slug":"示例","link":"#示例","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/image.md"}');export{e as data};
    diff --git a/assets/image.html-070cbf15.js b/assets/image.html-aa40003e.js
    similarity index 96%
    rename from assets/image.html-070cbf15.js
    rename to assets/image.html-aa40003e.js
    index d0cec66b..49e91d27 100644
    --- a/assets/image.html-070cbf15.js
    +++ b/assets/image.html-aa40003e.js
    @@ -1,4 +1,4 @@
    -import{_ as o,r,o as s,c as d,a as e,b as t,d as n,e as c}from"./app-ea6643d5.js";const h={},i=e("h1",{id:"image",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#image","aria-hidden":"true"},"#"),t(" Image")],-1),l={href:"/components/element.html",target:"_blank",rel:"noopener noreferrer"},m=c('

    特殊属性

    属性类型是否必填说明
    srcstring图片链接, 修改图片的src属性会自动请求新的图片并渲染
    ',2),_={class:"custom-container tip"},p=e("p",{class:"custom-container-title"},"TIP",-1),u=e("p",null,"1.小游戏开放数据域场景图片路径不需要加./作为前缀,以小游戏根目录作为根目录;",-1),f={href:"/api/api.html#loadimgs",target:"_blank",rel:"noopener noreferrer"},b=e("h2",{id:"示例",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#示例","aria-hidden":"true"},"#"),t(" 示例")],-1),g=e("iframe",{height:"596.1451416015625",style:{width:"100%"},scrolling:"no",title:"Layout Image",src:"https://codepen.io/yuanzm/embed/NWOxmLG?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},` +import{_ as o,r,o as s,c as d,a as e,b as t,d as n,e as c}from"./app-af1e9e55.js";const h={},i=e("h1",{id:"image",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#image","aria-hidden":"true"},"#"),t(" Image")],-1),l={href:"/components/element.html",target:"_blank",rel:"noopener noreferrer"},m=c('

    特殊属性

    属性类型是否必填说明
    srcstring图片链接, 修改图片的src属性会自动请求新的图片并渲染
    ',2),_={class:"custom-container tip"},p=e("p",{class:"custom-container-title"},"TIP",-1),u=e("p",null,"1.小游戏开放数据域场景图片路径不需要加./作为前缀,以小游戏根目录作为根目录;",-1),f={href:"/api/api.html#loadimgs",target:"_blank",rel:"noopener noreferrer"},b=e("h2",{id:"示例",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#示例","aria-hidden":"true"},"#"),t(" 示例")],-1),g=e("iframe",{height:"596.1451416015625",style:{width:"100%"},scrolling:"no",title:"Layout Image",src:"https://codepen.io/yuanzm/embed/NWOxmLG?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},` See the Pen Layout Image by yuanzm (@yuanzm) on CodePen. diff --git a/assets/index.html-97c40830.js b/assets/index.html-34929b9c.js similarity index 80% rename from assets/index.html-97c40830.js rename to assets/index.html-34929b9c.js index e4daaee1..eb868d80 100644 --- a/assets/index.html-97c40830.js +++ b/assets/index.html-34929b9c.js @@ -1 +1 @@ -const e=JSON.parse('{"key":"v-8daa1a0e","path":"/","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"简介","slug":"简介","link":"#简介","children":[]},{"level":2,"title":"web端调试","slug":"web端调试","link":"#web端调试","children":[]},{"level":2,"title":"效果预览","slug":"效果预览","link":"#效果预览","children":[]},{"level":2,"title":"谁在使用","slug":"谁在使用","link":"#谁在使用","children":[]},{"level":2,"title":"交流群","slug":"交流群","link":"#交流群","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"README.md"}');export{e as data}; +const e=JSON.parse('{"key":"v-8daa1a0e","path":"/","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"简介","slug":"简介","link":"#简介","children":[]},{"level":2,"title":"web端调试","slug":"web端调试","link":"#web端调试","children":[]},{"level":2,"title":"效果预览","slug":"效果预览","link":"#效果预览","children":[]},{"level":2,"title":"谁在使用","slug":"谁在使用","link":"#谁在使用","children":[]},{"level":2,"title":"交流群","slug":"交流群","link":"#交流群","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"README.md"}');export{e as data}; diff --git a/assets/index.html-760218d7.js b/assets/index.html-70f8fc8c.js similarity index 98% rename from assets/index.html-760218d7.js rename to assets/index.html-70f8fc8c.js index 861340e3..9a88e13b 100644 --- a/assets/index.html-760218d7.js +++ b/assets/index.html-70f8fc8c.js @@ -1 +1 @@ -import{_ as o,r,o as i,c as h,a as e,b as n,d as s,e as c}from"./app-ea6643d5.js";const d={},l=c('

    简介

    当我们开发一个canvas应用的时候,出于效率的考量,免不了要选择一个渲染引擎(比如PixiJS)或者工具链更完备的游戏引擎(比如Cocos CreatorLayabox)。

    渲染引擎通常会有Sprite的概念,一个完整的界面会由很多的Sprite组成,如果编写复杂一点的界面,代码里面会充斥创建精灵、设置精灵位置和样式的“重复代码”,最终我们得到了极致的渲染性能却牺牲了代码的可读性。

    为了解决这个问题,游戏引擎通常会有配套的IDE,界面通过拖拽即可生成,最终导出场景配置文件,这大大方便了UI开发,但是游戏引擎一般都很庞大,有时候我们仅仅想开发个好友排行榜。

    如果有一款渲染引擎,既能用配置文件的方式来表达界面,又可以做到轻量级,将会大大满足我们开发轻量级 canvas 应用的场景,minigame-canvas-engine 应运而生(后面简称 Layout )

    Layout 的目标在于用 Web 的开发方式来开发简单的 Canvas 应用。

    ',6),p={href:"https://segmentfault.com/a/1190000021297495?_ea=27021986",target:"_blank",rel:"noopener noreferrer"},g=e("h2",{id:"web端调试",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#web端调试","aria-hidden":"true"},"#"),n(" web端调试")],-1),_={href:"https://codepen.io/pen?template=VwEeLKw",target:"_blank",rel:"noopener noreferrer"},m={href:"https://wechat-miniprogram.github.io/minigame-canvas-engine/playground.html",target:"_blank",rel:"noopener noreferrer"},u=e("h2",{id:"效果预览",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#效果预览","aria-hidden":"true"},"#"),n(" 效果预览")],-1),f=["src"],w=e("h2",{id:"谁在使用",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#谁在使用","aria-hidden":"true"},"#"),n(" 谁在使用")],-1),b=e("p",null,"目前在微信小游戏平台已经超过1000+游戏使用 Layout 来开发开放数据域能力。",-1),B=["src"],L=["src"],k=["src"],v=["src"],x=["src"],y=e("h2",{id:"交流群",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#交流群","aria-hidden":"true"},"#"),n(" 交流群")],-1),$={href:"https://codepen.io/pen?template=VwEeLKw",target:"_blank",rel:"noopener noreferrer"},E=["src"];function V(t,j){const a=r("ExternalLinkIcon");return i(),h("div",null,[l,e("p",null,[n("有兴趣可以查看详细原理介绍"),e("a",p,[n("文章"),s(a)]),n("。")]),g,e("p",null,[n("为了方便调试,可以基于 codepen "),e("a",_,[n("模板"),s(a)]),n(" 构建demo,旧版本"),e("a",m,[n("Playground"),s(a)]),n("已不再维护。")]),u,e("img",{src:t.$withBase("/imgs/screenshot.gif"),width:"300"},null,8,f),w,b,e("p",null,[e("img",{src:t.$withBase("/imgs/demo.png"),width:"120"},null,8,B),n(),e("img",{src:t.$withBase("/imgs/ditiepaoku.png"),width:"120"},null,8,L),n(),e("img",{src:t.$withBase("/imgs/dazhanggui.jpeg"),width:"120"},null,8,k),n(),e("img",{src:t.$withBase("/imgs/jiuchongshilian.jpeg"),width:"120"},null,8,v),n(),e("img",{src:t.$withBase("/imgs/lvxingchuanchuan.jpeg"),width:"120"},null,8,x)]),y,e("p",null,[n("如果遇到 Layout 是用上的问题或者有合理的需求想要支持,欢迎加入 Layout 交流QQ群探讨,如需反馈问题,请基于 codepen "),e("a",$,[n("模板"),s(a)]),n(" 构建可复现问题的最小demo。")]),e("img",{src:t.$withBase("/imgs/qq.jpg"),width:"200"},null,8,E)])}const I=o(d,[["render",V],["__file","index.html.vue"]]);export{I as default}; +import{_ as o,r,o as i,c as h,a as e,b as n,d as s,e as c}from"./app-af1e9e55.js";const d={},l=c('

    简介

    当我们开发一个canvas应用的时候,出于效率的考量,免不了要选择一个渲染引擎(比如PixiJS)或者工具链更完备的游戏引擎(比如Cocos CreatorLayabox)。

    渲染引擎通常会有Sprite的概念,一个完整的界面会由很多的Sprite组成,如果编写复杂一点的界面,代码里面会充斥创建精灵、设置精灵位置和样式的“重复代码”,最终我们得到了极致的渲染性能却牺牲了代码的可读性。

    为了解决这个问题,游戏引擎通常会有配套的IDE,界面通过拖拽即可生成,最终导出场景配置文件,这大大方便了UI开发,但是游戏引擎一般都很庞大,有时候我们仅仅想开发个好友排行榜。

    如果有一款渲染引擎,既能用配置文件的方式来表达界面,又可以做到轻量级,将会大大满足我们开发轻量级 canvas 应用的场景,minigame-canvas-engine 应运而生(后面简称 Layout )

    Layout 的目标在于用 Web 的开发方式来开发简单的 Canvas 应用。

    ',6),p={href:"https://segmentfault.com/a/1190000021297495?_ea=27021986",target:"_blank",rel:"noopener noreferrer"},g=e("h2",{id:"web端调试",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#web端调试","aria-hidden":"true"},"#"),n(" web端调试")],-1),_={href:"https://codepen.io/pen?template=VwEeLKw",target:"_blank",rel:"noopener noreferrer"},m={href:"https://wechat-miniprogram.github.io/minigame-canvas-engine/playground.html",target:"_blank",rel:"noopener noreferrer"},u=e("h2",{id:"效果预览",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#效果预览","aria-hidden":"true"},"#"),n(" 效果预览")],-1),f=["src"],w=e("h2",{id:"谁在使用",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#谁在使用","aria-hidden":"true"},"#"),n(" 谁在使用")],-1),b=e("p",null,"目前在微信小游戏平台已经超过1000+游戏使用 Layout 来开发开放数据域能力。",-1),B=["src"],L=["src"],k=["src"],v=["src"],x=["src"],y=e("h2",{id:"交流群",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#交流群","aria-hidden":"true"},"#"),n(" 交流群")],-1),$={href:"https://codepen.io/pen?template=VwEeLKw",target:"_blank",rel:"noopener noreferrer"},E=["src"];function V(t,j){const a=r("ExternalLinkIcon");return i(),h("div",null,[l,e("p",null,[n("有兴趣可以查看详细原理介绍"),e("a",p,[n("文章"),s(a)]),n("。")]),g,e("p",null,[n("为了方便调试,可以基于 codepen "),e("a",_,[n("模板"),s(a)]),n(" 构建demo,旧版本"),e("a",m,[n("Playground"),s(a)]),n("已不再维护。")]),u,e("img",{src:t.$withBase("/imgs/screenshot.gif"),width:"300"},null,8,f),w,b,e("p",null,[e("img",{src:t.$withBase("/imgs/demo.png"),width:"120"},null,8,B),n(),e("img",{src:t.$withBase("/imgs/ditiepaoku.png"),width:"120"},null,8,L),n(),e("img",{src:t.$withBase("/imgs/dazhanggui.jpeg"),width:"120"},null,8,k),n(),e("img",{src:t.$withBase("/imgs/jiuchongshilian.jpeg"),width:"120"},null,8,v),n(),e("img",{src:t.$withBase("/imgs/lvxingchuanchuan.jpeg"),width:"120"},null,8,x)]),y,e("p",null,[n("如果遇到 Layout 是用上的问题或者有合理的需求想要支持,欢迎加入 Layout 交流QQ群探讨,如需反馈问题,请基于 codepen "),e("a",$,[n("模板"),s(a)]),n(" 构建可复现问题的最小demo。")]),e("img",{src:t.$withBase("/imgs/qq.jpg"),width:"200"},null,8,E)])}const I=o(d,[["render",V],["__file","index.html.vue"]]);export{I as default}; diff --git a/assets/invite.html-e6964095.js b/assets/invite.html-f4d87430.js similarity index 94% rename from assets/invite.html-e6964095.js rename to assets/invite.html-f4d87430.js index 9c88df9c..c21408df 100644 --- a/assets/invite.html-e6964095.js +++ b/assets/invite.html-f4d87430.js @@ -1,4 +1,4 @@ -import{_ as a,r as o,o as r,c as i,a as e,b as t,d as l}from"./app-ea6643d5.js";const s={},c=e("h1",{id:"邀请好友组件",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#邀请好友组件","aria-hidden":"true"},"#"),t(" 邀请好友组件")],-1),d={href:"https://developers.weixin.qq.com/minigame/dev/guide/open-ability/open-data.html",target:"_blank",rel:"noopener noreferrer"},h=e("iframe",{height:"595.4384155273438",style:{width:"100%"},scrolling:"no",title:"Layout Invite Demo",src:"https://codepen.io/yuanzm/embed/QWZNQNG?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},` +import{_ as a,r as o,o as r,c as i,a as e,b as t,d as l}from"./app-af1e9e55.js";const s={},c=e("h1",{id:"邀请好友组件",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#邀请好友组件","aria-hidden":"true"},"#"),t(" 邀请好友组件")],-1),d={href:"https://developers.weixin.qq.com/minigame/dev/guide/open-ability/open-data.html",target:"_blank",rel:"noopener noreferrer"},h=e("iframe",{height:"595.4384155273438",style:{width:"100%"},scrolling:"no",title:"Layout Invite Demo",src:"https://codepen.io/yuanzm/embed/QWZNQNG?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},` See the Pen Layout Invite Demo by yuanzm (@yuanzm) on CodePen. diff --git a/assets/invite.html-aeee0b2c.js b/assets/invite.html-fd5c2c95.js similarity index 72% rename from assets/invite.html-aeee0b2c.js rename to assets/invite.html-fd5c2c95.js index f4e6f06d..e5d6f804 100644 --- a/assets/invite.html-aeee0b2c.js +++ b/assets/invite.html-fd5c2c95.js @@ -1 +1 @@ -const e=JSON.parse('{"key":"v-7e5b80f8","path":"/demos/invite.html","title":"邀请好友组件","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1712821672000},"filePathRelative":"demos/invite.md"}');export{e as data}; +const e=JSON.parse('{"key":"v-7e5b80f8","path":"/demos/invite.html","title":"邀请好友组件","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1717588138000},"filePathRelative":"demos/invite.md"}');export{e as data}; diff --git a/assets/loading.html-265b11a1.js b/assets/loading.html-0ed1c6e9.js similarity index 99% rename from assets/loading.html-265b11a1.js rename to assets/loading.html-0ed1c6e9.js index cf41659a..9e645a63 100644 --- a/assets/loading.html-265b11a1.js +++ b/assets/loading.html-0ed1c6e9.js @@ -1,4 +1,4 @@ -import{_ as s,o as a,c as t,e as n,a as p}from"./app-ea6643d5.js";const e={},o=n(`

    加载中效果实现

    简介

    在小游戏开放数据域场景下,需要异步加载好友数据然后渲染,由于开放数据域加载成功事件并不能抛给游戏主域,所以并不能实现游戏主域播放加载动画然后在开放数据域加载完成后隐藏加载动画,因此,只能在开放数据域实现简单的加载动画。

    实际上,借助 Layout 的 transform 样式属性,实现简单的加载中效果并不难,本文介绍如何实现简单的加载中效果。

    兼容性

    v1.0.5版本开始支持 transform。

    完整流程

    布局和样式编写

    布局非常简单,只需要新建个容器,容器内有个静态图片,图片居中展示。

    <view id="container">
    +import{_ as s,o as a,c as t,e as n,a as p}from"./app-af1e9e55.js";const e={},o=n(`

    加载中效果实现

    简介

    在小游戏开放数据域场景下,需要异步加载好友数据然后渲染,由于开放数据域加载成功事件并不能抛给游戏主域,所以并不能实现游戏主域播放加载动画然后在开放数据域加载完成后隐藏加载动画,因此,只能在开放数据域实现简单的加载动画。

    实际上,借助 Layout 的 transform 样式属性,实现简单的加载中效果并不难,本文介绍如何实现简单的加载中效果。

    兼容性

    v1.0.5版本开始支持 transform。

    完整流程

    布局和样式编写

    布局非常简单,只需要新建个容器,容器内有个静态图片,图片居中展示。

    <view id="container">
       <image src="https://mmgame.qpic.cn/image/3d1e23022b2ffe0a5dc046c10428d5826c383042d8e993706fa1d630aa3917fd/0" id="loading"></image>
     </view>
     
    let style = {
    diff --git a/assets/loading.html-e77055cb.js b/assets/loading.html-8102ceb9.js
    similarity index 92%
    rename from assets/loading.html-e77055cb.js
    rename to assets/loading.html-8102ceb9.js
    index 394dfee9..c2983b9e 100644
    --- a/assets/loading.html-e77055cb.js
    +++ b/assets/loading.html-8102ceb9.js
    @@ -1 +1 @@
    -const l=JSON.parse('{"key":"v-b00cf256","path":"/tutorial/loading.html","title":"加载中效果实现","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"简介","slug":"简介","link":"#简介","children":[]},{"level":2,"title":"完整流程","slug":"完整流程","link":"#完整流程","children":[{"level":3,"title":"布局和样式编写","slug":"布局和样式编写","link":"#布局和样式编写","children":[]},{"level":3,"title":"实现图片的每帧旋转","slug":"实现图片的每帧旋转","link":"#实现图片的每帧旋转","children":[]},{"level":3,"title":"在线示例","slug":"在线示例","link":"#在线示例","children":[]},{"level":3,"title":"函数封装","slug":"函数封装","link":"#函数封装","children":[]}]}],"git":{"updatedTime":1712821672000},"filePathRelative":"tutorial/loading.md"}');export{l as data};
    +const l=JSON.parse('{"key":"v-b00cf256","path":"/tutorial/loading.html","title":"加载中效果实现","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"简介","slug":"简介","link":"#简介","children":[]},{"level":2,"title":"完整流程","slug":"完整流程","link":"#完整流程","children":[{"level":3,"title":"布局和样式编写","slug":"布局和样式编写","link":"#布局和样式编写","children":[]},{"level":3,"title":"实现图片的每帧旋转","slug":"实现图片的每帧旋转","link":"#实现图片的每帧旋转","children":[]},{"level":3,"title":"在线示例","slug":"在线示例","link":"#在线示例","children":[]},{"level":3,"title":"函数封装","slug":"函数封装","link":"#函数封装","children":[]}]}],"git":{"updatedTime":1717588138000},"filePathRelative":"tutorial/loading.md"}');export{l as data};
    diff --git a/assets/overview.html-4ce55a1a.js b/assets/overview.html-4039f849.js
    similarity index 99%
    rename from assets/overview.html-4ce55a1a.js
    rename to assets/overview.html-4039f849.js
    index cf26b2c2..0abd8683 100644
    --- a/assets/overview.html-4ce55a1a.js
    +++ b/assets/overview.html-4039f849.js
    @@ -1,4 +1,4 @@
    -import{_ as d,r,o,c as l,a as t,b as n,d as s,e}from"./app-ea6643d5.js";const i={},p=e('

    布局和样式

    标签

    Layout 通过 xml 组织布局,Layout 支持的标签列表如下。

    标签说明
    view容器标签,与 HTML 中的 div 相似
    scrollview滚动列表容器
    image图片标签
    text文本标签
    bitmaptextbitmapfont 文本标签
    canvas对齐 Web,允许获取 context 执行渲染

    属性

    属性是给标签提供的附加信息,每个标签都会通过属性来支持一些特有的功能,下面列举所有标签都会有的属性。

    ',6),c=t("thead",null,[t("tr",null,[t("th",null,"属性"),t("th",null,"类型"),t("th",null,"是否必填"),t("th",null,"说明")])],-1),u=t("tr",null,[t("td",null,"id"),t("td",null,"string"),t("td",null,"否"),t("td",null,[n("非唯一标识,两个标签可以共用 id,可以通过 "),t("strong",null,"Layout.getElementsById"),n(" 获取到元素实例")])],-1),h=t("tr",null,[t("td",null,"class"),t("td",null,"string"),t("td",null,"否"),t("td",null,"与浏览器相同")],-1),b=t("td",null,"dataset",-1),m=t("td",null,"string",-1),g=t("td",null,"否",-1),v={href:"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset",target:"_blank",rel:"noopener noreferrer"},k=e(`

    样式

    下面列举 Layout 支持的样式属性。

    布局

    支持的标签:viewscrollviewimagetextbitmaptextcanvas

    属性名支持的值或类型默认值
    width, heightnumber/string(百分比场景,如 100%)0
    minWidth, minHeightnumber/string(百分比场景,如 100%)0
    left, right, top, bottomnumber0
    margin, marginLeft, marginRight, marginTop, marginBottomnumber0
    padding, paddingLeft, paddingRight, paddingTop, paddingBottomnumber0
    borderWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidthnumber0
    flexDirectioncolumn, rowcolumn
    flexShrinknumber1
    flexGrownumber
    flexWrapwrap, nowrapnowrap
    flexnumber
    justifyContentflex-start, center, flex-end, space-between, space-aroundflex-start
    alignItems, alignSelfflex-start, center, flex-end, stretchflex-start
    positionrelative, absoluterelative

    伪类

    用来添加一些选择器的特殊效果,目前仅支持最场景的 :active 场景,后续会试场景补充。

    属性名支持的值或类型说明
    ':active'Object(v1.0.9开始支持),当节点触发 'touchstart' 事件的时候触发

    如下所示,当元素被点击的时候,元素会放大,当点击结束,元素又会重置会原样,这对实现按钮特性的时候尤为有用,不需要单独给按钮绑定点击事件手动对元素进行缩放和重置。

    {
    +import{_ as d,r,o,c as l,a as t,b as n,d as s,e}from"./app-af1e9e55.js";const i={},p=e('

    布局和样式

    标签

    Layout 通过 xml 组织布局,Layout 支持的标签列表如下。

    标签说明
    view容器标签,与 HTML 中的 div 相似
    scrollview滚动列表容器
    image图片标签
    text文本标签
    bitmaptextbitmapfont 文本标签
    canvas对齐 Web,允许获取 context 执行渲染

    属性

    属性是给标签提供的附加信息,每个标签都会通过属性来支持一些特有的功能,下面列举所有标签都会有的属性。

    ',6),c=t("thead",null,[t("tr",null,[t("th",null,"属性"),t("th",null,"类型"),t("th",null,"是否必填"),t("th",null,"说明")])],-1),u=t("tr",null,[t("td",null,"id"),t("td",null,"string"),t("td",null,"否"),t("td",null,[n("非唯一标识,两个标签可以共用 id,可以通过 "),t("strong",null,"Layout.getElementsById"),n(" 获取到元素实例")])],-1),h=t("tr",null,[t("td",null,"class"),t("td",null,"string"),t("td",null,"否"),t("td",null,"与浏览器相同")],-1),b=t("td",null,"dataset",-1),m=t("td",null,"string",-1),g=t("td",null,"否",-1),v={href:"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset",target:"_blank",rel:"noopener noreferrer"},k=e(`

    样式

    下面列举 Layout 支持的样式属性。

    布局

    支持的标签:viewscrollviewimagetextbitmaptextcanvas

    属性名支持的值或类型默认值
    width, heightnumber/string(百分比场景,如 100%)0
    minWidth, minHeightnumber/string(百分比场景,如 100%)0
    left, right, top, bottomnumber0
    margin, marginLeft, marginRight, marginTop, marginBottomnumber0
    padding, paddingLeft, paddingRight, paddingTop, paddingBottomnumber0
    borderWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidthnumber0
    flexDirectioncolumn, rowcolumn
    flexShrinknumber1
    flexGrownumber
    flexWrapwrap, nowrapnowrap
    flexnumber
    justifyContentflex-start, center, flex-end, space-between, space-aroundflex-start
    alignItems, alignSelfflex-start, center, flex-end, stretchflex-start
    positionrelative, absoluterelative

    伪类

    用来添加一些选择器的特殊效果,目前仅支持最场景的 :active 场景,后续会试场景补充。

    属性名支持的值或类型说明
    ':active'Object(v1.0.9开始支持),当节点触发 'touchstart' 事件的时候触发

    如下所示,当元素被点击的时候,元素会放大,当点击结束,元素又会重置会原样,这对实现按钮特性的时候尤为有用,不需要单独给按钮绑定点击事件手动对元素进行缩放和重置。

    {
       color: '#ffffff',
       backgroundColor: '#34a123',
       borderRadius: 10,
    diff --git a/assets/overview.html-db387343.js b/assets/overview.html-7794e747.js
    similarity index 93%
    rename from assets/overview.html-db387343.js
    rename to assets/overview.html-7794e747.js
    index 09e22093..3465d0ce 100644
    --- a/assets/overview.html-db387343.js
    +++ b/assets/overview.html-7794e747.js
    @@ -1 +1 @@
    -const l=JSON.parse('{"key":"v-2e5d17c0","path":"/components/overview.html","title":"布局和样式","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"标签","slug":"标签","link":"#标签","children":[]},{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"样式","slug":"样式","link":"#样式","children":[{"level":3,"title":"布局","slug":"布局","link":"#布局","children":[]},{"level":3,"title":"伪类","slug":"伪类","link":"#伪类","children":[]},{"level":3,"title":"文本","slug":"文本","link":"#文本","children":[]},{"level":3,"title":"容器","slug":"容器","link":"#容器","children":[]},{"level":3,"title":"边框","slug":"边框","link":"#边框","children":[]},{"level":3,"title":"默认样式","slug":"默认样式","link":"#默认样式","children":[]}]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/overview.md"}');export{l as data};
    +const l=JSON.parse('{"key":"v-2e5d17c0","path":"/components/overview.html","title":"布局和样式","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"标签","slug":"标签","link":"#标签","children":[]},{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"样式","slug":"样式","link":"#样式","children":[{"level":3,"title":"布局","slug":"布局","link":"#布局","children":[]},{"level":3,"title":"伪类","slug":"伪类","link":"#伪类","children":[]},{"level":3,"title":"文本","slug":"文本","link":"#文本","children":[]},{"level":3,"title":"容器","slug":"容器","link":"#容器","children":[]},{"level":3,"title":"边框","slug":"边框","link":"#边框","children":[]},{"level":3,"title":"默认样式","slug":"默认样式","link":"#默认样式","children":[]}]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/overview.md"}');export{l as data};
    diff --git a/assets/platform.html-0dcd3617.js b/assets/platform.html-09de90c2.js
    similarity index 67%
    rename from assets/platform.html-0dcd3617.js
    rename to assets/platform.html-09de90c2.js
    index 52470a5b..2cba1259 100644
    --- a/assets/platform.html-0dcd3617.js
    +++ b/assets/platform.html-09de90c2.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-cfeec4e4","path":"/tutorial/platform.html","title":"平台适配","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"原理","slug":"原理","link":"#原理","children":[]},{"level":2,"title":"示例","slug":"示例","link":"#示例","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"tutorial/platform.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-cfeec4e4","path":"/tutorial/platform.html","title":"平台适配","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"原理","slug":"原理","link":"#原理","children":[]},{"level":2,"title":"示例","slug":"示例","link":"#示例","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"tutorial/platform.md"}');export{e as data};
    diff --git a/assets/platform.html-fb530028.js b/assets/platform.html-a0d12aa4.js
    similarity index 99%
    rename from assets/platform.html-fb530028.js
    rename to assets/platform.html-a0d12aa4.js
    index e18049c7..6b7ddf4a 100644
    --- a/assets/platform.html-fb530028.js
    +++ b/assets/platform.html-a0d12aa4.js
    @@ -1,4 +1,4 @@
    -import{_ as n,o as s,c as a,e as t}from"./app-ea6643d5.js";const p={},e=t(`

    平台适配

    Layout 最开始设计出来是为了提升微信小游戏开放数据域开发效率,但现在 Layout 已经被用到各种各样的小游戏平台,作为轻量级 Canvas 应用的解决方案。

    对于渲染引擎,一定会依赖平台的能力,比如创建图片、监听事件等,一般引擎的解决方案是主动适配主要运行平台,比如适配浏览器和微信小游戏。Layout 同样如此,目前已经适配了 浏览器、微信小游戏、字节小游戏和百度小游戏平台,但如果一个全新的平台想要使用 Layout,无需更改 Layout 源码,同样可以进行适配,下面进行简单的介绍。

    原理

    Layout 对于平台环境的依赖并不多,主要是事件监听、图片创建等,所有平台相关的依赖都被封装到 env 模块,它非常精简,代码如下:

    import { Callback } from "./types";
    +import{_ as n,o as s,c as a,e as t}from"./app-af1e9e55.js";const p={},e=t(`

    平台适配

    Layout 最开始设计出来是为了提升微信小游戏开放数据域开发效率,但现在 Layout 已经被用到各种各样的小游戏平台,作为轻量级 Canvas 应用的解决方案。

    对于渲染引擎,一定会依赖平台的能力,比如创建图片、监听事件等,一般引擎的解决方案是主动适配主要运行平台,比如适配浏览器和微信小游戏。Layout 同样如此,目前已经适配了 浏览器、微信小游戏、字节小游戏和百度小游戏平台,但如果一个全新的平台想要使用 Layout,无需更改 Layout 源码,同样可以进行适配,下面进行简单的介绍。

    原理

    Layout 对于平台环境的依赖并不多,主要是事件监听、图片创建等,所有平台相关的依赖都被封装到 env 模块,它非常精简,代码如下:

    import { Callback } from "./types";
     
     if (typeof GameGlobal !== 'undefined') {
       GameGlobal.__env = GameGlobal.wx || GameGlobal.tt || GameGlobal.swan;
    diff --git a/assets/plugin.html-30cccd24.js b/assets/plugin.html-232641d3.js
    similarity index 92%
    rename from assets/plugin.html-30cccd24.js
    rename to assets/plugin.html-232641d3.js
    index 257d1438..ee6f543c 100644
    --- a/assets/plugin.html-30cccd24.js
    +++ b/assets/plugin.html-232641d3.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-79f3f269","path":"/overview/plugin.html","title":"微信小游戏插件","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"安装使用","slug":"安装使用","link":"#安装使用","children":[{"level":3,"title":"开放数据域引用","slug":"开放数据域引用","link":"#开放数据域引用","children":[]},{"level":3,"title":"在游戏域引用","slug":"在游戏域引用","link":"#在游戏域引用","children":[]},{"level":3,"title":"同时在游戏域和开放数据域使用","slug":"同时在游戏域和开放数据域使用","link":"#同时在游戏域和开放数据域使用","children":[]}]},{"level":2,"title":"版本列表","slug":"版本列表","link":"#版本列表","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"overview/plugin.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-79f3f269","path":"/overview/plugin.html","title":"微信小游戏插件","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"安装使用","slug":"安装使用","link":"#安装使用","children":[{"level":3,"title":"开放数据域引用","slug":"开放数据域引用","link":"#开放数据域引用","children":[]},{"level":3,"title":"在游戏域引用","slug":"在游戏域引用","link":"#在游戏域引用","children":[]},{"level":3,"title":"同时在游戏域和开放数据域使用","slug":"同时在游戏域和开放数据域使用","link":"#同时在游戏域和开放数据域使用","children":[]}]},{"level":2,"title":"版本列表","slug":"版本列表","link":"#版本列表","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"overview/plugin.md"}');export{e as data};
    diff --git a/assets/plugin.html-b20bb174.js b/assets/plugin.html-9a42a6e6.js
    similarity index 99%
    rename from assets/plugin.html-b20bb174.js
    rename to assets/plugin.html-9a42a6e6.js
    index 5a4b696b..d784e69f 100644
    --- a/assets/plugin.html-b20bb174.js
    +++ b/assets/plugin.html-9a42a6e6.js
    @@ -1,4 +1,4 @@
    -import{_ as i,r as e,o as u,c,a as n,b as s,d as a,w as o,e as p}from"./app-ea6643d5.js";const r="/minigame-canvas-engine/assets/image-ef89c975.png",d="/minigame-canvas-engine/assets/image-1-fa04bf86.png",k={},v=p(`

    微信小游戏插件

    除了通过 npm 的方式引用,在微信小游戏场景下,还支持通过插件的方式引用。

    TIP

    通过插件的方式,玩家本地有其他游戏使用了相同版本插件可以免去下载,达到提升启动速度的效果。

    安装使用

    开放数据域引用

    1.在game.json声明Layout插件:

    {
    +import{_ as i,r as e,o as u,c,a as n,b as s,d as a,w as o,e as p}from"./app-af1e9e55.js";const r="/minigame-canvas-engine/assets/image-ef89c975.png",d="/minigame-canvas-engine/assets/image-1-fa04bf86.png",k={},v=p(`

    微信小游戏插件

    除了通过 npm 的方式引用,在微信小游戏场景下,还支持通过插件的方式引用。

    TIP

    通过插件的方式,玩家本地有其他游戏使用了相同版本插件可以免去下载,达到提升启动速度的效果。

    安装使用

    开放数据域引用

    1.在game.json声明Layout插件:

    {
       "deviceOrientation": "portrait",
       "openDataContext": "sub",
       "plugins": {
    diff --git a/assets/rank.html-05cfe597.js b/assets/rank.html-1a6c9104.js
    similarity index 94%
    rename from assets/rank.html-05cfe597.js
    rename to assets/rank.html-1a6c9104.js
    index 18850b9d..58b7baa0 100644
    --- a/assets/rank.html-05cfe597.js
    +++ b/assets/rank.html-1a6c9104.js
    @@ -1,4 +1,4 @@
    -import{_ as a,r as o,o as r,c as s,a as e,b as n,d as l}from"./app-ea6643d5.js";const c={},i=e("h1",{id:"好友排行榜",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#好友排行榜","aria-hidden":"true"},"#"),n(" 好友排行榜")],-1),d={href:"https://developers.weixin.qq.com/minigame/dev/guide/open-ability/open-data.html",target:"_blank",rel:"noopener noreferrer"},h=e("iframe",{height:"609.4705810546875",style:{width:"100%"},scrolling:"no",title:"Layout RankList",src:"https://codepen.io/yuanzm/embed/QWZybox?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},`
    +import{_ as a,r as o,o as r,c as s,a as e,b as n,d as l}from"./app-af1e9e55.js";const c={},i=e("h1",{id:"好友排行榜",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#好友排行榜","aria-hidden":"true"},"#"),n(" 好友排行榜")],-1),d={href:"https://developers.weixin.qq.com/minigame/dev/guide/open-ability/open-data.html",target:"_blank",rel:"noopener noreferrer"},h=e("iframe",{height:"609.4705810546875",style:{width:"100%"},scrolling:"no",title:"Layout RankList",src:"https://codepen.io/yuanzm/embed/QWZybox?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},`
       See the Pen 
       Layout RankList by yuanzm (@yuanzm)
       on CodePen.
    diff --git a/assets/rank.html-68a4c1a2.js b/assets/rank.html-e364c687.js
    similarity index 72%
    rename from assets/rank.html-68a4c1a2.js
    rename to assets/rank.html-e364c687.js
    index bdaa99f4..8e3588a6 100644
    --- a/assets/rank.html-68a4c1a2.js
    +++ b/assets/rank.html-e364c687.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-f50a3896","path":"/demos/rank.html","title":"好友排行榜","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1712821672000},"filePathRelative":"demos/rank.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-f50a3896","path":"/demos/rank.html","title":"好友排行榜","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1717588138000},"filePathRelative":"demos/rank.md"}');export{e as data};
    diff --git a/assets/rect.html-6d0bfd40.js b/assets/rect.html-2651dea0.js
    similarity index 97%
    rename from assets/rect.html-6d0bfd40.js
    rename to assets/rect.html-2651dea0.js
    index ec6978c0..240b15d4 100644
    --- a/assets/rect.html-6d0bfd40.js
    +++ b/assets/rect.html-2651dea0.js
    @@ -1,4 +1,4 @@
    -import{_ as t,o as n,c as a,e as s}from"./app-ea6643d5.js";const e={},c=s(`

    Rect

    一个 Rect 代表一个矩形。

    属性

    属性类型说明
    widthNumber矩形的宽度
    heightNumber矩形的高度
    leftNumber矩形 X 轴上的最小值
    rightNumber矩形 X 轴上的最大值
    topNumber矩形 Y 轴上的最小值
    bottomNumber矩形 Y 轴上的最大值

    方法

    set(left: number, top: number, width: number, height: number)

    更新矩形的相关信息。

    intersects(rect: Rect): boolean

    判断两个矩形是否相交

    const rect1 = Layout.getElementsById('box1')[0];
    +import{_ as t,o as n,c as a,e as s}from"./app-af1e9e55.js";const e={},c=s(`

    Rect

    一个 Rect 代表一个矩形。

    属性

    属性类型说明
    widthNumber矩形的宽度
    heightNumber矩形的高度
    leftNumber矩形 X 轴上的最小值
    rightNumber矩形 X 轴上的最大值
    topNumber矩形 Y 轴上的最小值
    bottomNumber矩形 Y 轴上的最大值

    方法

    set(left: number, top: number, width: number, height: number)

    更新矩形的相关信息。

    intersects(rect: Rect): boolean

    判断两个矩形是否相交

    const rect1 = Layout.getElementsById('box1')[0];
     const rect2 = Layout.getElementsById('box2')[0];
     
     console.log(rect1.intersects(rect2));
    diff --git a/assets/rect.html-f2bbe2a1.js b/assets/rect.html-9425258f.js
    similarity index 91%
    rename from assets/rect.html-f2bbe2a1.js
    rename to assets/rect.html-9425258f.js
    index 339d8174..1494841b 100644
    --- a/assets/rect.html-f2bbe2a1.js
    +++ b/assets/rect.html-9425258f.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-dc0dd396","path":"/components/rect.html","title":"Rect","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"set(left: number, top: number, width: number, height: number)","slug":"set-left-number-top-number-width-number-height-number","link":"#set-left-number-top-number-width-number-height-number","children":[]},{"level":3,"title":"intersects(rect: Rect): boolean","slug":"intersects-rect-rect-boolean","link":"#intersects-rect-rect-boolean","children":[]}]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/rect.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-dc0dd396","path":"/components/rect.html","title":"Rect","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"set(left: number, top: number, width: number, height: number)","slug":"set-left-number-top-number-width-number-height-number","link":"#set-left-number-top-number-width-number-height-number","children":[]},{"level":3,"title":"intersects(rect: Rect): boolean","slug":"intersects-rect-rect-boolean","link":"#intersects-rect-rect-boolean","children":[]}]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/rect.md"}');export{e as data};
    diff --git a/assets/richtext.html-cd0670cf.js b/assets/richtext.html-104f8948.js
    similarity index 73%
    rename from assets/richtext.html-cd0670cf.js
    rename to assets/richtext.html-104f8948.js
    index e8115b45..d28c75d6 100644
    --- a/assets/richtext.html-cd0670cf.js
    +++ b/assets/richtext.html-104f8948.js
    @@ -1 +1 @@
    -const t=JSON.parse('{"key":"v-4779190d","path":"/plugin/richtext.html","title":"富文本插件","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1712821672000},"filePathRelative":"plugin/richtext.md"}');export{t as data};
    +const t=JSON.parse('{"key":"v-4779190d","path":"/plugin/richtext.html","title":"富文本插件","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1717588138000},"filePathRelative":"plugin/richtext.md"}');export{t as data};
    diff --git a/assets/richtext.html-533e0048.js b/assets/richtext.html-31ff4652.js
    similarity index 99%
    rename from assets/richtext.html-533e0048.js
    rename to assets/richtext.html-31ff4652.js
    index 3e75d135..b6187827 100644
    --- a/assets/richtext.html-533e0048.js
    +++ b/assets/richtext.html-31ff4652.js
    @@ -1,4 +1,4 @@
    -import{_ as t,o as n,c as e,e as a,a as s}from"./app-ea6643d5.js";const o={},l=a(`

    富文本插件

    富文本组件是用来显示一段带自定义样式的文字,自定义样式包括加粗、颜色、换行、居中等,富文本组件只能支持纯文本,不支持图片。

    安装使用

    // 安装
    +import{_ as t,o as n,c as e,e as a,a as s}from"./app-af1e9e55.js";const o={},l=a(`

    富文本插件

    富文本组件是用来显示一段带自定义样式的文字,自定义样式包括加粗、颜色、换行、居中等,富文本组件只能支持纯文本,不支持图片。

    安装使用

    // 安装
     tnpm install --save minigame-canvas-engine-richtext
     
     // 引用
    diff --git a/assets/scrollbar.html-e4368a11.js b/assets/scrollbar.html-3feb5aed.js
    similarity index 89%
    rename from assets/scrollbar.html-e4368a11.js
    rename to assets/scrollbar.html-3feb5aed.js
    index 8fa7ecbc..8a361746 100644
    --- a/assets/scrollbar.html-e4368a11.js
    +++ b/assets/scrollbar.html-3feb5aed.js
    @@ -1 +1 @@
    -const l=JSON.parse('{"key":"v-14a00c9a","path":"/components/scrollbar.html","title":"ScrollBar","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"hide","slug":"hide","link":"#hide","children":[]},{"level":3,"title":"show","slug":"show","link":"#show","children":[]}]},{"level":2,"title":"样式","slug":"样式","link":"#样式","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/scrollbar.md"}');export{l as data};
    +const l=JSON.parse('{"key":"v-14a00c9a","path":"/components/scrollbar.html","title":"ScrollBar","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"hide","slug":"hide","link":"#hide","children":[]},{"level":3,"title":"show","slug":"show","link":"#show","children":[]}]},{"level":2,"title":"样式","slug":"样式","link":"#样式","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/scrollbar.md"}');export{l as data};
    diff --git a/assets/scrollbar.html-b4e2e9bd.js b/assets/scrollbar.html-ba50a89c.js
    similarity index 99%
    rename from assets/scrollbar.html-b4e2e9bd.js
    rename to assets/scrollbar.html-ba50a89c.js
    index c078061e..904fb5e6 100644
    --- a/assets/scrollbar.html-b4e2e9bd.js
    +++ b/assets/scrollbar.html-ba50a89c.js
    @@ -1,4 +1,4 @@
    -import{_ as n,o as a,c as s,e as t}from"./app-ea6643d5.js";const e={},p=t(`

    ScrollBar

    兼容性

    滚动条特性 v1.0.4版本开始支持

    滚动条组件,服务于 ScrollView,不能独立使用。

    当 ScrollView 开启横向滚动或者纵向滚动的时候,会自动给 ScrollView 插入相应的 ScrollBar,ScrollBar继承自 View 组件。

    属性

    属性类型说明
    widthNumber滚动条的粗细,因为要兼容横竖滚动,所以 style.width 在不同模式下代表的意思不一样,因此通过单独的 width 属性来代表滚动条的粗细
    autoHideboolean是否自动隐藏滚动条,默认为 true,在滚动结束后会自动隐藏
    autoHideTimenumber与 autoHide 配套属性,开启了自动隐藏,在一定时间内隐藏滚动条,默认是1000,单位 ms

    示例

    const list = Layout.getElementById('scrolllist');
    +import{_ as n,o as a,c as s,e as t}from"./app-af1e9e55.js";const e={},p=t(`

    ScrollBar

    兼容性

    滚动条特性 v1.0.4版本开始支持

    滚动条组件,服务于 ScrollView,不能独立使用。

    当 ScrollView 开启横向滚动或者纵向滚动的时候,会自动给 ScrollView 插入相应的 ScrollBar,ScrollBar继承自 View 组件。

    属性

    属性类型说明
    widthNumber滚动条的粗细,因为要兼容横竖滚动,所以 style.width 在不同模式下代表的意思不一样,因此通过单独的 width 属性来代表滚动条的粗细
    autoHideboolean是否自动隐藏滚动条,默认为 true,在滚动结束后会自动隐藏
    autoHideTimenumber与 autoHide 配套属性,开启了自动隐藏,在一定时间内隐藏滚动条,默认是1000,单位 ms

    示例

    const list = Layout.getElementById('scrolllist');
     
     // 在 init 之后内部有些异步逻辑取不到 vertivalScrollbar,需要延迟一帧执行
     Layout.ticker.next(() => {
    diff --git a/assets/scrollview.html-79d65deb.js b/assets/scrollview.html-8f3f709b.js
    similarity index 99%
    rename from assets/scrollview.html-79d65deb.js
    rename to assets/scrollview.html-8f3f709b.js
    index f89aae68..7103f72c 100644
    --- a/assets/scrollview.html-79d65deb.js
    +++ b/assets/scrollview.html-8f3f709b.js
    @@ -1,4 +1,4 @@
    -import{_ as o,r as c,o as p,c as i,a as n,b as s,d as t,w as e,e as l}from"./app-ea6643d5.js";const u={},r=n("h1",{id:"scrollview",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#scrollview","aria-hidden":"true"},"#"),s(" ScrollView")],-1),d=l(`

    标签属性

    属性类型是否必填说明
    scrollXstring是否需要横向滚动,支持 "true"和"false",默认值为 "false"
    scrollYstring是否需要纵向滚动,支持 "true"和"false", 默认值为"false"

    温馨提示

    为了兼容历史版本,默认做了一个逻辑,如果当前纵向内容大于 ScrollView 本身高度会自动开启纵向滚动特性,如果需要关闭,可以强行在标签指定 scrollY = "false"

    <scrollview scrollY="true"></scrollview>
    +import{_ as o,r as c,o as p,c as i,a as n,b as s,d as t,w as e,e as l}from"./app-af1e9e55.js";const u={},r=n("h1",{id:"scrollview",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#scrollview","aria-hidden":"true"},"#"),s(" ScrollView")],-1),d=l(`

    标签属性

    属性类型是否必填说明
    scrollXstring是否需要横向滚动,支持 "true"和"false",默认值为 "false"
    scrollYstring是否需要纵向滚动,支持 "true"和"false", 默认值为"false"

    温馨提示

    为了兼容历史版本,默认做了一个逻辑,如果当前纵向内容大于 ScrollView 本身高度会自动开启纵向滚动特性,如果需要关闭,可以强行在标签指定 scrollY = "false"

    <scrollview scrollY="true"></scrollview>
     

    属性

    `,5),h=n("thead",null,[n("tr",null,[n("th",null,"属性"),n("th",null,"类型"),n("th",null,"说明")])],-1),k=n("tr",null,[n("td",null,"scrollX"),n("td",null,"boolean"),n("td",null,"动态修改 ScrollView 是否可以横向滚动")],-1),v=n("tr",null,[n("td",null,"scrollY"),n("td",null,"boolean"),n("td",null,"动态修改 ScrollView 是否可以纵向滚动")],-1),m=n("td",null,"vertivalScrollbar",-1),b=n("td",null,"纵向滚动条实例",-1),_=n("td",null,"horizontalScrollbar",-1),f=n("td",null,"横向滚动条实例",-1),g=l(`

    当滚动开启时候,会自动插入滚动条组件,反之关闭的时候会删除滚动条组件。

    兼容性

    滚动条特性 v1.0.4版本开始支持

    示例

    const list = Layout.getElementById('list');
     // 将滚动列表动态设置为禁止纵向滚动
     list.scrollY = false;
    diff --git a/assets/scrollview.html-fd67ea20.js b/assets/scrollview.html-99477649.js
    similarity index 90%
    rename from assets/scrollview.html-fd67ea20.js
    rename to assets/scrollview.html-99477649.js
    index 51b369a9..9aafc6fd 100644
    --- a/assets/scrollview.html-fd67ea20.js
    +++ b/assets/scrollview.html-99477649.js
    @@ -1 +1 @@
    -const l=JSON.parse('{"key":"v-5e5b65e7","path":"/components/scrollview.html","title":"ScrollView","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"标签属性","slug":"标签属性","link":"#标签属性","children":[]},{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"scrollTo","slug":"scrollto","link":"#scrollto","children":[]},{"level":3,"title":"示例","slug":"示例","link":"#示例","children":[]}]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/scrollview.md"}');export{l as data};
    +const l=JSON.parse('{"key":"v-5e5b65e7","path":"/components/scrollview.html","title":"ScrollView","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"标签属性","slug":"标签属性","link":"#标签属性","children":[]},{"level":2,"title":"属性","slug":"属性","link":"#属性","children":[]},{"level":2,"title":"方法","slug":"方法","link":"#方法","children":[{"level":3,"title":"scrollTo","slug":"scrollto","link":"#scrollto","children":[]},{"level":3,"title":"示例","slug":"示例","link":"#示例","children":[]}]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/scrollview.md"}');export{l as data};
    diff --git a/assets/style.html-f6565649.js b/assets/style.html-002366e2.js
    similarity index 98%
    rename from assets/style.html-f6565649.js
    rename to assets/style.html-002366e2.js
    index 6df3ba9c..48d1b67a 100644
    --- a/assets/style.html-f6565649.js
    +++ b/assets/style.html-002366e2.js
    @@ -1 +1 @@
    -import{_ as n,r as l,o,c as a,a as t,b as d,d as i,e}from"./app-ea6643d5.js";const c={},h=e('

    样式

    下面列举 Layout 支持的样式属性。

    布局

    支持的标签:viewscrollviewimagetextbitmaptextcanvas

    属性名支持的值或类型默认值
    widthnumber/string(百分比场景,如 100%)0
    heightnumber/string(百分比场景,如 100%)0
    positionrelative, absoluterelative
    leftnumber0
    topnumber0
    rightnumber0
    bottomnumber0
    marginnumber0
    marginLeftnumber0
    marginRightnumber0
    marginTopnumber0
    marginBottomnumber0
    paddingnumber0
    paddingLeftnumber0
    paddingRightnumber0
    paddingTopnumber0
    paddingBottomnumber0
    borderWidthnumber0
    borderRadiusnumber0
    flexDirectioncolumn, rowrow
    flexShrinknumber1
    flexGrownumber
    flexWrapwrap, nowrapnowrap
    justifyContentflex-start, center, flex-end, space-between, space-aroundflex-start
    alignItems, alignSelfflex-start, center, flex-end, stretchflex-start

    文本

    支持的标签:text

    ',7),s=t("thead",null,[t("tr",null,[t("th",null,"属性名"),t("th",null,"支持的值或类型"),t("th",null,"默认值")])],-1),u=t("tr",null,[t("td",null,"fontSize"),t("td",null,"number"),t("td",null,"14")],-1),b=t("td",null,"fontFamily",-1),m=t("td",null,"string",-1),p={href:"https://developer.mozilla.org/en-US/docs/Web/CSS/font-family",target:"_blank",rel:"noopener noreferrer"},_=t("tr",null,[t("td",null,"lineHeight"),t("td",null,"number / string"),t("td",null,"'1.4em'")],-1),f=t("tr",null,[t("td",null,"textAlign"),t("td",null,"left, center, right"),t("td",null,"left")],-1),g=t("tr",null,[t("td",null,"verticalAlign"),t("td",null,"top, middle, bottom"),t("td",null,"top")],-1),x=t("tr",null,[t("td",null,"color"),t("td",null,"string"),t("td",null,"#000000")],-1),v=t("tr",null,[t("td",null,"backgroundColor"),t("td",null,"string"),t("td",null,"transparent")],-1),w=t("tr",null,[t("td",null,"textOverflow"),t("td",null,"ellipsis, clip"),t("td",null,"默认为空,出于性能考虑,只有显式指定textOverflow属性的时候才会对文字进行截断处理")],-1),y=t("tr",null,[t("td",null,"letterSpacing"),t("td",null,"number"),t("td",null,"默认值为0,只对 bitmaptext 标签生效")],-1),S=e('

    容器

    支持的标签:viewscrollviewimagetextbitmaptextcanvas

    属性类型默认值说明
    backgroundColorstring背景的颜色,支持 6 位 16 进制、8 位 16 进制、rgb、rgba 四种格式的颜色

    边框

    支持的标签:viewscrollviewimagetextbitmaptextcanvas

    属性类型默认值说明
    borderRadiusnumber边框圆角
    borderColorstring边框颜色,支持 6 位 16 进制、8 位 16 进制、rgb、rgba 四种格式的颜色
    ',6);function k(C,B){const r=l("ExternalLinkIcon");return o(),a("div",null,[h,t("table",null,[s,t("tbody",null,[u,t("tr",null,[b,m,t("td",null,[d("无默认值,规则对齐 CSS 的font-family,详情可见"),t("a",p,[d("font-family"),i(r)]),d(",参考值如 'Georgia, serif'")])]),_,f,g,x,v,w,y])]),S])}const N=n(c,[["render",k],["__file","style.html.vue"]]);export{N as default}; +import{_ as n,r as l,o,c as a,a as t,b as d,d as i,e}from"./app-af1e9e55.js";const c={},h=e('

    样式

    下面列举 Layout 支持的样式属性。

    布局

    支持的标签:viewscrollviewimagetextbitmaptextcanvas

    属性名支持的值或类型默认值
    widthnumber/string(百分比场景,如 100%)0
    heightnumber/string(百分比场景,如 100%)0
    positionrelative, absoluterelative
    leftnumber0
    topnumber0
    rightnumber0
    bottomnumber0
    marginnumber0
    marginLeftnumber0
    marginRightnumber0
    marginTopnumber0
    marginBottomnumber0
    paddingnumber0
    paddingLeftnumber0
    paddingRightnumber0
    paddingTopnumber0
    paddingBottomnumber0
    borderWidthnumber0
    borderRadiusnumber0
    flexDirectioncolumn, rowrow
    flexShrinknumber1
    flexGrownumber
    flexWrapwrap, nowrapnowrap
    justifyContentflex-start, center, flex-end, space-between, space-aroundflex-start
    alignItems, alignSelfflex-start, center, flex-end, stretchflex-start

    文本

    支持的标签:text

    ',7),s=t("thead",null,[t("tr",null,[t("th",null,"属性名"),t("th",null,"支持的值或类型"),t("th",null,"默认值")])],-1),u=t("tr",null,[t("td",null,"fontSize"),t("td",null,"number"),t("td",null,"14")],-1),b=t("td",null,"fontFamily",-1),m=t("td",null,"string",-1),p={href:"https://developer.mozilla.org/en-US/docs/Web/CSS/font-family",target:"_blank",rel:"noopener noreferrer"},_=t("tr",null,[t("td",null,"lineHeight"),t("td",null,"number / string"),t("td",null,"'1.4em'")],-1),f=t("tr",null,[t("td",null,"textAlign"),t("td",null,"left, center, right"),t("td",null,"left")],-1),g=t("tr",null,[t("td",null,"verticalAlign"),t("td",null,"top, middle, bottom"),t("td",null,"top")],-1),x=t("tr",null,[t("td",null,"color"),t("td",null,"string"),t("td",null,"#000000")],-1),v=t("tr",null,[t("td",null,"backgroundColor"),t("td",null,"string"),t("td",null,"transparent")],-1),w=t("tr",null,[t("td",null,"textOverflow"),t("td",null,"ellipsis, clip"),t("td",null,"默认为空,出于性能考虑,只有显式指定textOverflow属性的时候才会对文字进行截断处理")],-1),y=t("tr",null,[t("td",null,"letterSpacing"),t("td",null,"number"),t("td",null,"默认值为0,只对 bitmaptext 标签生效")],-1),S=e('

    容器

    支持的标签:viewscrollviewimagetextbitmaptextcanvas

    属性类型默认值说明
    backgroundColorstring背景的颜色,支持 6 位 16 进制、8 位 16 进制、rgb、rgba 四种格式的颜色

    边框

    支持的标签:viewscrollviewimagetextbitmaptextcanvas

    属性类型默认值说明
    borderRadiusnumber边框圆角
    borderColorstring边框颜色,支持 6 位 16 进制、8 位 16 进制、rgb、rgba 四种格式的颜色
    ',6);function k(C,B){const r=l("ExternalLinkIcon");return o(),a("div",null,[h,t("table",null,[s,t("tbody",null,[u,t("tr",null,[b,m,t("td",null,[d("无默认值,规则对齐 CSS 的font-family,详情可见"),t("a",p,[d("font-family"),i(r)]),d(",参考值如 'Georgia, serif'")])]),_,f,g,x,v,w,y])]),S])}const N=n(c,[["render",k],["__file","style.html.vue"]]);export{N as default}; diff --git a/assets/style.html-17d017a0.js b/assets/style.html-db8345a5.js similarity index 87% rename from assets/style.html-17d017a0.js rename to assets/style.html-db8345a5.js index 80915554..e1695a13 100644 --- a/assets/style.html-17d017a0.js +++ b/assets/style.html-db8345a5.js @@ -1 +1 @@ -const e=JSON.parse('{"key":"v-ab448fd4","path":"/api/style.html","title":"样式","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"布局","slug":"布局","link":"#布局","children":[]},{"level":2,"title":"文本","slug":"文本","link":"#文本","children":[]},{"level":2,"title":"容器","slug":"容器","link":"#容器","children":[]},{"level":2,"title":"边框","slug":"边框","link":"#边框","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"api/style.md"}');export{e as data}; +const e=JSON.parse('{"key":"v-ab448fd4","path":"/api/style.html","title":"样式","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"布局","slug":"布局","link":"#布局","children":[]},{"level":2,"title":"文本","slug":"文本","link":"#文本","children":[]},{"level":2,"title":"容器","slug":"容器","link":"#容器","children":[]},{"level":2,"title":"边框","slug":"边框","link":"#边框","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"api/style.md"}');export{e as data}; diff --git a/assets/tags.html-c9042894.js b/assets/tags.html-12ef7cdd.js similarity index 95% rename from assets/tags.html-c9042894.js rename to assets/tags.html-12ef7cdd.js index 424222de..109d236b 100644 --- a/assets/tags.html-c9042894.js +++ b/assets/tags.html-12ef7cdd.js @@ -1 +1 @@ -const l=JSON.parse('{"key":"v-d009f75c","path":"/api/tags.html","title":"标签","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"标签列表","slug":"标签列表","link":"#标签列表","children":[]},{"level":2,"title":"公共属性","slug":"公共属性","link":"#公共属性","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"image","slug":"image","link":"#image","children":[{"level":3,"title":"特殊属性","slug":"特殊属性","link":"#特殊属性","children":[]}]},{"level":2,"title":"text","slug":"text","link":"#text","children":[{"level":3,"title":"特殊属性","slug":"特殊属性-1","link":"#特殊属性-1","children":[]},{"level":3,"title":"特殊样式","slug":"特殊样式","link":"#特殊样式","children":[]}]},{"level":2,"title":"scrollview","slug":"scrollview","link":"#scrollview","children":[{"level":3,"title":"特殊样式","slug":"特殊样式-1","link":"#特殊样式-1","children":[]}]},{"level":2,"title":"bitmapfont","slug":"bitmapfont","link":"#bitmapfont","children":[{"level":3,"title":"特殊样式","slug":"特殊样式-2","link":"#特殊样式-2","children":[]},{"level":3,"title":"示例","slug":"示例","link":"#示例","children":[]}]},{"level":2,"title":"canvas","slug":"canvas","link":"#canvas","children":[{"level":3,"title":"特殊属性","slug":"特殊属性-2","link":"#特殊属性-2","children":[]}]}],"git":{"updatedTime":1712821672000},"filePathRelative":"api/tags.md"}');export{l as data}; +const l=JSON.parse('{"key":"v-d009f75c","path":"/api/tags.html","title":"标签","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"标签列表","slug":"标签列表","link":"#标签列表","children":[]},{"level":2,"title":"公共属性","slug":"公共属性","link":"#公共属性","children":[]},{"level":2,"title":"view","slug":"view","link":"#view","children":[]},{"level":2,"title":"image","slug":"image","link":"#image","children":[{"level":3,"title":"特殊属性","slug":"特殊属性","link":"#特殊属性","children":[]}]},{"level":2,"title":"text","slug":"text","link":"#text","children":[{"level":3,"title":"特殊属性","slug":"特殊属性-1","link":"#特殊属性-1","children":[]},{"level":3,"title":"特殊样式","slug":"特殊样式","link":"#特殊样式","children":[]}]},{"level":2,"title":"scrollview","slug":"scrollview","link":"#scrollview","children":[{"level":3,"title":"特殊样式","slug":"特殊样式-1","link":"#特殊样式-1","children":[]}]},{"level":2,"title":"bitmapfont","slug":"bitmapfont","link":"#bitmapfont","children":[{"level":3,"title":"特殊样式","slug":"特殊样式-2","link":"#特殊样式-2","children":[]},{"level":3,"title":"示例","slug":"示例","link":"#示例","children":[]}]},{"level":2,"title":"canvas","slug":"canvas","link":"#canvas","children":[{"level":3,"title":"特殊属性","slug":"特殊属性-2","link":"#特殊属性-2","children":[]}]}],"git":{"updatedTime":1717588138000},"filePathRelative":"api/tags.md"}');export{l as data}; diff --git a/assets/tags.html-5d877979.js b/assets/tags.html-ab11926b.js similarity index 99% rename from assets/tags.html-5d877979.js rename to assets/tags.html-ab11926b.js index e0af919f..f40ea37e 100644 --- a/assets/tags.html-5d877979.js +++ b/assets/tags.html-ab11926b.js @@ -1,4 +1,4 @@ -import{_ as o,r as l,o as r,c as i,a as t,b as a,d as s,e}from"./app-ea6643d5.js";const d={},c=e('

    标签

    标签列表

    标签说明
    view容器标签,与HTML中的div相似
    scrollview滚动列表容器,如果容器内的子元素高度大于scrollview高度,支持纵向滚动,不支持嵌套scrollview
    image图片标签
    text文本标签
    bitmaptextbitmapfont文本标签
    canvas对齐 Web,允许获取 context执行渲染

    公共属性

    每个标签都会通过属性来支持一些特有的功能,下面列举所有标签都会有的属性。

    ',5),u=t("thead",null,[t("tr",null,[t("th",null,"属性"),t("th",null,"类型"),t("th",null,"是否必填"),t("th",null,"说明")])],-1),h=t("tr",null,[t("td",null,"id"),t("td",null,"string"),t("td",null,"否"),t("td",null,[a("非唯一标识,两个标签可以共用id,可以通过 "),t("strong",null,"Layout.getElementsById"),a(" 获取到元素实例")])],-1),k=t("tr",null,[t("td",null,"class"),t("td",null,"string"),t("td",null,"否"),t("td",null,"与浏览器相同")],-1),v=t("td",null,"dataset",-1),b=t("td",null,"string",-1),m=t("td",null,"否",-1),g={href:"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset",target:"_blank",rel:"noopener noreferrer"},_=t("h2",{id:"view",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#view","aria-hidden":"true"},"#"),a(" view")],-1),f={href:"https://developer.mozilla.org/en-US/docs/Web/CSS/flex",target:"_blank",rel:"noopener noreferrer"},y={href:"https://yogalayout.com/playground",target:"_blank",rel:"noopener noreferrer"},x=e('

    image

    特殊属性

    属性类型是否必填说明
    srcstring图片链接
    ',3),q={class:"custom-container tip"},w=t("p",{class:"custom-container-title"},"TIP",-1),C=t("p",null,"1.小游戏开放数据域场景图片路径不需要加./作为前缀,以小游戏根目录作为根目录;",-1),S={href:"/api/api.html#loadimgs",target:"_blank",rel:"noopener noreferrer"},A=e('

    text

    特殊属性

    属性类型是否必填说明
    valuestring文字内容

    特殊样式

    属性类型是否必填说明
    textOverflowstring文字溢出处理方式,默认不处理,ellipsis则支持自动截断
    textAlignstring文字水平居中方式,默认left,支持right、center

    scrollview

    ',6),I={href:"/api/api.html#updateviewport",target:"_blank",rel:"noopener noreferrer"},N=e('

    特殊样式

    属性类型是否必填说明
    scrollXstring是否需要横向滚动,支持 "true"和"false",默认值为 "false"
    scrollYstring是否需要纵向滚动,支持 "true"和"false", 默认值为"false"

    bitmapfont

    在游戏开发里面,为了更好的视觉效果,经常要将一些常用文字经过设计成图片,然后打包成特殊的字体,称为BitmapFont,基本上所有的游戏引擎都支持了这种技术。

    ',4),j={href:"https://www.angelcode.com/products/bmfont/",target:"_blank",rel:"noopener noreferrer"},B={href:"/api/api.html#registbitmapfont",target:"_blank",rel:"noopener noreferrer"},L=e(`
    <bitmaptext font="fnt_number-export" class="title" value="等级"></bitmaptext>
    +import{_ as o,r as l,o as r,c as i,a as t,b as a,d as s,e}from"./app-af1e9e55.js";const d={},c=e('

    标签

    标签列表

    标签说明
    view容器标签,与HTML中的div相似
    scrollview滚动列表容器,如果容器内的子元素高度大于scrollview高度,支持纵向滚动,不支持嵌套scrollview
    image图片标签
    text文本标签
    bitmaptextbitmapfont文本标签
    canvas对齐 Web,允许获取 context执行渲染

    公共属性

    每个标签都会通过属性来支持一些特有的功能,下面列举所有标签都会有的属性。

    ',5),u=t("thead",null,[t("tr",null,[t("th",null,"属性"),t("th",null,"类型"),t("th",null,"是否必填"),t("th",null,"说明")])],-1),h=t("tr",null,[t("td",null,"id"),t("td",null,"string"),t("td",null,"否"),t("td",null,[a("非唯一标识,两个标签可以共用id,可以通过 "),t("strong",null,"Layout.getElementsById"),a(" 获取到元素实例")])],-1),k=t("tr",null,[t("td",null,"class"),t("td",null,"string"),t("td",null,"否"),t("td",null,"与浏览器相同")],-1),v=t("td",null,"dataset",-1),b=t("td",null,"string",-1),m=t("td",null,"否",-1),g={href:"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset",target:"_blank",rel:"noopener noreferrer"},_=t("h2",{id:"view",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#view","aria-hidden":"true"},"#"),a(" view")],-1),f={href:"https://developer.mozilla.org/en-US/docs/Web/CSS/flex",target:"_blank",rel:"noopener noreferrer"},y={href:"https://yogalayout.com/playground",target:"_blank",rel:"noopener noreferrer"},x=e('

    image

    特殊属性

    属性类型是否必填说明
    srcstring图片链接
    ',3),q={class:"custom-container tip"},w=t("p",{class:"custom-container-title"},"TIP",-1),C=t("p",null,"1.小游戏开放数据域场景图片路径不需要加./作为前缀,以小游戏根目录作为根目录;",-1),S={href:"/api/api.html#loadimgs",target:"_blank",rel:"noopener noreferrer"},A=e('

    text

    特殊属性

    属性类型是否必填说明
    valuestring文字内容

    特殊样式

    属性类型是否必填说明
    textOverflowstring文字溢出处理方式,默认不处理,ellipsis则支持自动截断
    textAlignstring文字水平居中方式,默认left,支持right、center

    scrollview

    ',6),I={href:"/api/api.html#updateviewport",target:"_blank",rel:"noopener noreferrer"},N=e('

    特殊样式

    属性类型是否必填说明
    scrollXstring是否需要横向滚动,支持 "true"和"false",默认值为 "false"
    scrollYstring是否需要纵向滚动,支持 "true"和"false", 默认值为"false"

    bitmapfont

    在游戏开发里面,为了更好的视觉效果,经常要将一些常用文字经过设计成图片,然后打包成特殊的字体,称为BitmapFont,基本上所有的游戏引擎都支持了这种技术。

    ',4),j={href:"https://www.angelcode.com/products/bmfont/",target:"_blank",rel:"noopener noreferrer"},B={href:"/api/api.html#registbitmapfont",target:"_blank",rel:"noopener noreferrer"},L=e(`
    <bitmaptext font="fnt_number-export" class="title" value="等级"></bitmaptext>
     
    title: {
       width: 144,
       fontSize: 48,
    diff --git a/assets/templateengine.html-17e466fe.js b/assets/templateengine.html-7ced2644.js
    similarity index 94%
    rename from assets/templateengine.html-17e466fe.js
    rename to assets/templateengine.html-7ced2644.js
    index 646366e2..6f8f7e82 100644
    --- a/assets/templateengine.html-17e466fe.js
    +++ b/assets/templateengine.html-7ced2644.js
    @@ -1 +1 @@
    -const l=JSON.parse('{"key":"v-1da74265","path":"/tutorial/templateengine.html","title":"模板引擎使用","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"模板引擎简介","slug":"模板引擎简介","link":"#模板引擎简介","children":[]},{"level":2,"title":"doT.js 基本使用","slug":"dot-js-基本使用","link":"#dot-js-基本使用","children":[{"level":3,"title":"插值","slug":"插值","link":"#插值","children":[]},{"level":3,"title":"循环","slug":"循环","link":"#循环","children":[]},{"level":3,"title":"条件判断","slug":"条件判断","link":"#条件判断","children":[]}]},{"level":2,"title":"Layout devtools集成","slug":"layout-devtools集成","link":"#layout-devtools集成","children":[{"level":3,"title":"通过模板创建 codepen","slug":"通过模板创建-codepen","link":"#通过模板创建-codepen","children":[]},{"level":3,"title":"导出模板函数","slug":"导出模板函数","link":"#导出模板函数","children":[]},{"level":3,"title":"永久化保存","slug":"永久化保存","link":"#永久化保存","children":[]}]}],"git":{"updatedTime":1712821672000},"filePathRelative":"tutorial/templateengine.md"}');export{l as data};
    +const l=JSON.parse('{"key":"v-1da74265","path":"/tutorial/templateengine.html","title":"模板引擎使用","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"模板引擎简介","slug":"模板引擎简介","link":"#模板引擎简介","children":[]},{"level":2,"title":"doT.js 基本使用","slug":"dot-js-基本使用","link":"#dot-js-基本使用","children":[{"level":3,"title":"插值","slug":"插值","link":"#插值","children":[]},{"level":3,"title":"循环","slug":"循环","link":"#循环","children":[]},{"level":3,"title":"条件判断","slug":"条件判断","link":"#条件判断","children":[]}]},{"level":2,"title":"Layout devtools集成","slug":"layout-devtools集成","link":"#layout-devtools集成","children":[{"level":3,"title":"通过模板创建 codepen","slug":"通过模板创建-codepen","link":"#通过模板创建-codepen","children":[]},{"level":3,"title":"导出模板函数","slug":"导出模板函数","link":"#导出模板函数","children":[]},{"level":3,"title":"永久化保存","slug":"永久化保存","link":"#永久化保存","children":[]}]}],"git":{"updatedTime":1717588138000},"filePathRelative":"tutorial/templateengine.md"}');export{l as data};
    diff --git a/assets/templateengine.html-1b239a49.js b/assets/templateengine.html-e9ef9b76.js
    similarity index 99%
    rename from assets/templateengine.html-1b239a49.js
    rename to assets/templateengine.html-e9ef9b76.js
    index cb4ef409..a7927936 100644
    --- a/assets/templateengine.html-1b239a49.js
    +++ b/assets/templateengine.html-e9ef9b76.js
    @@ -1,4 +1,4 @@
    -import{_ as o,r as p,o as r,c as l,a,b as s,d as e,e as n}from"./app-ea6643d5.js";const c="/minigame-canvas-engine/assets/dotjs-2d128d69.png",i="/minigame-canvas-engine/assets/tpl-00180df8.png",u="/minigame-canvas-engine/assets/tpl2-19d88997.png",d="/minigame-canvas-engine/assets/tpl3-964afb6e.png",k={},m=n(`

    模板引擎使用

    模板引擎简介

    Layout 使用 XML 来组织页面布局,比如快速入门里面提到的:

    let template = \`
    +import{_ as o,r as p,o as r,c as l,a,b as s,d as e,e as n}from"./app-af1e9e55.js";const c="/minigame-canvas-engine/assets/dotjs-2d128d69.png",i="/minigame-canvas-engine/assets/tpl-00180df8.png",u="/minigame-canvas-engine/assets/tpl2-19d88997.png",d="/minigame-canvas-engine/assets/tpl3-964afb6e.png",k={},m=n(`

    模板引擎使用

    模板引擎简介

    Layout 使用 XML 来组织页面布局,比如快速入门里面提到的:

    let template = \`
       <view id="container">
         <text id="testText" class="redText" value="hello canvas"></text>
       </view>
    diff --git a/assets/text.html-abe59a52.js b/assets/text.html-e6c80c3a.js
    similarity index 95%
    rename from assets/text.html-abe59a52.js
    rename to assets/text.html-e6c80c3a.js
    index 365dc64a..5b900be0 100644
    --- a/assets/text.html-abe59a52.js
    +++ b/assets/text.html-e6c80c3a.js
    @@ -1,4 +1,4 @@
    -import{_ as n,r as o,o as r,c as d,a as e,b as t,d as h,e as s}from"./app-ea6643d5.js";const l={},c=e("h1",{id:"text",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#text","aria-hidden":"true"},"#"),t(" Text")],-1),i={href:"/components/element.html",target:"_blank",rel:"noopener noreferrer"},_=s('

    特殊属性

    属性类型是否必填说明
    valuestring文字内容
    ',2),u=e("iframe",{height:"580.0000915527344",style:{width:"100%"},scrolling:"no",title:"Layout Text",src:"https://codepen.io/yuanzm/embed/bGZdjEg?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},` +import{_ as n,r as o,o as r,c as d,a as e,b as t,d as h,e as s}from"./app-af1e9e55.js";const l={},c=e("h1",{id:"text",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#text","aria-hidden":"true"},"#"),t(" Text")],-1),i={href:"/components/element.html",target:"_blank",rel:"noopener noreferrer"},_=s('

    特殊属性

    属性类型是否必填说明
    valuestring文字内容
    ',2),u=e("iframe",{height:"580.0000915527344",style:{width:"100%"},scrolling:"no",title:"Layout Text",src:"https://codepen.io/yuanzm/embed/bGZdjEg?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},` See the Pen Layout Text by yuanzm (@yuanzm) on CodePen. diff --git a/assets/text.html-8bfccc71.js b/assets/text.html-f03e8081.js similarity index 80% rename from assets/text.html-8bfccc71.js rename to assets/text.html-f03e8081.js index 322668ed..0d2b5e70 100644 --- a/assets/text.html-8bfccc71.js +++ b/assets/text.html-f03e8081.js @@ -1 +1 @@ -const t=JSON.parse('{"key":"v-1164d08c","path":"/components/text.html","title":"Text","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"特殊属性","slug":"特殊属性","link":"#特殊属性","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"components/text.md"}');export{t as data}; +const t=JSON.parse('{"key":"v-1164d08c","path":"/components/text.html","title":"Text","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"特殊属性","slug":"特殊属性","link":"#特殊属性","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"components/text.md"}');export{t as data}; diff --git a/assets/tween.html-9a1751af.js b/assets/tween.html-05b35220.js similarity index 91% rename from assets/tween.html-9a1751af.js rename to assets/tween.html-05b35220.js index 1af7bda1..6e1e8dce 100644 --- a/assets/tween.html-9a1751af.js +++ b/assets/tween.html-05b35220.js @@ -1 +1 @@ -const e=JSON.parse('{"key":"v-4a2618c8","path":"/api/tween.html","title":"缓动系统","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"简介","slug":"简介","link":"#简介","children":[]},{"level":2,"title":"简单示例","slug":"简单示例","link":"#简单示例","children":[]},{"level":2,"title":"接口限制","slug":"接口限制","link":"#接口限制","children":[]},{"level":2,"title":"原理简介","slug":"原理简介","link":"#原理简介","children":[]},{"level":2,"title":"进阶指南","slug":"进阶指南","link":"#进阶指南","children":[]},{"level":2,"title":"一些参考资料","slug":"一些参考资料","link":"#一些参考资料","children":[]}],"git":{"updatedTime":1712821672000},"filePathRelative":"api/tween.md"}');export{e as data}; +const e=JSON.parse('{"key":"v-4a2618c8","path":"/api/tween.html","title":"缓动系统","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"简介","slug":"简介","link":"#简介","children":[]},{"level":2,"title":"简单示例","slug":"简单示例","link":"#简单示例","children":[]},{"level":2,"title":"接口限制","slug":"接口限制","link":"#接口限制","children":[]},{"level":2,"title":"原理简介","slug":"原理简介","link":"#原理简介","children":[]},{"level":2,"title":"进阶指南","slug":"进阶指南","link":"#进阶指南","children":[]},{"level":2,"title":"一些参考资料","slug":"一些参考资料","link":"#一些参考资料","children":[]}],"git":{"updatedTime":1717588138000},"filePathRelative":"api/tween.md"}');export{e as data}; diff --git a/assets/tween.html-acf194c8.js b/assets/tween.html-8a91f58b.js similarity index 99% rename from assets/tween.html-acf194c8.js rename to assets/tween.html-8a91f58b.js index 9cfb0fed..6938a665 100644 --- a/assets/tween.html-acf194c8.js +++ b/assets/tween.html-8a91f58b.js @@ -1,4 +1,4 @@ -import{_ as p,r as o,o as c,c as l,a as n,b as s,d as t,e}from"./app-ea6643d5.js";const i={},u=n("h1",{id:"缓动系统",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#缓动系统","aria-hidden":"true"},"#"),s(" 缓动系统")],-1),r=n("h2",{id:"简介",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#简介","aria-hidden":"true"},"#"),s(" 简介")],-1),d=n("p",null,"缓动动画是很常见的需求,游戏引擎一般会内置缓动系统,如果没有内置的缓动系统,通过引入缓动引擎也能够很容易实现缓动动画能力。",-1),k={href:"https://github.com/tweenjs/tween.js/",target:"_blank",rel:"noopener noreferrer"},m=e(`

    简单示例

    下面分别是示例需要的 xml、style 和缓动函数调用示例,省略 Layout 初始化和 layout 等逻辑。

    <view id="container">
    +import{_ as p,r as o,o as c,c as l,a as n,b as s,d as t,e}from"./app-af1e9e55.js";const i={},u=n("h1",{id:"缓动系统",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#缓动系统","aria-hidden":"true"},"#"),s(" 缓动系统")],-1),r=n("h2",{id:"简介",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#简介","aria-hidden":"true"},"#"),s(" 简介")],-1),d=n("p",null,"缓动动画是很常见的需求,游戏引擎一般会内置缓动系统,如果没有内置的缓动系统,通过引入缓动引擎也能够很容易实现缓动动画能力。",-1),k={href:"https://github.com/tweenjs/tween.js/",target:"_blank",rel:"noopener noreferrer"},m=e(`

    简单示例

    下面分别是示例需要的 xml、style 和缓动函数调用示例,省略 Layout 初始化和 layout 等逻辑。

    <view id="container">
       <view class="ball"></view>
     </view>
     
    {
    diff --git a/assets/view.html-2e48d689.js b/assets/view.html-d378fd93.js
    similarity index 72%
    rename from assets/view.html-2e48d689.js
    rename to assets/view.html-d378fd93.js
    index d93b04e6..c46e2d69 100644
    --- a/assets/view.html-2e48d689.js
    +++ b/assets/view.html-d378fd93.js
    @@ -1 +1 @@
    -const e=JSON.parse('{"key":"v-1d0af3d8","path":"/components/view.html","title":"View","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1712821672000},"filePathRelative":"components/view.md"}');export{e as data};
    +const e=JSON.parse('{"key":"v-1d0af3d8","path":"/components/view.html","title":"View","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1717588138000},"filePathRelative":"components/view.md"}');export{e as data};
    diff --git a/assets/view.html-f8cfe1c3.js b/assets/view.html-d71163d3.js
    similarity index 93%
    rename from assets/view.html-f8cfe1c3.js
    rename to assets/view.html-d71163d3.js
    index ad005ad9..fc5c7e6a 100644
    --- a/assets/view.html-f8cfe1c3.js
    +++ b/assets/view.html-d71163d3.js
    @@ -1,4 +1,4 @@
    -import{_ as a,r as o,o as r,c as s,a as e,b as t,d as l,w as i}from"./app-ea6643d5.js";const c={},d=e("h1",{id:"view",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#view","aria-hidden":"true"},"#"),t(" View")],-1),h=e("p",null,"一般用于几个组件的容器。",-1),u=e("iframe",{height:"730.4761962890625",style:{width:"100%"},scrolling:"no",title:"Layout View",src:"https://codepen.io/yuanzm/embed/YzgXmax?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},`
    +import{_ as a,r as o,o as r,c as s,a as e,b as t,d as l,w as i}from"./app-af1e9e55.js";const c={},d=e("h1",{id:"view",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#view","aria-hidden":"true"},"#"),t(" View")],-1),h=e("p",null,"一般用于几个组件的容器。",-1),u=e("iframe",{height:"730.4761962890625",style:{width:"100%"},scrolling:"no",title:"Layout View",src:"https://codepen.io/yuanzm/embed/YzgXmax?default-tab=html%2Cresult&editable=true",frameborder:"no",loading:"lazy",allowtransparency:"true",allowfullscreen:"true"},`
       See the Pen 
       Layout View by yuanzm (@yuanzm)
       on CodePen.
    diff --git a/components/bitmapfont.html b/components/bitmapfont.html
    index 42dfc2ae..542da1cf 100644
    --- a/components/bitmapfont.html
    +++ b/components/bitmapfont.html
    @@ -28,7 +28,7 @@
       var sc_security="efed24b4"; 
       BitMapText
         
    -    
    +    
       
       
         

    BitMapText

    在游戏开发里面,为了更好的视觉效果,经常要将一些常用文字经过设计成图片,然后打包成特殊的字体,称为BitmapFont,基本上所有的游戏引擎都支持了这种技术。

    本渲染引擎调研了常见的H5游戏引擎Laya、Cocos、Egret,他们普遍支持AngelCode.comopen in new window打包后的配置文件规范,因此 BitMapText同样只支持通过该工具打包后的文件。

    需要特别注意的是,对于一般的游戏引擎而言,都会在自己的IDE里面将.fnt打包进代码里面,这里为了引擎轻量化,需要通过APIregistBitMapFontopen in new window手动注册字体。 然后在标签里面通过font属性声明需要使用的字体。

    特殊样式

    属性类型是否必填说明
    widthNumber文字的容器宽度,当width大于文字实际绘制占据的宽度,textAlign生效
    heightNumber文字的容器高度,当height大于lineHeight,verticalAlign属性生效
    lineHeightNumber渲染文字的行高,默认为配置文件里面的lineHeight
    textAlignString文字水平居中方式,默认left,支持right、center
    verticalAlignString文字垂直居中的方式,默认为middle,支持top和bottom
    letterSpacingNumber字符间距

    示例

    - + diff --git a/components/button.html b/components/button.html index c14d532c..1127c2c8 100644 --- a/components/button.html +++ b/components/button.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; Button - +

    Button

    Button 组件是一种常见的需求,当 Button 被点击的时候,自身会有一些状态变化,比如元素会有一定的缩放行为。

    一般的引擎设计,Button 由两部分构成,第一部分是容器,这个容器承载了 Button 的背景色、背景图等内容,第二部分是一个 label,代表 Button 的文本。Layout 同样如此,Button 组件实际上是由一个 View 包裹着 Text 实现的,View 负责背景色和背景图等逻辑的渲染,Text 只关注按钮文案。

    <button id="testButton" value="邀请"></button>
    @@ -57,6 +57,6 @@
     
     testButton.label.style.color = 'red';
     
    - + diff --git a/components/canvas.html b/components/canvas.html index d365710c..da3e7b84 100644 --- a/components/canvas.html +++ b/components/canvas.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; Canvas - +

    Canvas

    继承自 Elementopen in new window

    与浏览器的canvas标签类似,Layout 标签允许你插入一个画布自由更新画布内容,这在某些场景会非常有用,比如你想通过Layout完成构建小游戏示例,包括游戏和开放数据域,例如noengine demoopen in new window

    标签属性

    属性类型是否必填说明
    widthNumbercanvas 画布的尺寸,与样式的尺寸不是一个概念
    heightNumbercanvas 画布的尺寸,与样式的尺寸不是一个概念
    autoCreateCanvasString是否自动创建 canvas,默认为 "false",有些场景如微信小游戏场景,sharedCavans非业务创建,则需要手动设置canvas 实例

    属性

    属性类型说明
    canvasHTMLCanvasElement当标签属性 autoCreateCanvas 为 false 的时候,意味着 canvas 需要手动创建并设置给 Canvas 组件实例

    方法

    update

    Canvas 组件本身只是个容器,并不关心具体的 canvas 画布是不是更新了,需要手动调用 update 方法才能将 canvas 同步到 Layout 画布。

    示例

    <view id="container">
    @@ -62,6 +62,6 @@
       Untitled</a> by yuanzm (<a href="https://codepen.io/yuanzm">@yuanzm</a>)
       on <a href="https://codepen.io">CodePen</a>.
     
    - + diff --git a/components/element.html b/components/element.html index cbfcae10..80519677 100644 --- a/components/element.html +++ b/components/element.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; Element - +

    Element

    Element 是所有组件的基类,Element 描述了所有组件所普遍具有的方法和属性。一些组件继承自 Element 并且增加了一些额外功能的接口描述了具体的行为。

    xml属性

    属性类型说明
    datasetObject标签上通过 data-* 设置的属性会存到 dataset 字段,方便记录一些节点信息
    - + diff --git a/components/image.html b/components/image.html index 97ca4b6f..adb6390c 100644 --- a/components/image.html +++ b/components/image.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; Image - +

    Image

    继承自 Elementopen in new window

    特殊属性

    属性类型是否必填说明
    srcstring图片链接, 修改图片的src属性会自动请求新的图片并渲染

    TIP

    1.小游戏开放数据域场景图片路径不需要加./作为前缀,以小游戏根目录作为根目录;

    2.图片可以通过APIloadImgsopen in new window实现预加载

    示例

    - + diff --git a/components/overview.html b/components/overview.html index 1da600bb..0ed97b0a 100644 --- a/components/overview.html +++ b/components/overview.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 布局和样式 - +

    布局和样式

    标签

    Layout 通过 xml 组织布局,Layout 支持的标签列表如下。

    标签说明
    view容器标签,与 HTML 中的 div 相似
    scrollview滚动列表容器
    image图片标签
    text文本标签
    bitmaptextbitmapfont 文本标签
    canvas对齐 Web,允许获取 context 执行渲染

    属性

    属性是给标签提供的附加信息,每个标签都会通过属性来支持一些特有的功能,下面列举所有标签都会有的属性。

    属性类型是否必填说明
    idstring非唯一标识,两个标签可以共用 id,可以通过 Layout.getElementsById 获取到元素实例
    classstring与浏览器相同
    datasetstring与浏览器相同,详见文档open in new window

    样式

    下面列举 Layout 支持的样式属性。

    布局

    支持的标签:viewscrollviewimagetextbitmaptextcanvas

    属性名支持的值或类型默认值
    width, heightnumber/string(百分比场景,如 100%)0
    minWidth, minHeightnumber/string(百分比场景,如 100%)0
    left, right, top, bottomnumber0
    margin, marginLeft, marginRight, marginTop, marginBottomnumber0
    padding, paddingLeft, paddingRight, paddingTop, paddingBottomnumber0
    borderWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderBottomWidthnumber0
    flexDirectioncolumn, rowcolumn
    flexShrinknumber1
    flexGrownumber
    flexWrapwrap, nowrapnowrap
    flexnumber
    justifyContentflex-start, center, flex-end, space-between, space-aroundflex-start
    alignItems, alignSelfflex-start, center, flex-end, stretchflex-start
    positionrelative, absoluterelative

    伪类

    用来添加一些选择器的特殊效果,目前仅支持最场景的 :active 场景,后续会试场景补充。

    属性名支持的值或类型说明
    ':active'Object(v1.0.9开始支持),当节点触发 'touchstart' 事件的时候触发

    如下所示,当元素被点击的时候,元素会放大,当点击结束,元素又会重置会原样,这对实现按钮特性的时候尤为有用,不需要单独给按钮绑定点击事件手动对元素进行缩放和重置。

    {
    @@ -62,6 +62,6 @@
       padding: 0;
     }
     
    - + diff --git a/components/rect.html b/components/rect.html index 83c1bbd7..a83dfd43 100644 --- a/components/rect.html +++ b/components/rect.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; Rect - +

    Rect

    一个 Rect 代表一个矩形。

    属性

    属性类型说明
    widthNumber矩形的宽度
    heightNumber矩形的高度
    leftNumber矩形 X 轴上的最小值
    rightNumber矩形 X 轴上的最大值
    topNumber矩形 Y 轴上的最小值
    bottomNumber矩形 Y 轴上的最大值

    方法

    set(left: number, top: number, width: number, height: number)

    更新矩形的相关信息。

    intersects(rect: Rect): boolean

    判断两个矩形是否相交

    const rect1 = Layout.getElementsById('box1')[0];
    @@ -36,6 +36,6 @@
     
     console.log(rect1.intersects(rect2));
     
    - + diff --git a/components/scrollbar.html b/components/scrollbar.html index bc370714..32209b65 100644 --- a/components/scrollbar.html +++ b/components/scrollbar.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; ScrollBar - +

    ScrollBar

    兼容性

    滚动条特性 v1.0.4版本开始支持

    滚动条组件,服务于 ScrollView,不能独立使用。

    当 ScrollView 开启横向滚动或者纵向滚动的时候,会自动给 ScrollView 插入相应的 ScrollBar,ScrollBar继承自 View 组件。

    属性

    属性类型说明
    widthNumber滚动条的粗细,因为要兼容横竖滚动,所以 style.width 在不同模式下代表的意思不一样,因此通过单独的 width 属性来代表滚动条的粗细
    autoHideboolean是否自动隐藏滚动条,默认为 true,在滚动结束后会自动隐藏
    autoHideTimenumber与 autoHide 配套属性,开启了自动隐藏,在一定时间内隐藏滚动条,默认是1000,单位 ms

    示例

    const list = Layout.getElementById('scrolllist');
    @@ -59,6 +59,6 @@
       list.vertivalScrollbar.style.backgroundColor = 'red';
     });
     
    - + diff --git a/components/scrollview.html b/components/scrollview.html index 081270a9..6e52cc0e 100644 --- a/components/scrollview.html +++ b/components/scrollview.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; ScrollView - +

    ScrollView

    继承自 View

    滚动内容的容器,滚动的前提是正确调用updateViewPort

    标签属性

    属性类型是否必填说明
    scrollXstring是否需要横向滚动,支持 "true"和"false",默认值为 "false"
    scrollYstring是否需要纵向滚动,支持 "true"和"false", 默认值为"false"

    温馨提示

    为了兼容历史版本,默认做了一个逻辑,如果当前纵向内容大于 ScrollView 本身高度会自动开启纵向滚动特性,如果需要关闭,可以强行在标签指定 scrollY = "false"

    <scrollview scrollY="true"></scrollview>
    @@ -56,6 +56,6 @@
       Layout RankList</a> by yuanzm (<a href="https://codepen.io/yuanzm">@yuanzm</a>)
       on <a href="https://codepen.io">CodePen</a>.
     
    - + diff --git a/components/text.html b/components/text.html index 5eccbb2c..bc29da0e 100644 --- a/components/text.html +++ b/components/text.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; Text - + - + diff --git a/components/view.html b/components/view.html index 8a2d580f..1a3439c7 100644 --- a/components/view.html +++ b/components/view.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; View - + - + diff --git a/demos/invite.html b/demos/invite.html index 1b324717..cf93663f 100644 --- a/demos/invite.html +++ b/demos/invite.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 邀请好友组件 - + - + diff --git a/demos/rank.html b/demos/rank.html index 67e283af..c9441841 100644 --- a/demos/rank.html +++ b/demos/rank.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 好友排行榜 - + - + diff --git a/index.html b/index.html index 4d243c72..157c7912 100644 --- a/index.html +++ b/index.html @@ -28,10 +28,10 @@ var sc_security="efed24b4"; - +

    简介

    当我们开发一个canvas应用的时候,出于效率的考量,免不了要选择一个渲染引擎(比如PixiJS)或者工具链更完备的游戏引擎(比如Cocos CreatorLayabox)。

    渲染引擎通常会有Sprite的概念,一个完整的界面会由很多的Sprite组成,如果编写复杂一点的界面,代码里面会充斥创建精灵、设置精灵位置和样式的“重复代码”,最终我们得到了极致的渲染性能却牺牲了代码的可读性。

    为了解决这个问题,游戏引擎通常会有配套的IDE,界面通过拖拽即可生成,最终导出场景配置文件,这大大方便了UI开发,但是游戏引擎一般都很庞大,有时候我们仅仅想开发个好友排行榜。

    如果有一款渲染引擎,既能用配置文件的方式来表达界面,又可以做到轻量级,将会大大满足我们开发轻量级 canvas 应用的场景,minigame-canvas-engine 应运而生(后面简称 Layout )

    Layout 的目标在于用 Web 的开发方式来开发简单的 Canvas 应用。

    有兴趣可以查看详细原理介绍文章open in new window

    web端调试

    为了方便调试,可以基于 codepen 模板open in new window 构建demo,旧版本Playgroundopen in new window已不再维护。

    效果预览

    谁在使用

    目前在微信小游戏平台已经超过1000+游戏使用 Layout 来开发开放数据域能力。

    交流群

    如果遇到 Layout 是用上的问题或者有合理的需求想要支持,欢迎加入 Layout 交流QQ群探讨,如需反馈问题,请基于 codepen 模板open in new window 构建可复现问题的最小demo。

    - + diff --git a/overview/guide.html b/overview/guide.html index b2e147f2..30ed1d31 100644 --- a/overview/guide.html +++ b/overview/guide.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 快速入门 - + - + diff --git a/overview/plugin.html b/overview/plugin.html index 6d801a24..62cd0335 100644 --- a/overview/plugin.html +++ b/overview/plugin.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 微信小游戏插件 - +

    微信小游戏插件

    除了通过 npm 的方式引用,在微信小游戏场景下,还支持通过插件的方式引用。

    TIP

    通过插件的方式,玩家本地有其他游戏使用了相同版本插件可以免去下载,达到提升启动速度的效果。

    安装使用

    开放数据域引用

    1.在game.json声明Layout插件:

    {
    @@ -66,6 +66,6 @@
       }
     }
     

    版本列表

    版本特性
    1.0.11修复样式伪类功能在touchend没有触发的bug
    1.0.10修复1.0.9背景渲染的bug
    1.0.9样式支持伪类能力,transform支持scale,详情可见布局和样式
    1.0.8支持文字描边和文字阴影效果,详情可见布局和样式
    1.0.7修复1.0.6版本Image的borderRadius失效问题
    1.0.61. 修复圆角矩形在有borderRadius的时候绘制不够圆润问题;2. 文字样式支持fontFamily属性;3. 修复 ScrollView 的滚动条在页面布局变化时会位置异常问题;
    1.0.5transform 部分属性支持,使用可见教程
    1.0.4ScrollView 支持 滚动条 特性
    1.0.3兼容在字节小游戏下报错问题
    1.0.2ts重构项目,支持富文本插件能力
    1.0.1修复style.backgroundImage调用不生效问题
    1.0.0修复一些渲染问题;支持缓动特性;支持canvas组件
    0.0.14起始版本,之前的版本小修小补一些问题,不建议引用
    - + diff --git a/plugin/guide.html b/plugin/guide.html index 5d35db22..8e193eaf 100644 --- a/plugin/guide.html +++ b/plugin/guide.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 概览 - +

    概览

    随着应用场景变多,不可避免需要新增一些组件来满足需求,而 Layout 设计里面很重要的一个点是轻量,所以提供了插件机制来满足这些场景。

    插件开发

    插件借鉴了 Vue 的设计,对插件能做什么,没什么限制,插件只需要暴露一个 install 方法和 name 即可,Layout.use 方法实现插件的安装。一个最简单的插件示意如下

    const HelloPlugin =  {
    @@ -49,6 +49,6 @@
       Layout Plugin</a> by yuanzm (<a href="https://codepen.io/yuanzm">@yuanzm</a>)
       on <a href="https://codepen.io">CodePen</a>.
     
    - + diff --git a/plugin/richtext.html b/plugin/richtext.html index 824e9d1b..dcba30ae 100644 --- a/plugin/richtext.html +++ b/plugin/richtext.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 富文本插件 - +

    富文本插件

    富文本组件是用来显示一段带自定义样式的文字,自定义样式包括加粗、颜色、换行、居中等,富文本组件只能支持纯文本,不支持图片。

    安装使用

    // 安装
    @@ -63,6 +63,6 @@
       Layout RichText Demo</a> by yuanzm (<a href="https://codepen.io/yuanzm">@yuanzm</a>)
       on <a href="https://codepen.io">CodePen</a>.
     
    - + diff --git a/tutorial/cocos2.x.html b/tutorial/cocos2.x.html index c620f69b..6a3eff9e 100644 --- a/tutorial/cocos2.x.html +++ b/tutorial/cocos2.x.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; cocos2.x版本适配 - +

    cocos2.x版本适配

    简介

    Cocos Creator 2.x 自带支持开放数据域开发,详情可见文档open in new window

    Cocos Creator 2.x 对开放数据域的支持原理为开放数据域同样为一个完整的 Cocos 项目,在主域通过 SubContextView 组件来实现开放数据域的绘制和更新等逻辑。使用 Cocos 来开发开放数据域好处在于在开放数据域也是一个完整的游戏引擎在驱动,因此可以有更丰富的 UI 效果,但弊端也不少,比如 开放数据域也需要一个引擎、每次调试需要构建等,因此 Cocos Creator 3.x 开放数据域开发方案换成了 Layout 方案,详情可见文档open in new window

    实际上,Cocos Creator 2.x 同样支持使用 Layout 来开发开放数据域,本文详细介绍。

    适配流程

    1. 项目创建

    本文采用 Cocos Creator 2.4.11 版本 ,低版本的处理大同小异。

    示例很简单,添加一个精灵,精灵挂载 SubContextView 组件和 一个自定义脚本(Rank),如下图所示。 Alt text

    挂载了SubContextView组件之后,按照 Cocos 默认的流程,会自动给开放数据域发送几个事件:viewport、boot、frameRate然后开放数据域的 Cocos 工程会根据这些事件做一些处理保证游戏主域和开放数据域配合工作(核心是事件处理)。

    如果使用 Layout 来处理开放数据域,我们忽略这些 Cocos 的事件,通过挂载的自定义脚本来处理。

    const { ccclass, property } = cc._decorator;
    @@ -78,6 +78,6 @@
       }
     });
     

    经过魔改的开放数据域目录可见 openDataContextopen in new window,最后的运行效果如下:

    Alt text

    经过改造后,开放数据域的所有调试都可以在微信开发者工具内实现,不需要在 Cocos 打包单独的开放数据域工程,同时 openDataContext 目录内的 engine.js 也可以删除,通过 微信小游戏插件的方式引用。

    完成工程可见cocos2.x_demoopen in new window

    - + diff --git a/tutorial/loading.html b/tutorial/loading.html index 9e23797c..65a92b24 100644 --- a/tutorial/loading.html +++ b/tutorial/loading.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 加载中效果实现 - +

    加载中效果实现

    简介

    在小游戏开放数据域场景下,需要异步加载好友数据然后渲染,由于开放数据域加载成功事件并不能抛给游戏主域,所以并不能实现游戏主域播放加载动画然后在开放数据域加载完成后隐藏加载动画,因此,只能在开放数据域实现简单的加载动画。

    实际上,借助 Layout 的 transform 样式属性,实现简单的加载中效果并不难,本文介绍如何实现简单的加载中效果。

    兼容性

    v1.0.5版本开始支持 transform。

    完整流程

    布局和样式编写

    布局非常简单,只需要新建个容器,容器内有个静态图片,图片居中展示。

    <view id="container">
    @@ -96,6 +96,6 @@
       });
     }
     

    经过封装,只需要在加载数据之前额外调用 showLoading 函数就能够实现加载中的效果,对原先的流程无需改造。

    温馨提示

    小游戏开放数据域不能用网络图片,只能用本地图片,且图片路径不用带 ./ 前缀。

    - + diff --git a/tutorial/platform.html b/tutorial/platform.html index 31012361..c0e6083c 100644 --- a/tutorial/platform.html +++ b/tutorial/platform.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 平台适配 - +

    平台适配

    Layout 最开始设计出来是为了提升微信小游戏开放数据域开发效率,但现在 Layout 已经被用到各种各样的小游戏平台,作为轻量级 Canvas 应用的解决方案。

    对于渲染引擎,一定会依赖平台的能力,比如创建图片、监听事件等,一般引擎的解决方案是主动适配主要运行平台,比如适配浏览器和微信小游戏。Layout 同样如此,目前已经适配了 浏览器、微信小游戏、字节小游戏和百度小游戏平台,但如果一个全新的平台想要使用 Layout,无需更改 Layout 源码,同样可以进行适配,下面进行简单的介绍。

    原理

    Layout 对于平台环境的依赖并不多,主要是事件监听、图片创建等,所有平台相关的依赖都被封装到 env 模块,它非常精简,代码如下:

    import { Callback } from "./types";
    @@ -137,6 +137,6 @@
     
     // 下面正常执行 Layout的使用
     
    - + diff --git a/tutorial/templateengine.html b/tutorial/templateengine.html index c18d2bc3..fdc9bed4 100644 --- a/tutorial/templateengine.html +++ b/tutorial/templateengine.html @@ -28,7 +28,7 @@ var sc_security="efed24b4"; 模板引擎使用 - +

    模板引擎使用

    模板引擎简介

    Layout 使用 XML 来组织页面布局,比如快速入门里面提到的:

    let template = `
    @@ -73,6 +73,6 @@
       </view>
     {{~}}
     

    示例里面,条件判断了当前 index 是奇数还是偶数给与 view 标签设置不一样的 class,针对不同的 class 可以设置不同的样式,这就很方便实现列表里面奇数和偶数项实现不同的底色。如果是想高亮排行榜里面的前三名,同样可以用类似的条件判断。

    doT.js 还提供了在线的模板编译操作( http 的链接http://olado.github.io/doT/index.htmlopen in new window才能出来这在线编译):

    Layout devtools集成

    除了使用 doT.js 提供的在线模板编译,Layout 更推荐通过 codepen 来创建和维护模板,具体使用步骤如下

    通过模板创建 codepen

    1. 点击https://codepen.io/pen?template=VwEeLKwopen in new window,会创建一个包含Layout hello world示例的模板,该模板已经包含了 doT.js 的基本操作。

    导出模板函数

    因为小游戏不能使用 new Function 和 eval 等操作,所以模板函数必须提前导出,点击顶部 Layout 调试工具箱的 dot,会调用 doT.js 编译出模板函数,将此模板函数复制到小游戏内可以直接使用。

    永久化保存

    模板难免反复编辑和迭代,为了永久化保存,可以点击 Save 保存到自己的 codepen 账户。

    - +