import * as dot from "https://cdn.skypack.dev/dot@1.1.3";

import Layout from "https://cdn.skypack.dev/minigame-canvas-engine";

import RichText from "https://cdn.skypack.dev/minigame-canvas-engine-richtext";

​

Layout.use(RichText);

​

/**

 * 只需要在Web端调试场景下引用

 * 引入minigame-canvas-engine-devtools之后，layoutDevtools会自动挂载到windows

 */

import LayoutDevTools from "https://cdn.skypack.dev/minigame-canvas-engine-devtools";

​

window.layoutDevtools.init(Layout);

​

const template = document.getElementById("template").innerHTML;

const style = eval(document.getElementById("style").innerHTML);

​

let tempFn = dot.template(template);

let resultText = tempFn({});

​

function init() {

    let canvas = document.getElementById("canvas");

    let context = canvas.getContext("2d");

​

    // 每次初始化之前先执行清理逻辑保证内存不会一直增长

    Layout.clear();

    // 初始化引擎

    Layout.init(resultText, style);

​

  // 设置canvas的尺寸和样式的container比例一致

  canvas.style.width = 1410 / 2 + 'px';

  canvas.style.height = 960 / 2 + 'px';

  canvas.width = 1410;

  canvas.height = 960;

​

  Layout.updateViewPort(canvas.getBoundingClientRect());

​

  Layout.layout(context);

​

  const rich = Layout.getElementsById('rich')[0];

  rich.text = `

  <p>这是一段富文本测试</p>

  <br>

  <strong>这是一段加粗的标题</strong>

  <p>这里展示了<strong>嵌套</strong>的标签</p>

  <br>

  <p>前面是一个换行</p>

  <p>文字可以自定义<span style="color: red">颜色</span>

  <br>

  <p style="font-weight: 300">样式可以<span style="color: blue">继承</span>，也可以<span style="font-weight: bold">自定义</span>，这段很长的文字会自动换行，富文本组件都会自动处理好</p>

  <p style="text-align: center">这是一段居中的文本，居中的文本暂不支持内嵌标签</p>

  `;

}

​

init();

​