缩放时如何避免多边形失真？

Question

我使用自定义系列并绘制多边形：

data = [
  [80.9251933067, 207.9047427038],
  [52.8853803102, 337.7443022089],
  [25.9926385814, 120.3586150136]
];

我使用 echarts.graphi.clipPointsByRect() (like in this echarts-example) 来确保多边形没有绘制在网格之外。

echarts.graphic.clipPointsByRect(points, {
        x: params.coordSys.x,
        y: params.coordSys.y,
        width: params.coordSys.width,
        height: params.coordSys.height
      })

最初绘制的多边形是正确的，如下所示：

但是当我放大时，多边形是扭曲的：例如您可以单击图表下方的 zoom part 按钮从 40 放大到 60 - 在这种情况下，我希望看到形状的一部分（如上图中以黄色突出显示） - 但我看到的是这个扭曲的图像：

也许这个函数不适用于这个用例，或者这是一个错误？
这个用例还有其他功能吗？或者有人知道解决方法吗？

Answer 1

更新

版本 4.4.x 包含新的 clip 功能。这样可以很容易地避免失真：

在渲染函数中我们不需要裁剪我们的形状：即不需要调用 clipPointsByRect()
相反，我们只是在自定义系列上激活 clip：

新系列定义 clip: 'true':

series: [{
    type: 'custom',
    clip: 'true',
    renderItem: renderItem,
    data: data
  }]

这是更新后的 jsfiddle expample

原版

看来该功能确实没有按预期工作 - 参见 echarts-source code comment:

export function clipPointsByRect(points, rect) {
    // FIXME: this way migth be incorrect when grpahic clipped by a corner.
    // and when element have border.

我已经为电子图表项目创建了一个问题 #10222

目前的解决方法是使用自定义裁剪函数
例如lineclip supports the Sutherland-Hodgman algorithm 用于多边形裁剪

这是更新后的 jsfiddle-example，放大后显示正确的结果：

缩放时如何避免多边形失真？

How to avoid polygon distortion when zooming?

echarts