addcustomRenderer demo

luoxiao-supermap · Nov 5, 2021 · dfef23a · dfef23a
1 parent ce7ba83
commit dfef23a
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 0 deletions.
diff --git a/example/customRenderer/App.js b/example/customRenderer/App.js
@@ -0,0 +1,33 @@
+import { h, ref } from "../../lib/mini-vue.esm.js";
+import { game } from "./game.js";
+
+export default {
+  name: "App",
+  setup() {
+    // 通过 ticker 来去更新 x 的值
+
+    const x = ref(0);
+    const y = ref(0);
+    let dir = 1;
+    const speed = 2;
+
+    game.ticker.add(() => {
+      if (x.value > 400) {
+        dir = -1;
+      } else if (x.value < 0) {
+        dir = 1;
+      }
+
+      x.value += speed * dir;
+    });
+
+    return {
+      x,
+      y,
+    };
+  },
+
+  render() {
+    return h("rect", { x: this.x, y: this.y });
+  },
+};
diff --git a/example/customRenderer/game.js b/example/customRenderer/game.js
@@ -0,0 +1,10 @@
+export const game = new PIXI.Application({
+  width: 500,
+  height: 500,
+});
+
+document.body.append(game.view);
+
+export function createRootContainer() {
+  return game.stage;
+}
diff --git a/example/customRenderer/index.html b/example/customRenderer/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <script src="../../node_modules/pixi.js/dist/browser/pixi.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script src="main.js" type="module"></script>
+  </body>
+</html>
diff --git a/example/customRenderer/main.js b/example/customRenderer/main.js
@@ -0,0 +1,5 @@
+import App from "./App.js";
+import { createApp } from "./renderer.js";
+import { createRootContainer } from "./game.js";
+
+createApp(App).mount(createRootContainer());
diff --git a/example/customRenderer/renderer.js b/example/customRenderer/renderer.js
@@ -0,0 +1,25 @@
+import { createRenderer } from "../../lib/mini-vue.esm.js";
+
+// 给基于 pixi.js 的渲染函数
+const renderer = createRenderer({
+  createElement(type) {
+    const rect = new PIXI.Graphics();
+    rect.beginFill(0xff0000);
+    rect.drawRect(0, 0, 100, 100);
+    rect.endFill();
+
+    return rect;
+  },
+
+  patchProp(el, key, prevValue, nextValue) {
+    el[key] = nextValue;
+  },
+
+  insert(el, parent) {
+    parent.addChild(el);
+  },
+});
+
+export function createApp(rootComponent) {
+  return renderer.createApp(rootComponent);
+}