快速入门

安装

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

极简示例

引用渲染引擎：

import Layout from "minigame-canvas-engine";

编写模板字符串：这里采用 XML 去描述界面，而且支持有限的标签。需要特别注意的是，模板字符串只能有一个根节点，第二个节点会被忽略。如果想让模板更加强大，可以借助第三方模板引擎如dot.jsopen in new window。这一步需要开发者掌握一定程度的 Web 前端开发知识，如果你只有游戏开发经验没有任何 Web 前端开发经验，建议花点时间阅读下面教程：

CSS教程open in new window：能够了解 Web 端是如何组织页面样式的；
Flex布局教程open in new window: 这个非常重要，Layout 布局仅仅支持 Flex 布局，通读教程能够了解如何进行页面布局；

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

如果对布局和样式仍然有一些疑惑，可以参照 Layout demo 合集open in new window，复制已有demo进行简单魔改是个不错的方案。

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

let style = {
  container: {
    width: 400,
    height: 200,
    backgroundColor: "#ffffff",
    justifyContent: "center",
    alignItems: "center",
  },
  testText: {
    color: "#ffffff",
    width: "100%",
    height: "100%",
    lineHeight: 200,
    fontSize: 40,
    textAlign: "center",
  },
  // 文字的最终颜色为#ff0000
  redText: {
    color: "#ff0000",
  },
};

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

Layout.init(template, style);

执行渲染：指定被渲染的 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);

渲染结果

事件绑定

let text = Layout.getElementsById("testText")[0];

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

在线查看效果如下：