如何解决通过添加和拖动动态点闪烁来怪异地重画多边形
通过绘制多边形,我获得了点的坐标。我可以在多边形的边缘上动态添加点,当我拖动任何点时,它应该只拖动连接的线。由于可以稍后在边缘上添加点,因此点坐标 需要排序/排序 ,并且应该通过获取排序/排序的点来重绘多边形,以便拖动任何点时,仅应拖动/更新与拖动点连接的线。因此,要对点进行排序/排序,我要使用 Graham扫描/按极角排序 顺时针 对坐标(二维点)进行排序 。
我的排序代码是
我找到多边形的中心
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
}
然后我通过从中心找到每个点的角度来对点进行排序
但是我面临的问题是,如果我再向相反的一侧拖动任何点,然后在边缘上添加一个新点,然后拖动新添加的点,则坐标的排序就不会精确排序,因为这会导致拖动时闪烁。
这里是我面临的问题的图示,以便快速理解。
- 我的svg最初是
- 一旦我将添加的点向下拖动,它就会像这样绘制多边形(不是很奇怪吗?)
- 实际上应该是
注意:我真的不知道应该使用什么逻辑来获得所需的功能。向社区领导寻求帮助。
Demo App
所以我正在寻找不会给我重新绘制线条的解决方案。只能拖动到拖动点的连接线。
编辑
我想出了更好的解决方案。这种方法的唯一问题是,当我尝试在左垂直线上添加一个新点时,如果尝试移动它,则该新添加的点将移至水平上线
Updated-Demo
解决方法
我用左行修复了该错误。看看:codepen。
-
我更改了
getClosestPointOnLines
功能(实际上重构了一点):- 据我了解,这里的结果是获得
i
-数组中新点的索引,因此我将算法移至新函数getI
- 我更改了
getI
,使其不仅使用n
(当前索引),而且仅使用两个索引:n1
和n2
:const getI = (n1,n2) => {
- 因此,您所有的
aXys[n]
现在是a1
,而aXys[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);
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。
,您不应添加任何不接近直线的点。
用户单击时,使用distance from a point to a line算法检查每一行,以查看该点击是否在该行的可接受范围内。也许几个像素。如果在可接受的距离内有多条线,则可以选择最接近的线。
您现在知道在数组中的何处插入新点。它将位于刚匹配的线的第一和第二点之间。
如果这样做,则形状绘图应该可以正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。