我正在尝试使用 Svelte 安装 pixi.js
Canvas ,如下所示。 app.view
是一个 HTML Canvas
元素,但我不确定如何用 Svelte 显示它。
<script>
import * as PIXI from 'pixi.js'
import { onMount } from 'svelte';
let app = new PIXI.Application({
width: 256, // default: 800
height: 256, // default: 600
antialias: true, // default: false
transparent: false, // default: false
resolution: 1 // default: 1
})
</script>
<style></style>
<app.view />
我暂时只使用这个,但如果能够将其添加到模板中那就太好了。
onMount(() => {
document.body.appendChild(app.view);
})
最佳答案
来自 bind:this
的文档
To get a reference to a DOM node, use
bind:this
.
<div bind:this={container}/>
let container;
onMount(() => {
container.appendChild(app.view);
});
这是一个实例:https://svelte.dev/repl/118b7d4540c64f8491d10a24e68948d7?version=3.12.1
如果您想避免使用包装器元素或自己实例化 Canvas ,您可以在 onMount
中创建 Pixi 应用程序并向其传递一个 Canvas 元素:
<canvas bind:this={view}/>
let view;
let app;
onMount(() => {
app = new PIXI.Application({
view,
// ...other props
});
});
另请参阅the official bind:this
example使用 Canvas 。
关于来自 Javascript 的 Svelte Mount DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58014699/