请教F2可以使用webgl渲染吗？

[Ryan-CW-Code]

Taro+微信小程序，最新版本F2，我使用@antv/g-mobile-webgl渲染黑屏

[github-actions]

@Ryan-CW-Code 您好！以下是关于您问题的自动回复：

您好，感谢您的反馈！

针对您的问题：

1. F2 是否支持 WebGL 渲染？

F2 原生仅支持 Canvas 和 SVG 渲染。要在微信小程序等环境中使用 WebGL 渲染，需要借助 @antv/g-mobile-webgl 渲染器，并配合 F2 的最新版本使用。

2. Taro + 微信小程序下 WebGL 黑屏的排查建议

出现黑屏常见于环境或配置不兼容。请参考以下几点进行排查和配置：

步骤一：确保依赖版本兼容

• F2 需为最新版本（>=4.0）。
• @antv/g-mobile-webgl 需为与 F2 兼容的最新版本。

步骤二：小程序端 WebGL 支持

• 微信小程序 canvas 组件需开启 type="webgl"。例如：

  <canvas id="chart-canvas" type="webgl" style="width: 300px; height: 200px;" />

• 确保微信基础库 >= 2.9.0。

步骤三：正确初始化 renderer

示例代码（仅供参考，请结合 Taro 项目实际情况调整）：

import { Canvas, Chart, jsx, Axis, Interval } from '@antv/f2';
import { Renderer } from '@antv/g-mobile-webgl';

// 获取 canvas 上下文
const query = wx.createSelectorQuery();
query.select('#chart-canvas')
  .fields({ node: true, size: true })
  .exec((res) => {
    const canvas = res[0].node;
    const renderer = new Renderer();

    const { props } = (
      <Canvas
        context={canvas.getContext('webgl')}
        renderer={renderer}
        width={res[0].width}
        height={res[0].height}
      >
        <Chart data={yourData}>
          <Axis field="x" />
          <Axis field="y" />
          <Interval x="x" y="y" />
        </Chart>
      </Canvas>
    );
    const chart = new Canvas(props);
    chart.render();
  });

步骤四：Taro 配置

• Taro 需正确传递 canvas 节点和 context，避免与原生小程序 API 混用导致不兼容。
• 部分 Taro 版本对 canvas 的支持有限，建议优先用微信原生 canvas 组件。

3. 其他建议

• 检查控制台及微信开发者工具是否有报错信息。
• 如仍然黑屏，可尝试先用 SVG 或 Canvas 渲染器排查是否为数据或 F2 配置问题。

4. 参考资料

• F2 官方文档
• g-mobile-webgl 用法
• 微信小程序官方 canvas 指南

---

如仍有疑问，请提供您具体的代码片段或报错信息，我们会进一步协助定位。

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[Ryan-CW-Code]

import { CSSProperties, ReactNode, useEffect, useId, useRef } from 'react';
import { createSelectorQuery, getSystemInfoSync, nextTick } from '@tarojs/taro';
import { ITouchEvent, CanvasTouchEvent, Canvas, ITouch, CanvasTouch } from '@tarojs/components';
import { Canvas as FFCanvas } from '@antv/f2';
import { Renderer as WebGLRenderer } from '@antv/g-mobile-webgl';
import Taro from '@tarojs/taro';
import clsx from 'clsx';
import { useGlobalStore } from '@/store/globalStore';

const f2Type = 'webgl';

function convertTouches(touches: ITouch[] | CanvasTouch[]) {
  if (!touches) return touches;
  touches.forEach((touch) => {
    touch.clientX = touch.x;
    touch.clientY = touch.y;
  });
  return touches;
}

function dispatchEvent(
  el: ReturnType<FFCanvas['getCanvasEl']> | undefined,
  event: CanvasTouchEvent | ITouchEvent,
  type: string,
) {
  if (!el || !event) return;

  if (!event.preventDefault) event.preventDefault = function () {};

  // 不能修改原始事件，构造一个新的轻量事件对象
  const eref: any = {};

  // 基本字段
  eref.type = type;
  eref.target = el;
  //   eref.currentTarget = el;
  eref.preventDefault = () => {};
  console.log('el', eref, event);

  const { touches, changedTouches, detail } = event;
  eref.touches = convertTouches(touches);
  //   eref.targetTouches = convertTouches(touches);
  eref.changedTouches = convertTouches(changedTouches);
  //   if (detail) {
  //     eref.clientX = detail.x;
  //     eref.clientY = detail.y;
  //   } else
  if (eref.touches[0]) {
    eref.clientX = eref.touches[0]?.clientX;
    eref.clientY = eref.touches[0]?.clientY;
    eref.pageX = eref.touches[0]?.pageX;
    eref.pageY = eref.touches[0]?.pageY;
  }

  el.dispatchEvent(eref);
}

const F2Canvas = (props: { id?: string; children?: ReactNode; style?: CSSProperties; className?: string }) => {
  const { id, children } = props;

  const reactId = useId();
  const f2Id = id || `f2Canvas-${reactId}`;
  const canvasRef = useRef<typeof Canvas>();
  const ffCanvasRef = useRef<FFCanvas>();

  // 更新 children
  useEffect(() => {
    ffCanvasRef.current?.update({ children });
  }, [children]);

  // 销毁 FFCanvas
  useEffect(() => () => ffCanvasRef.current?.destroy(), []);

  const renderCanvas = () => {
    const query = createSelectorQuery();
    query
      .select(`#${f2Id}`)
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log('res', res);

        if (!res[0]) return;

        const { node, width, height } = res[0];
        const { requestAnimationFrame, cancelAnimationFrame } = node;
        // const pixelRatio = getSystemInfoSync().pixelRatio;
        const pixelRatio = useGlobalStore.getState().navBarInfo.pixelRatio;
        // 高清设置
        node.width = width * pixelRatio;
        node.height = height * pixelRatio;

        const context = node.getContext(f2Type);
        console.log('webgl', context, pixelRatio);
        const webglRenderer = new WebGLRenderer();

        const canvas = new FFCanvas({
          pixelRatio,
          width,
          height,
          //   theme: 'light',
          context,
          children,
          renderer: webglRenderer,
          // @ts-ignore
          offscreenCanvas: Taro.createOffscreenCanvas({ type: f2Type }),
          createImage: () => {
            // 必须使用 node.createImage， 不能解构，否则会报错,
            // https://github.com/antvis/F2/issues/1838
            return node.createImage();
          },
          requestAnimationFrame,
          cancelAnimationFrame,
          isTouchEvent: (e) => e.type.startsWith('touch'),
          isMouseEvent: (e) => e.type.startsWith('mouse'),
        });

        ffCanvasRef.current = canvas;
        canvas.render();
      });
  };

  useEffect(() => {
    if (canvasRef.current) renderCanvas();
    // if (canvasRef.current) nextTick(() => renderCanvas());
  }, [canvasRef]);

  return (
    <Canvas
      id={f2Id}
      canvasId={f2Id}
      ref={canvasRef}
      type={f2Type}
      animate={false}
      className={clsx('z-50 m-0 block h-[300px] w-full bg-slate-300 p-0', props.className)}
      style={props.style}
      disableScroll
      onClick={(e) => dispatchEvent(ffCanvasRef.current?.el, e, 'click')}
      onTouchStart={(e) => {
        dispatchEvent(ffCanvasRef.current?.el, e, 'touchstart');
        // dispatchEvent(ffCanvasRef.current?.el, e, 'touchstart');
      }}
      onTouchMove={(e) => {
        dispatchEvent(ffCanvasRef.current?.el, e, 'touchmove');
        // dispatchEvent(ffCanvasRef.current?.el, e, 'touchmove');
      }}
      onTouchEnd={(e) => {
        dispatchEvent(ffCanvasRef.current?.el, e, 'touchend');
        // dispatchEvent(ffCanvasRef.current?.el, e, 'touchend');
      }}
      onTouchCancel={(e) => dispatchEvent(ffCanvasRef.current?.el, e, 'touchcancel')}
      onLongTap={(e) => dispatchEvent(ffCanvasRef.current?.el, e, 'press')}
    />
  );
};

export default F2Canvas;

``` 这是我目前写的demo。
测试使用@antv/g-mobile-canvas也会白屏，不使用antvG，直接使用2d可以，可能是跟antvG不兼容吗？

[tangying1027]

H5 上是可以的，Taro不确定，没试过。需要你再调试一下 哪里报错

[tangying1027]

可能是在 antvG 那层

[Ryan-CW-Code]

嗯嗯，感谢回复。
antvf2依赖ffngine，ffngine又依赖antvG，目前ffngine还不支持antvG 6.x 版本。
前两天试了一下，等有时间再试试试，也是准备先在h5跑通，再试微信小程序。
有进展会更新

[tangying1027]

嗯嗯，感谢回复。 antvf2依赖ffngine，ffngine又依赖antvG，目前ffngine还不支持antvG 6.x 版本。 前两天试了一下，等有时间再试试试，也是准备先在h5跑通，再试微信小程序。 有进展会更新

嗯嗯。升级到6.x有很多不兼容，对线上已有图表影响面大，暂无升级准备