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

​

const HelloPlugin =  {

  install(Layout) {

    Layout.sayHello = () => {

      console.log('Hello Layout Plugin');

    }

  },

  uninstall(Layout) {

    delete Layout.sayHello;

  },

  name: 'Hello'

}

​

Layout.use(HelloPlugin);

​

Layout.sayHello();

​

Layout.unUse(HelloPlugin);

​

try {

  Layout.sayHello();  

} catch(e) {

  console.log(e.message); // "Layout.sayHello is not a function" 

}

​

​

/**

 * 只需要在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 canvas = document.getElementById('canvas');

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

​

Layout.init(template, style);

​

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

​

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

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

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

canvas.width = container.style.width;

canvas.height = container.style.height;

​

Layout.updateViewPort(canvas.getBoundingClientRect());

​

Layout.layout(context);

​