通过添加和拖动动态点（闪烁）进行多边形怪异重绘

Question

我有绘制多边形的点的坐标。我可以在多边形的边缘动态添加点，当我拖动任何点时，它应该只拖动连接的线。由于稍后可以在边缘上添加点，因此点坐标 需要 ordered/sorted 并且多边形应该重新绘制取 ordered/sorted 点，以便在拖动任何点时，连接到拖动点的线应该只有 dragged/updated。因此，对于 order/sort 我正在对坐标（2D 点）顺时针 使用 [= 进行排序的点66=]格雷厄姆扫描/极角排序.

我的排序代码是

我发现多边形的中心像

function findCenter(points) {
  let x = 0,
    y = 0,
    i,
    len = points.length;

  for (i = 0; i < len; i++) {
    x += Number(points[i][0]);
    y += Number(points[i][1]);
  }

  return { x: x / len, y: y / len }; // return average position
}

然后我通过找到每个点与中心的角度对点进行排序，例如

function findAngle(points) {
  const center = findCenter(points);

  // find angle
  points.forEach((point) => {
    point.angle = Math.atan2(point[1] - center.y, point[0] - center.x);
  });
}

//arrVertexes is the array of points
arrVertexes.sort(function (a, b) {
    return a.angle >= b.angle ? 1 : -1;
  });

但我面临的问题是，如果我向另一侧拖动任何一点，然后在边缘添加一个新点，然后拖动新添加的点，坐标的排序就会不准确，因为有拖动的时候是闪烁的。

为了快速理解，这是我面临的问题的图示。

最初我的 svg 看起来像

在这之后我加了一个点然后像这样拖动

然后我又加了一点像

一旦我向下拖动添加的点，它就会重新绘制多边形（是不是很奇怪？）

其实应该是这样

NOTE: I really don't know what logic should I apply to get the desire functionality. Seeking help from the community leads.

Demo App

So I am looking for a solution that won't give me weird redrawing of the lines. Only the connected lines to the dragged point should be dragged.

编辑

我想出了更好的解决方案。这种方法的唯一问题是，当我尝试在左垂直线上添加一个新点并且如果我尝试移动它时，新添加的点会移动到顶部水平线

Updated-Demo

Answer 1

您不应允许添加任何不靠近直线的点。

当用户点击时，使用distance from a point to a line算法检查每一行，看点击是否在该行可接受的距离内。也许是几个像素。如果在可接受的距离内有多条线，也许选择最近的那条线。

您现在知道在数组中的什么位置插入新点了。它将位于刚刚匹配的直线的第一点和第二点之间。

如果这样做，形状绘图应该就可以了。

Answer 2

我已经用左线修复了这个错误。看一看：codepen.

我改了getClosestPointOnLines函数（实际上重构了一点）：
- 据我了解，这里的结果是得到 i - 数组中新点的索引，所以我将算法移至新函数 getI
- 我将 getI 更改为不仅使用 n（当前索引），而且只使用 2 个索引：n1 和 n2：const getI = (n1, n2) => {
- 所以你的 aXys[n] 现在是 a1 并且 aXys[n - 1] 现在是 a2。
- getI 的结果是 return i; - 这就是我们想要的函数
我添加了新的function-helperupdateI。它调用 getI 并检查是否有任何积极的结果。

const updateI = (n1, n2) => {
      const newI = getI(n1, n2);
      if (newI !== undefined) {
        i = newI;
        return true;
      }
    };

所以你现在对点的循环是：

for (let n = 1; n < aXys.length; n++) {
      updateI(n, n - 1);
    }

但我们需要单独检查“左”行（因为它连接数组的开头和结尾）：

if (updateI(aXys.length - 1, 0)) i = aXys.length;

抱歉，我禁用了您的部分代码。我没有检查你在哪里使用它：

if (i < aXys.length) {
      let dx = aXys[i - 1][0] - aXys[i][0];
      let dy = aXys[i - 1][1] - aXys[i][1];

      x = aXys[i - 1][0] - dx * fTo;
      y = aXys[i - 1][1] - dy * fTo;
    }

所以 getClosestPointOnLines 的最终版本现在看起来像这样：

function getClosestPointOnLines(pXy, aXys) {
  var minDist;
  var fTo;
  var fFrom;
  var x;
  var y;
  var i;
  var dist;

  if (aXys.length > 1) {
    const getI = (n1, n2) => {
      let i;
      const a1 = aXys[n1];
      const a2 = aXys[n2];
      if (a1[0] != a2[0]) {
        let a = (a1[1] - a2[1]) / (a1[0] - a2[0]);
        let b = a1[1] - a * a1[0];
        dist = Math.abs(a * pXy[0] + b - pXy[1]) / Math.sqrt(a * a + 1);
      } else dist = Math.abs(pXy[0] - a1[0]);

      // length^2 of line segment
      let rl2 = Math.pow(a1[1] - a2[1], 2) + Math.pow(a1[0] - a2[0], 2);

      // distance^2 of pt to end line segment
      let ln2 = Math.pow(a1[1] - pXy[1], 2) + Math.pow(a1[0] - pXy[0], 2);

      // distance^2 of pt to begin line segment
      let lnm12 = Math.pow(a2[1] - pXy[1], 2) + Math.pow(a2[0] - pXy[0], 2);

      // minimum distance^2 of pt to infinite line
      let dist2 = Math.pow(dist, 2);

      // calculated length^2 of line segment
      let calcrl2 = ln2 - dist2 + lnm12 - dist2;

      // redefine minimum distance to line segment (not infinite line) if necessary
      if (calcrl2 > rl2) dist = Math.sqrt(Math.min(ln2, lnm12));

      if (minDist == null || minDist > dist) {
        if (calcrl2 > rl2) {
          if (lnm12 < ln2) {
            fTo = 0; //nearer to previous point
            fFrom = 1;
          } else {
            fFrom = 0; //nearer to current point
            fTo = 1;
          }
        } else {
          // perpendicular from point intersects line segment
          fTo = Math.sqrt(lnm12 - dist2) / Math.sqrt(rl2);
          fFrom = Math.sqrt(ln2 - dist2) / Math.sqrt(rl2);
        }
        minDist = dist;
        i = n1;
      }
      return i;
    };

    const updateI = (n1, n2) => {
      const newI = getI(n1, n2);
      if (newI !== undefined) {
        i = newI;
        return true;
      }
    };

    for (let n = 1; n < aXys.length; n++) {
      updateI(n, n - 1);
    }
    if (updateI(aXys.length - 1, 0)) i = aXys.length;

    if (i < aXys.length) {
      let dx = aXys[i - 1][0] - aXys[i][0];
      let dy = aXys[i - 1][1] - aXys[i][1];

      x = aXys[i - 1][0] - dx * fTo;
      y = aXys[i - 1][1] - dy * fTo;
    }
  }

  console.log(aXys[i - 1]);
  return { x: x, y: y, i: i, fTo: fTo, fFrom: fFrom };
}

工作示例on codepen。

通过添加和拖动动态点（闪烁）进行多边形怪异重绘

polygon weird redrawing by adding & dragging dynamic points (flickering)

javascript

sorting

svg

polygon

d3.js

Demo App

编辑

Updated-Demo