Vue 캔버스 구성 요소를 JS 개체에서 분리하는 중

Vue 캔버스 구성 요소를 JS 개체에서 분리하는 중

캔버스 렌더링 라이브러리(PIXI)의 래퍼인 순수 JS 오브젝트를 가지고 있습니다.이 질문은 여기까지 하겠습니다.Engine이렇게 생겼죠.

class Engine{
    constructor(options) {
        this.renderer = PIXI.autoDetectRenderer(options.width, options.height);
        // [...]

        // Add the canvas to the HTML document
        // * renderer.view is canvas element
        // * options.element is some <div> for example
        this.options.element.appendChild(this.renderer.view);
    }

    startRendering(){
        // This method uses this.renderer
        // [...]
    }

    stopRendering(){
        // This method uses this.renderer
        // [...]
    }

    // some other methods etc...
}

현재 엔진이 생성되면 pixi가 생성됩니다.renderer그 후 추가renderer.view(canvas)에서 HTML 트리로 이동합니다.

Vue에서 작동하도록 Canvas 구성 요소 또는 엔진 구성 요소를 생성하려고 했지만 구성 요소 보기에서 엔진 개체를 분할하거나 분리하는 방법을 모르겠습니다.

중요한 건 내가 원하는 거야EngineVuex 또는 기타 메인 "컨트롤러"에서 일반적으로 사용할 수 있는 오브젝트: 다음과 같은 메서드에 액세스해야 하기 때문입니다.start()또는stop()동시에 컴포넌트에 캔버스를 추가할 수도 있습니다.

Vue에서는 어떻게 해야 합니까?엔진 컴포넌트를 만들고 엔진 + 캔버스를 작성해야 합니까?$el다음 날짜까지 이용하실 수 있습니다.$ref아니면 글로벌 엔진 오브젝트를 생성하여 renderer.view를 캔버스 컴포넌트에 전달하여 추가할 필요가 있습니까?구성 요소에 엔진을 '고정'할 경우 Vue가 엔진을 감시하지 않도록 유의해야 합니다.

언급URL : https://stackoverflow.com/questions/48173928/separating-vue-canvas-component-from-js-object