Question

我有纯JS对象，它是画布渲染库（PIXI）的包装器。对于这个问题，让我们称之为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（画布）附加到HTML树。

我想创建 Canvas组件或引擎组件以使其在Vue中运行，但我不知道应该如何将Engine对象与组件视图分开或分开。< / p>

整个问题是我希望{Vp}或其他主要＆＃34;控制器＆＃34;提供Engine对象。因为我需要访问像start()或stop()这样的方法，但同时我需要提供将canvas附加到组件的可能性。

如何在Vue中完成这项工作？我应该创建引擎组件并创建引擎+将画布附加到$el并使其$ref可用，或者我应该在某处创建全局引擎对象并以某种方式将renderer.view传递给我的canvas组件来追加它？我想要注意的是，我不希望Vue观看引擎，如果我＆＃39; pin＆＃39;它到组件。

将Vue canvas组件与JS对象分离

0 个答案: