Javascript 将点阵列作为形状围绕其中心垂直或水平翻转

我有一个web应用程序，它接收一些点数组，我需要在画布上绘制它们。不幸的是，我得到的数据集不是我想要的方式。我需要将形状旋转180度。考虑下面的图表：

最初我得到了绿色矩形的点。举例：

（1,1）、（3,1）、（2,3）

数据集中出现的点的顺序可能不同…最后是绘制形状的路径

现在我需要垂直翻转它的中心，以红色三角形结束。坐标为：

（3,1）、（3,3）、（2,1）

请参见代码段中的示例。我创建了这个

flipVertical

函数，但它会产生负数。我认为我的公式适用于carthesian坐标，但不适用于2D画布，因为x，y总是正的

我可能会得到很多点的复杂形状…这个三角形只是一个例子。什么是好的解决方案

//主模板形状
设shape=[{x:10，y:10}，{x:30，y:10}，{x:20，y:30}]；
让canvas={}；//画布
设ctx={}；//画布的上下文
//初始元素
$（文档）.ready（函数（）{
canvas=document.getElementById（“myCanvas”）；
ctx=canvas.getContext（“2d”）；
drawShape（）；
});
//绘制模板
函数drawShape（）{
//原形
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle='绿色'；
ctx.fillStyle='绿色'；
对于（让点的形状）{
ctx.lineTo（点x，点y）；
}
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；
//翻转形状
ctx.save（）；
让flippedShape=FlippedVertical（形状）；
ctx.beginPath（）；
ctx.strokeStyle=‘红色’；
ctx.fillStyle='红色'；
对于（让翻转形状的点）{
ctx.lineTo（点x，点y）；
}
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；
}
功能翻转垂直（点）{
设ret=[]；
用于（点对点）{
设flipped={x:point.x，y:-1*point.y}；
控制台日志（翻转）；
后推（翻转）；
}
返回ret；
}

帮助我！

您在图片中所做的不仅仅是翻转坐标。它翻转它们，然后任意重新定位它们

以下是要点：

//主模板形状
设shape=[{x:10，y:10}，{x:30，y:10}，{x:20，y:30}]；
让canvas={}；//画布
设ctx={}；//画布的上下文
//初始元素
$（文档）.ready（函数（）{
canvas=document.getElementById（“myCanvas”）；
ctx=canvas.getContext（“2d”）；
drawShape（）；
});
//绘制模板
函数drawShape（）{
//原形
ctx.save（）；
ctx.beginPath（）；
ctx.strokeStyle='绿色'；
ctx.fillStyle='绿色'；
对于（让点的形状）{
ctx.lineTo（点x，点y）；
}
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；
//翻转形状
ctx.save（）；
让flippedShape=FlippedVertical（形状）；
ctx.beginPath（）；
ctx.strokeStyle=‘红色’；
ctx.fillStyle='红色'；
对于（让翻转形状的点）{
ctx.lineTo（点x，点y）；
}
ctx.closePath（）；
ctx.fill（）；
ctx.stroke（）；
ctx.restore（）；
}
功能翻转垂直（点）{
设ret=[]；
var min_x，min_y；
用于（点对点）{
设flipped={x:canvas.width-point.x，y:canvas.width-point.y}；
后推（翻转）；
}
返回ret；
}

---

要找到中点，请执行以下操作：

let shape=[{x:10，y:10}，{x:30，y:10}，{x:20，y:30}]；
函数getMinMax（{min，max}，shape）{
如果（shape.ymax）{max=shape.y；}
返回{min，max}
}
var initValues={min:Infinity，max:-Infinity}；
var{min，max}=shape.reduce（getMinMax，initValues）；
日志（“最小y:+min+”，最大y:+max）