g2图表库是否可以作为PIXI画布的子元素，我们想用pixi做数据图表的可视化搭建 about g2

[hustcc]

感觉这样玩很酷啊，你现在的思路是讲 pixi 的 canvas 传给 G2，这样可能会带来一些问题，就是 pixi 和 G2 都会对同一个画布进行操作（擦除和重绘）

建议的做法：

在 Pixi 中增加一层 dom，在这个 dom 中去单独绘制 G2 的画布，整体效果就是两个 canvas 叠加在一起，视觉上是在同一个画布。

这个做法在可视化中其实挺多的，比如在 G2、G6、L7 中做的一些标注、插件等，使用 html 有天然的灵活性，所以做法都是在 canvas 上盖一层 dom。

[JayLi52]

感觉这样玩很酷啊，你现在的思路是讲 pixi 的 canvas 传给 G2，这样可能会带来一些问题，就是 pixi 和 G2 都会对同一个画布进行操作（擦除和重绘）

建议的做法：

在 Pixi 中增加一层 dom，在这个 dom 中去单独绘制 G2 的画布，整体效果就是两个 canvas 叠加在一起，视觉上是在同一个画布。

这个做法在可视化中其实挺多的，比如在 G2、G6、L7 中做的一些标注、插件等，使用 html 有天然的灵活性，所以做法都是在 canvas 上盖一层 dom。

你说的pixi中增加DOM是指哪个API，chart图表的交互细节会丢失吧。我这里是想把pixi作为父级元素，chart图表作为子元素

[hustcc]

伪代码参考。其中新建的 div ，使用 absolute 布局，保持 上右下左边距都为 0。

class Pie extends PIXI.Container {
    constructor(app: PIXI.Application) {
        super();
        this.container = this.createChartContainerDOM()
    }
    createChartContainerDOM() {
        const div = document.createElement('div');
        this.app.container.appendChild(div);

        return div;
    }

[xiaoiver]

目前是无法和 PIXI 共享一个 Canvas 上下文绘制的，原因是他俩都有各自独立的绘制流程，共享一个反而会互相干扰。
还是和上面的做法一样，分成两个 HTMLCanvasElement 会比较好。