# 快速入门

# 安装

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

# 极简示例

  1. 引用渲染引擎:
import Layout from 'minigame-canvas-engine'
  1. 编写模板字符串:这里采用XML去描述界面,而且支持有限的标签。需要特别注意的是,模板字符串只能有一个根节点,第二个节点会被忽略。如果想让模板更加强大,可以借助第三方模板引擎如dot.js
let template = `
    <view id="container">
        <text id="testText" class="redText" value="hello canvas"></text>
    </view>
`
  1. 编写样式:样式为一个style对象,与Web开发不同的是,不受属性前后顺序的影响,class的属性会覆盖id的同名属性。

TIP

由于采用了第三方的布局引擎css-layout,在编写样式的时候为所有元素都设置好width和height属性会更容易得到想要的效果,其中根节点必须设置width和height属性。

let style = {
    container: {
        width: 400,
        height: 200,
        backgroundColor: '#ffffff',
        justContent: 'center',
        alignItems: 'center',
    },
    testText: {
        color: '#ffffff',
        width: 400,
        height: 200,
        lineHeight: 200,
        fontSize: 40,
        textAlign: 'center',
    },
    // 文字的最终颜色为#ff0000
    redText: {
        color: '#ff0000',
    }
}
  1. 初始化渲染引擎:将第二第三步编写的模板和样式传给渲染引擎,渲染引擎会生成布局树和渲染树等,准备渲染到canvas上面。
Layout.init(template, style);
  1. 执行渲染:指定被渲染的context,绘制UI
// 首先在HTML里面创建canvas
// <canvas id="canvas"></canvas>

let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

// 设置canvas的尺寸和样式的container比例一致
canvas.style.width = 400 + 'px';
canvas.style.height = 200 + 'px';
canvas.width = 400;
canvas.height = 200;

Layout.updateViewPort({
    x     : 0,
    y     : 0,
    width : 400,
    height: 200,
});

Layout.layout(context);
  1. 渲染结果
  1. 事件绑定
let text = Layout.getElementsById('testText')[0];

text.on('click', (e) => {
  alert('hello canvas');
});

上述示例代码可见:https://github.com/wechat-miniprogram/minigame-canvas-engine/tree/master/demos/helloworld