Javascript 使用二维点地图查找轮廓

我有一个x，y坐标的数组，当绘制到画布上时，它会创建一个形状，但是当我缩放图像时，我有一个“连接点”版本，因为每个点之间都有空间

我试着在每一组坐标之间画一条线，但结果画成了之字形，因为它没有遵循“轮廓”

我怎样才能创建大纲

编辑： 我需要获得形状的“向量”，并将其传递给web应用程序中的一个线条绘制功能。我没有直接访问画布的权限

var canvas=document.getElementById（“myCanvas”）；
var canvasWidth=canvas.width；
var canvasHeight=canvas.height；
var ctx=canvas.getContext（“2d”）；
var canvasData=ctx.getImageData（0，0，canvasWidth，canvasHeight）；
//这就是定义像素值的方式//
函数drawPixel（x，y，r=0，g=0，b=0，a=255）{
var指数=（x+y*画布宽度）*4；
canvasData.data[索引+0]=r；
canvasData.data[index+1]=g；
canvasData.data[索引+2]=b；
canvasData.data[索引+3]=a；
}
//这就是您更新画布的方式，以便//
//考虑修改//
函数updateCanvas（）{
ctx.putImageData（canvasData，0,0）；
}
var i；
变量坐标=[74,16,76,16,78,16,80,16,82,16,84,16,86,16,88,16,90,16,92,16,70,18,72,18,74,18,76,18,78,18,80,18,82,18,84,18,86,18,88,18,90,18,92,18,94,18,68,20,70,20,72,20,74,20,76,20,78,20,80,20,82,20,84,20,86,20,88,20,90,20,92,20,94,20,96,20,98,20,66,22,68,22,70,22,72,22,74,22,76,22,88,22,90,22,92,22,94,22,96,22,98,22,64,24,66,24,68,24,70,24,72,24,74,24,92,24,94,24,96,24,98,24,100,24,64,26,66,26,68,26,70,26,72,26,94,26,96,26,98,26,100,26,64,28,66,28,68,28,70,28,94,28,96,28,98,28,100,28,102,28,62,30,64,30,66,30,68,30,96,30,98,30,100,30,102,30,62,32,64,32,66,32,68,32,96,32,98,32,100,32,102,32,62,34,64,34,66,34,68,34,96,34,98,34,100,34,102,34,62,36,64,36,66,36,68,36,96,36,98,36,100,36,102,36,62,38,64,38,66,38,68,38,98,38,100,38,102,38,62,40,64,40,66,40,68,40,96,40,98,40,100,40,102,40,62,42,64,42,66,42,68,42,96,42,98,42,100,42,102,42,62,44,64,44,66,44,68,44,96,44,98,44,100,44,102,44,64,46,66,46,68,46,70,46,94,46,96,46,98,46,100,46,102,46,64,48,66,48,68,48,70,48,72,48,94,48,96,48,98,48,100,48,64,50,66,50,68,50,70,50,72,50,74,50,92,50,94,50,96,50,98,50,100,50,66,52,68,52,70,52,72,52,74,52,76,52,88,52,90,52,92,52,94,52,96,52,98,52,68,54,70,54,72,54,74,54,76,54,78,54,80,54,82,54,84,54,86,54,88,54,90,54,92,54,94,54,96,54,98,54,70,56,72,56,74,56,76,56,78,56,80,56,82,56,84,56,86,56,88,56,90,56,92,56,94,56,74,58,76,58,78,58,80,58,82,58,84,58,86,58,88,58,90,58,92,58];
在我看来，对于（i=0；iAfter），您有两个常规选项，可能有效，也可能无效：


正确的弯曲方式——使用路径，以某种方式根据点计算出，呃，所需的曲率（这可能很困难）

简单的“向上缩放像素”方式-不绘制像素，而是绘制1像素的矩形，并在图像缩放时缩放它们

你很幸运，你的分数顺序很好。但是如果你有其他的分数不是这样的话，那么你就会遇到一些问题

有一些函数可以处理更多的随机点，但它们非常复杂，我还没有在网上找到任何可用的函数

对于你给出的点，我使用了一种在一组点周围找到凸包的方法（称为格雷厄姆扫描）。我给它你的点，它返回围绕外部的路径。我必须修改它，通过在x和y上排序来处理共线点，这样它将只处理高度高达10000像素的点云

复杂钻头是中心的孔

为此，我创建了一组点，这些点在您的形状上创建了一个矩形的点（称为遮罩）。然后我删除了遮罩中坐标中的所有点。我删除了上一步计算的外壳外部的所有点

现在遮罩只是外壳内部的点，而不是原始坐标的一部分。然后我围绕它创建一个外壳并反转它的方向

我现在有两条路径，一条用于外部，一条用于内部，如果一起渲染，可以根据需要绘制形状

警告。这仅适用于与您所展示的坐标相似的坐标。仅适用于凸面形状。您可以对其进行调整，但这是一种蛮力方法，在当前约束条件下无法正常工作

哦，当我添加演示时，我刚刚注意到内圈不在了。没有办法修复它，所以我将把这个答案保留一段时间。它可能会有帮助，也可能没有

你看了之后我会把它取下来


//创建并添加画布
var canvas=document.createElement（“canvas”）；
canvas.width=canvas.height=256；
var ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
//清除它
ctx.setTransform（1,0,0,1,0,0）
clearRect（0,0，canvas.width，canvas.height）
//==============================================================================
//该示例需要许多函数
//==============================================================================
//返回一组点周围的凸包
//使用Graham扫描。有关详细信息，请参阅wiki
//点的形式为[[x，y]，[x，y]，…]
//将凸面外壳作为指向点的引用列表返回
函数边界（点）{
变压全速，p，s，船体，i，p1，j，len；
var isRight=（a，b，c）=>0（a[0]+a[1]/10000）-（b[0]+b[1]/10000）；
pLen=点。长度-1；
p=点数；
s=[]；
赫尔=[]；
s、 推（p[0]，p[1]）；
对于（j=0；j<2；j++）{
对于（i=2；i 1&&！isRight（s[len-2]，s[len-1]，p1））{
s、 pop（）；
len=s.长度；
}
s、 推送（p1）；
}
船体推力（…s）；
s、 长度=0；