缩放时如何避免多边形变形？

Question

这里是完整的jsfiddle example

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

SELECT NAME,
CASE WHEN parsename(replace(NAME, ' ', '.'), 4) IS NOT NULL THEN 
   parsename(replace(NAME, ' ', '.'), 4) ELSE
    CASE WHEN parsename(replace(NAME, ' ', '.'), 3) IS NOT NULL THEN 
    parsename(replace(NAME, ' ', '.'), 3) ELSE
   parsename(replace(NAME, ' ', '.'), 2) end END as FirstName
   ,
CASE WHEN parsename(replace(NAME, ' ', '.'), 3) IS NOT NULL THEN 
   parsename(replace(NAME, ' ', '.'), 2) ELSE NULL END as MiddleName,
   parsename(replace(NAME, ' ', '.'), 1) as LastName
from  {@YourTableName}

我使用echarts.graphi.clipPointsByRect()（类似于此echarts-example）来确保多边形未绘制在网格之外。

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

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

但是当我放大时，多边形会变形：例如您可以单击图表下方的echarts.graphic.clipPointsByRect(points, { x: params.coordSys.x, y: params.coordSys.y, width: params.coordSys.width, height: params.coordSys.height }) 按钮，将其从40缩放到60-在这种情况下，我希望看到形状的一部分（如上图中以黄色突出显示）-但是，我看到了图像失真：

此功能可能不适用于此用例，还是一个错误？
此用例是否还有其他功能，或者有人知道解决方法吗？

Answer 1

该函数似乎确实无法正常工作-参见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支持Sutherland-Hodgman algorithm进行多边形裁剪

这是更新的jsfiddle-example，当您放大时，它显示正确的结果：