开放数据域UI绘制解决方案发布 —— 轻量级的Canvas渲染引擎
我们有收到很多反馈：在开放数据域做UI界面太难了！！ “我只是想绘制一个简单的好友列表，最多加个赠送或者邀请按钮，在开放数据域做UI界面太难了！！” “开放数据域引入一个独立的游戏引擎会占据好多代码包体积” “纯canvas开发真的太麻烦，代码可读性差，事件处理也很麻烦” 这是很多开发者的心声。 为此，开发哥哥们也提供了开放数据域UI绘制的解决方案——轻量级的canvas渲染引擎。 体积小！性能还杠杠的！上面的demo就是用它完成的。 轻量级的canvas渲染引擎 这款轻量级的canvas渲染引擎，它具有以下特点： · 引擎体积很小，压缩之后仅~50kb； · 类Web开发，只需提供XML + CSS即可渲染界面，提高代码可维护性； · 性能强大：长列表滚动可跑满60帧； [图片] | 使用教程： · step 1：克隆本项目到合适的文件夹，引用引擎 [代码]// 通过Git的方式安装[代码][代码]git clone https:[代码][代码]//github.com/wechat-miniprogram/minigame-canvas-engine[代码] [代码]// 引用渲染引擎[代码][代码]import Layout from [代码][代码]'minigame-canvas-engine'[代码] · step 2：为UI界面编写模板和样式 [代码]let template = `[代码][代码]<view >[代码][代码] [代码][代码]<text value=[代码][代码]"hello canvas"[代码][代码]> </text>[代码][代码]</view>[代码][代码]`[代码] [代码]let style = {[代码][代码] [代码][代码]container: {[代码][代码] [代码][代码]width: 200,[代码][代码] [代码][代码]height: 100,[代码][代码] [代码][代码]backgroundColor: [代码][代码]'#ffffff'[代码][代码],[代码][代码] [代码][代码]justContent: [代码][代码]'center'[代码][代码],[代码][代码] [代码][代码]alignItems: [代码][代码]'center'[代码][代码],[代码][代码] [代码][代码]},[代码][代码] [代码][代码]testText: {[代码][代码] [代码][代码]color: [代码][代码]'#ff0000'[代码][代码],[代码][代码] [代码][代码]width: 200,[代码][代码] [代码][代码]height: 100,[代码][代码] [代码][代码]lineHeight: 100,[代码][代码] [代码][代码]fontSize: 30,[代码][代码] [代码][代码]textAlign: [代码][代码]'center'[代码][代码],[代码][代码] [代码][代码]}[代码][代码]}[代码] · step 3：调用渲染API，执行真正的渲染 [代码]// 将模板和样式传给渲染引擎，渲染引擎会生成布局树和渲染树等，准备渲染到canvas上面[代码][代码]Layout.init(template, style);[代码][代码] [代码] [代码]// sharedContext自行创建[代码][代码]Layout.layout(sharedContext);[代码] [代码]/**[代码][代码] [代码][代码]* 设置sharedCancas在主域绘制的物理尺寸和位置信息，这一步非常重要，[代码][代码] [代码][代码]* 因为子域渲染引擎并不关心外部使用的引擎是什么，而是自己监听触摸事件来进行事件处理，[代码][代码] [代码][代码]* 因此需要拿到真实的物理尺寸、位置信息来执行事件处理。[代码][代码] [代码][代码]*/[代码][代码]Layout.updateViewPort({[代码][代码] [代码][代码]width : 200,[代码][代码] [代码][代码]height: 100,[代码][代码] [代码][代码]x : 100,[代码][代码] [代码][代码]y : 100[代码][代码]});[代码] · step 4：效果预览 [图片] || TIPS： 详细的教程可以查看文档； 为了方便调试，还可以使用在线编辑功能； 上面的邀请好友获得激励的demo示例，也是用这个canvas渲染引擎实现的喔。 对定向分享奖励还有什么疑问或者经验分享？希望了解哪些方面的实践教程？欢迎在评论区留言。
