javascript - 通过添加和拖动动态点(闪烁)进行多边形奇怪的重绘

标签 javascript sorting svg d3.js polygon

我通过绘制多边形来获得点的坐标。我可以在多边形的边缘动态添加点,当我拖动任何点时,它应该只拖动连接的线。由于稍后可以在边缘上添加点,因此点坐标 需要订购/分类并且应该通过采用有序/排序的点来重新绘制多边形,以便在拖动任何点时,只应拖动/更新与拖动点相连的线。因此,为了对点进行排序/排序,我正在对坐标(2D 点) 进行排序顺时针使用 Graham 扫描/按极 Angular 排序 .
我的排序代码是
我发现多边形的中心像

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
}

然后我通过从中心找到每个点的 Angular 来对点进行排序

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;
  });

但是我面临的问题是,如果我将任何点更向另一侧拖动,然后在边缘上添加一个新点,然后拖动新添加的点,坐标的排序并没有完全排序,因为拖动时会闪烁.
这是我面临的问题的图形 View ,以便快速理解。
  • 最初我的 svg 看起来像

  • enter image description here
  • 在此之后,我添加一个点并像 一样拖动。

  • enter image description here
  • 然后我又加了一点,比如

  • enter image description here
  • 一旦我将添加的点向下拖动,它就会重新绘制多边形(不是很奇怪吗?)

  • enter image description here
  • 其实应该是

  • enter image description here

    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

    最佳答案

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

  • 我改了getClosestPointOnLines功能(实际上重构了一点):
  • 据我了解,这里的结果是得到 i - 数组中新点的索引,所以我将算法移动到新函数 getI
  • 我改了getI不仅要使用 n (当前索引),但只有 2 个索引:n1n2 : const getI = (n1, n2) => {
  • 所以你所有的aXys[n]现在是 a1aXys[n - 1]现在是 a2 .
  • getI 的结果是 return i; - 这就是我们想要从这个函数中得到的

  • 我添加了新的函数助手 updateI .它调用 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 .

    关于javascript - 通过添加和拖动动态点(闪烁)进行多边形奇怪的重绘,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64142999/

    相关文章:

    javascript - 使用特殊字符 javaScript 对数组进行排序

    java - 将二维整数数组的行从小到大排序

    javascript - 缩放 d3 v4 map 以适合 SVG(或完全适合)

    css - 是否可以使用 css 设置外部 svg 文件的样式?

    Javascript OnScroll 性能比较

    javascript - Angular Js - 更改 View 不起作用

    c# - 如果搜索框位于 _SiteLayout 页面(在标题 DIV 中),如何将搜索结果返回给用户

    javascript - 如何在网格列标题上获取可扩展按钮

    c++ - 如何生成升序随机整数列表

    svg - SVG中单个对象的多个过滤器