垂直或水平围绕其中心翻转形状为点的数组

如何解决垂直或水平围绕其中心翻转形状为点的数组

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

最初，我得到了绿色矩形的点。例子要点：

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

数据集中出现的点的顺序可能会有所不同……最后path绘制了形状。

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

（3,3），（2,1）

请参见代码段中的示例。我已经创建了这个flipVertical函数，但是它产生负数。我认为我的公式适用于笛卡尔坐标，而不适用于x，y始终为正的2D画布。

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

    // Main template shape
    let shape = [{x: 10,y:10},{x: 30,{x: 20,y:30}];

    let canvas = {}; // Canvas to draw on
    let ctx = {}; // Context of the Canvas

    // Init elements
    $( document ).ready(function() {
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext("2d");
        drawShape();
    });

    // Draw the template
    function drawShape() {
        
        
        // Original shape
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.fillStyle = 'green';
        for(let point of shape) {
            ctx.lineto(point.x,point.y);
        }
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        ctx.restore();
        

         // Flipped shape
        ctx.save();
        let flippedShape = flipVertical(shape);
        
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.fillStyle = 'red';
        for(let point of flippedShape) {
            ctx.lineto(point.x,point.y);
        }
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        ctx.restore();

        
        
        
    }
    
    function flipVertical(points) {
      let ret = [];
      for(point of points) {
        let flipped = { x: point.x,y: -1 * point.y };
        console.log(flipped);
        ret.push(flipped);
      }
      
      return ret;
    }

    <!DOCTYPE html>
    <html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <title>HELP ME!</title>
    </head>

    <body>
    <canvas id="myCanvas" width="100" height="100" style="border:1px solid #000000;"></canvas>
    </body>
    </html>

解决方法

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

let shape = [{x: 10,y:10},{x: 30,{x: 20,y:30}];

function getMinMax({min,max},shape) {
    if (shape.y < min) {min = shape.y;}
    if (shape.y > max) {max = shape.y;}
    return {min,max}
}

var initValues = {min: Infinity,max: -Infinity};
var {min,max} = shape.reduce(getMinMax,initValues);
console.log("min y: " + min + ",max y: " + max);

这将为您提供y中的最小值/最大值。然后：

let x = (max-min)*2;
let flipped = { x: point.x,y: x - point.y };

然后应将10、10、30更改为30、30、10

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

这里是要点：

// Main template shape
    let shape = [{x: 10,y:30}];

    let canvas = {}; // Canvas to draw on
    let ctx = {}; // Context of the Canvas

    // Init elements
    $( document ).ready(function() {
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext("2d");
        drawShape();
    });

    // Draw the template
    function drawShape() {
        
        
        // Original shape
        ctx.save();
        ctx.beginPath();
        ctx.strokeStyle = 'green';
        ctx.fillStyle = 'green';
        for(let point of shape) {
            ctx.lineTo(point.x,point.y);
        }
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        ctx.restore();
        

         // Flipped shape
        ctx.save();
        let flippedShape = flipVertical(shape);
        
        ctx.beginPath();
        ctx.strokeStyle = 'red';
        ctx.fillStyle = 'red';
        for(let point of flippedShape) {
            ctx.lineTo(point.x,point.y);
        }
        ctx.closePath();
        ctx.fill();
        ctx.stroke();

        ctx.restore();

        
        
        
    }
    
    function flipVertical(points) {
      let ret = [];
      var min_x,min_y;
      for(point of points) {
        let flipped = { x: canvas.width - point.x,y: canvas.width - point.y };
        ret.push(flipped);
      }
      
      return ret;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<canvas id="myCanvas" width="100" height="100" style="border:1px solid #000000;"></canvas>