opendatacontextengine

项目介绍

对小游戏游戏开发而言，开放数据域开发一直存在引入游戏引擎导致代码包体积偏大和利用canvas原生开发绘制界面麻烦的矛盾。其实对于大部分小游戏而言，开放数据域仅仅需要绘制一个可滚动的游戏列表和添加一些简单的点击交互，这和常见的Web开发非常相似。本项目旨在引入一段相对游戏引擎而言体积非常小的通用库后以Web开发的方式开发canvas界面，因此，本项目仅支持简单的UI绘制，不会支持动画等功能。

问题分析

对于Web开发而言，开发者仅需要编写HTML+CSS，浏览器会理解这些代码并渲染出开发者需要的界面。对于canvas开发而言，仅有一系列很原子的API，开发者需要自己合理组织API的时序来完成布局。如果想让canvas开发类Web开发，我们在采用HTML+CSS或者类HTML+类CSS开发的时候，需要有一个简单的渲染引擎能够解析和渲染到canvas上面。

解决方案

对于上述问题，最麻烦的是计算一颗树的布局，得出每个元素的位置和尺寸属性，幸运的是，早已有人造出这样的轮子，乍一看觉得这库没什么用，实际上非常契合canvas的场景：没有DOM，纯JavaScript实现CSS的子集，包括flexbox和box模型。当最麻烦的布局解决之后，就需要将每个元素按照canvas的API将borderColor、textAlign、color等属性表达出来，本项目应运而生。

更新日志

在尚未正式发布阶段，项目迭代会比较频繁，遇到问题可以优先尝试升级成最新版本，更新日志详见CHANGELOG.md

效果预览

安装使用

克隆本项目到合适的文件夹

   git clone https://git.weixin.qq.com/wechat-minigame/open-data-context-engine

引用渲染引擎：

import Layout from 'open-data-context-engine/index.js'

编写模板字符串：这里采用XML去描述界面，而且支持有限的标签。需要特别注意的是，模板字符串只能有一个根节点，第二个节点会被忽略。如果想让模板更加强大，可以借助第三方模板引擎如dot.js。

   let template = `
    <view id="container">
       <text id="testText" class="redText" value="hello canvas">
    </view>
   `

编写样式：样式为一个style对象，与Web开发不同的是，不受属性前后顺序的影响，class的属性会覆盖id的同名属性。tips: 由于采用了第三方的布局引擎css-layout，在编写样式的时候为所有元素都设置好width和height属性会更容易得到想要的效果，其中根节点必须设置width和height属性。

   let style = {
       container: {
           width: 200,
           height: 100,
           backgroundColor: '#ffffff',
           justContent: 'center',
           alignItems: 'center',
       },
       testText: {
           color: '#ffffff',
           width: 200,
           height: 50,
           lineHeight: 50,
           fontSize: 20,
           textAlign: 'center',
       },
       // 文字的最终颜色为#ff0000
       redText: {
           color: '#ff0000',
       }
   }
}

初始化渲染引擎：将第二第三步编写的模板和样式传给渲染引擎，渲染引擎会生成布局树和渲染树等，准备渲染到canvas上面。

   Layout.init(template, style);

执行渲染：指定被渲染的context，绘制UI

// sharedContext自行创建
Layout.layout(sharedContext);

如果本渲染引擎在子域中使用，需要设置主域的渲染信息：

// 设置sharedCancas在主域绘制的物理尺寸和位置信息，这一步非常重要，因为子域渲染引擎并不关心外部使用的引擎是什么，而是自己监听触摸事件来进行事件处理，因此需要拿到真实的物理尺寸、位置信息来执行事件处理。
 Layout.updateViewPort({
       width : 200,
       height: 100,
       x     : 100,
       y     : 100
 });

API

LayoutAPI

1. Layout.getElementsById(String elementId)

获取元素id为elementId的一组元素

2. Layout.getElementsByClassName(String className)

获取包含class为className的一组元素

3. Layout.clear()

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

4. Layout.clearPool()

调用此API可以清理对象池，释放内存

5. Layout.clearAll()

等价于按序调用Layout.clear和Layout.clearPool.

6. Layout.loadImgs(Array imgarr)

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

// 注意图片路径不需要加./作为前缀，以小游戏根目录作为根目录
Layout.loadImgs([
    'sub/Buffet_icon_GiftPlate_0.png',
    'sub/Buffet_icon_GiftPlate.png',
    'sub/UI_Icon_Rating.png',
]);

事件API

通过getElementsById或者getElementsByClassName获取元素之后，可以的绑定事件，支持的事件有touchstart、touchmove、touchend、touchcancel、click,示例如下：

const list = Layout.getElementsByClassName('listItem');

list.forEach(item => {
    item.on('touchstart', (e) => {
        console.log(e, item);
    });
});

事件API

通过Layout.getElementsById和Layout.getElementsByClassName获取image和text之后，修改图片的链接或者文本的值会自动重渲染界面。

let img = Layout.getElementsById('testimgid')[0];
img.src = 'newimgsrc';

let text = Layout.getElementsById('tesettextid')[0];
text.value = 'newtextvalue';

标签	说明
view	容器标签，与HTML中的div相似
scrollview	滚动列表容器，如果容器内的子元素高度大于scrollview高度，支持纵向滚动，不支持嵌套scrollview
image	图片标签，注意图片路径不需要加./作为前缀，以小游戏根目录作为根目录
text	文本标签

标签属性

属性	类型	是否必填	说明
id	string	否	非唯一标识，两个标签可以共用id
class	string	否	与浏览器相同
value	string	否	text标签支持
src	string	否	image标签才支持

样式

布局

属性	类型	说明
flexDirection	string	与浏览器中的 flex 相同
justifyContent	string	与浏览器中的 flex 相同
alignItems	string	与浏览器中的 flex 相同
alignSelf	string	与浏览器中的 flex 相同
flex	string	与浏览器中的 flex 相同
flexWrap	string	与浏览器中的 flex 相同
position	string	定位方式

flexDirection 的有效值

值	说明
row	与浏览器中的 flex 相同
column	与浏览器中的 flex 相同

justifyContent 的有效值

值	说明
flex-start	与浏览器中的 flex 相同
center	与浏览器中的 flex 相同
flex-end	与浏览器中的 flex 相同
space-between	与浏览器中的 flex 相同
space-around	与浏览器中的 flex 相同

alignItems 的有效值

值	说明
flex-start	与浏览器中的 flex 相同
center	与浏览器中的 flex 相同
flex-end	与浏览器中的 flex 相同
stretch	与浏览器中的 flex 相同

flexWrap 的有效值

值	说明
wrap	与浏览器中的 flex 相同
nowrap	与浏览器中的 flex 相同

position 的有效值

值	说明
absolute	绝对定位
relative	相对定位

位置

属性	类型	说明
left	number	绝对定位左上角的水平距离
top	number	绝对定位左上角的垂直距离
right	number	绝对定位右下角的水平距离
bottom	number	绝对定位左上角的水平距离

外边距

属性	类型	说明
margin	number	外边距
marginLeft	number	左外边距
marginTop	number	上外边距
marginRight	number	右外边距
marginBottom	number	下外边距

内边距

属性	类型	说明
padding	number	内边距
paddingLeft	number	左内边距
paddingTop	number	上内边距
paddingRight	number	右内边距
paddingBottom	number	下内边距

文本

属性	类型	说明
color	string	文本的颜色，支持 6 位 16 进制、8 位 16 进制、rgb、rgba 四种格式的颜色
fontSize	string	文本的字号
fontWeight	string	字重
textAlign	string	文本的水平对齐方式
lineHeight	string	文本的行高（用行高等于高度的方式支持垂直居中）

fontWeight 的有效值

值	说明
normal	普通
bold	粗体

textAlign 的有效值

值	说明
left	左对齐
center	居中对齐
right	右对齐

容器

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

边框

属性	类型	默认值	说明
borderRadius	number		边框圆角
borderColor	string		边框颜色，支持 6 位 16 进制、8 位 16 进制、rgb、rgba 四种格式的颜色

opendatacontextengine

项目介绍

问题分析

解决方案

更新日志

效果预览

安装使用

API

LayoutAPI

1. Layout.getElementsById(String elementId)

2. Layout.getElementsByClassName(String className)

3. Layout.clear()

4. Layout.clearPool()

5. Layout.clearAll()

6. Layout.loadImgs(Array imgarr)

事件API

事件API

标签

标签列表

标签属性

样式

Readme

Keywords

Package Sidebar

Install

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

opendatacontextengine

项目介绍

问题分析

解决方案

更新日志

效果预览

安装使用

API

LayoutAPI

1. Layout.getElementsById(String elementId)

2. Layout.getElementsByClassName(String className)

3. Layout.clear()

4. Layout.clearPool()

5. Layout.clearAll()

6. Layout.loadImgs(Array imgarr)

事件API

事件API

标签

标签列表

标签属性

样式

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads