DOM Элемент Svelte Mount из Javascript - PullRequest
Новая
       44

DOM Элемент Svelte Mount из Javascript

1 голос
/ 19 сентября 2019

Я пытаюсь смонтировать pixi.js холст с помощью Svelte, как показано ниже.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);
    })

1 Ответ

1 голос
/ 19 сентября 2019

Из документов bind:this

Чтобы получить ссылку на узел DOM, используйте bind:this. 

<div bind:this={container}/>

let container;
onMount(() => {
  container.appendChild(app.view);
});

Вот живой пример: https://svelte.dev/repl/118b7d4540c64f8491d10a24e68948d7?version=3.12.1

Если вы хотите избежать элемента-оболочки или создать экземпляр canvas, вы можете создать приложение Pixi в onMount и передать ему элемент canvas: 

<canvas bind:this={view}/>

let view;
let app;
onMount(() => {
  app = new PIXI.Application({
    view,
    // ...other props
  });
});

См. Также официальный bind:this пример , использующий холст.

...