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

[JayLi52]

问题描述

import { Chart } from '@antv/g2';
import * as PIXI from 'pixi.js';

class Pie extends PIXI.Container {
    private chart: Chart | null; // 存储图表实例
    private app: PIXI.Application;

    constructor(app: PIXI.Application) {
        super();
        this.chart = null;
        this.app = app;
        this.createPieChart(); // 在构造函数中调用创建饼状图的方法
    }

    // 创建并绘制饼状图
    private createPieChart() {
        // const container = new PIXI.Container(); // 创建一个 PIXI 容器用于承载图表

        this.chart = new Chart({
            // container: document.createElement('div'),
            canvas: this.app.canvas as any,
            width: 400, // 设置宽度
            height: 300, // 设置高度
        });
        const data = [
            { item: '事例一', count: 40, percent: 0.4 },
            { item: '事例二', count: 21, percent: 0.21 },
            { item: '事例三', count: 17, percent: 0.17 },
            { item: '事例四', count: 13, percent: 0.13 },
            { item: '事例五', count: 9, percent: 0.09 },
        ];
        this.chart.coordinate({ type: 'theta', outerRadius: 0.8 });

this.chart
  .interval()
  .data(data)
  .transform({ type: 'stackY' })
  .encode('y', 'percent')
  .encode('color', 'item')
  .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
  .label({
    position: 'outside',
    text: (data: { item: any; percent: number; }) => `${data.item}: ${data.percent * 100}%`,
  })
  .tooltip((data) => ({
    name: data.item,
    value: `${data.percent * 100}%`,
  }));
        this.chart.render(); // 渲染图表

        console.log(this.chart)

        // 将 G2 图表转换为 Canvas
const canvasWrap = this.chart.getContainer();


// 创建 Pixi.js 纹理
const texture = PIXI.Texture.from(canvasWrap.firstChild as HTMLCanvasElement);

// 创建 Pixi.js 精灵
const sprite = new PIXI.Sprite(texture);

// 添加精灵到 Pixi.js 场景中
this.addChild(sprite);
    }
}

export default Pie;

做过的尝试：
1、把图表canvas转成pixi纹理，但是丢失了原有图表的各种交互
2、new Chart({canvas: this.app.canvas as any...})，但是无法拿到config，报错this._context.canvas.getConfig().supportsCSSTransform = true
getConfig方法不存在。这里猜测：pixi的canva和chart canvs的context不一样，导致无法兼容

pixijs：https://pixijs.com/

重现链接

No response

重现步骤

No response

预期行为

我想在pixi画布上新建图表，并且该图表是pixi画布的子元素

pixijs：https://pixijs.com/

希望可以提供一个平滑的处理方式，pixi和g2 chart的兼容

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[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 会比较好。