能做到在画布中集成已有的 canvas 框架吗

[ziqiangai]

比如 Echart G2 这样的 canvas 并调用其内部的接口
好像不能，只能把它们当作图片嵌入进去

[xiaoiver]

我在之前的项目里试过支持嵌入 HTML，这样更方便与其他组件库、图表库结合，基本无侵入性。如果只是从 canvas 导出图片再添加到画布的话，就丧失组件/图表本身的交互性了。

画布需要提供一个 DOM 容器，控制它的变换来做一些基础的联动，比如跟随相机缩放，组件库图表库就管自己的渲染逻辑。类似：

const container = new HTML();
canvas.appendChild(container);

const $g2 = new G2.Chart({ container });

在 DOM 结构上看可能会长这样：

<infinite-canvas>
  <canvas></canvas> <!-- our webgl / webgpu renderer -->
  <div class="g2" style="transform='matrix()'"></div>
</infinite-canvas>

[ziqiangai]

这也是一种解决方案。

需要把画布的缩放比例，以及分辨率传给 组件。

拖拽的显示由 画布控制就可以啦。

我想的对吗?

这个demo是这样做的：
https://github.com/ceddlyburge/react-figma-miro-canvas-part-3