canvas 渲染器在设置 enableRenderingOptimization: true 时，Group 上设置的 clipPath 没有生效

Open zhaosiyi opened this issue 8 months ago • 4 comments

问题描述

创建一个 Group 图元，在它下面挂载一个 Rect 图元
给 Group 图元设置一个矩形的 clipPath
使用 canvas 渲染器进行渲染，在设置 enableRenderingOptimization: true 时，可以观察到裁剪没有生效

复现地址：https://stackblitz.com/edit/react-j9yrujub?file=index.js,index.html

经测试使用 svg 渲染器，和不开启 enableRenderingOptimization 的 canvas 渲染时，一切正常。

如果直接把 clipPath 设置在 rect 上，结果也一切正常。

G 的官方文档似乎没有提到 enableRenderingOptimization 这个属性，我从其他 issue 中了解到该选项，自己测试时确实有明显的性能提升，不知使用方式是否正确？

测试代码

import { Canvas, CanvasEvent, Rect, Group } from '@antv/g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';

const canvasRenderer = new CanvasRenderer({
  enableRenderingOptimization: true, // 关闭后裁剪正常生效
});

const canvas = new Canvas({
  container: 'container',
  width: 600,
  height: 500,
  renderer: canvasRenderer,
});

const group = new Group();

const rect = new Rect({
  style: {
    x: 150,
    y: 150,
    width: 200,
    height: 100,
    fill: 'red',
    stroke: 'black',
  },
});

const clipPath = new Rect({
  style: {
    x: 100,
    y: 100,
    width: 200,
    height: 100,
    stroke: 'black',
  },
});

canvas.addEventListener(CanvasEvent.READY, () => {
  canvas.appendChild(group);
  group.appendChild(rect);
  canvas.appendChild(clipPath);

  group.style.clipPath = clipPath;
  // rect.style.clipPath = clipPath; // 直接把裁剪设置在 rect 上时，一切正常

  // 简单的偏移就能看出效果，不需要动画
  // rect.animate(
  //   [{ transform: 'translateX(200)' }, { transform: 'translateX(-400)' }],
  //   { duration: 3000 }
  // );
});