如何在Svelte中挂载PIXI.js的Canvas元素？

你现在的思路方向是对的，但 <app.view />这种写法在Svelte里是行不通的——因为app.view是一个已经生成好的DOM Canvas元素，不能直接作为模板标签使用。想要在Svelte组件内部直接控制这个Canvas的位置，只需要通过绑定容器元素的方式就能实现，不用再把它追加到document.body里。

下面是完整的可运行代码示例：

<script>
  import * as PIXI from 'pixi.js';
  import { onMount } from 'svelte';

  // 用来绑定模板中的容器DOM元素
  let pixiContainer;
  let pixiApp;

  onMount(() => {
    // 初始化PIXI应用
    pixiApp = new PIXI.Application({
      width: 256,
      height: 256,
      antialias: true,
      transparent: false,
      resolution: 1
    });

    // 把PIXI生成的Canvas挂载到我们的组件容器里
    if (pixiContainer) {
      pixiContainer.appendChild(pixiApp.view);
    }

    // 可以加个测试图形验证是否正常工作
    const testSquare = new PIXI.Graphics();
    testSquare.beginFill(0xFF3300);
    testSquare.drawRect(50, 50, 100, 100);
    testSquare.endFill();
    pixiApp.stage.addChild(testSquare);

    // 组件销毁时清理PIXI资源，防止内存泄漏
    return () => {
      pixiApp.destroy(true);
    };
  });
</script>

<style>
  .pixi-wrapper {
    /* 这里可以自定义容器样式，比如边框、居中、间距等 */
    margin: 20px auto;
    border: 1px solid #eee;
    border-radius: 4px;
  }
</style>

<!-- 模板中的容器，通过bind:this关联到script里的变量 -->
<div class="pixi-wrapper" bind:this={pixiContainer}></div>

关键知识点说明： #

• 绑定DOM元素：用bind:this={pixiContainer}把模板里的div和script中的变量绑定，这样就能在onMount里直接拿到这个容器的DOM节点，把PIXI的Canvas挂载进去。
• 组件化控制：把Canvas放在组件内部的容器里，你可以通过Svelte的样式系统直接控制它的位置、边框、间距等，完全符合组件化开发的思路，不用再依赖全局的document.body。
• 资源清理：在onMount的返回函数里调用pixiApp.destroy(true)，确保组件销毁时PIXI的所有资源都被正确清理，避免内存泄漏。
• 为什么<app.view />不行：Svelte模板里的标签只能是原生HTML元素或Svelte组件，app.view是一个已经存在的DOM对象，不能直接作为标签渲染，必须通过DOM操作挂载到现有节点上。

内容的提问来源于stack exchange，提问作者Ryan King