Как избежать искажения полигонов при масштабировании?

Question

Вот полный пример jsfiddle

Я использую собственную серию и рисую многоугольник:

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

Я использую echarts.graphi.clipPointsByRect() (как в этом примере echarts ), чтобы убедиться, что многоугольник не нарисован за пределами сетки.

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

похоже, что функция действительно не работает должным образом - см. комментарий к исходному коду echarts :

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

Я создал проблему # 10222 для проекта электронных карт

Обходной путь на данный момент заключается в использовании пользовательской функции отсечения
например lineclip поддерживает алгоритм Сазерленда-Ходжмана для отсечения полигонов

Вот обновленный jsfiddle-пример , который показывает правильный результат при увеличении: