将形状旋转为原点的点数组

Question

我有一个网络应用程序接收一些点数组，我需要在 canvas 上绘制它们。不幸的是，我得到的数据集不是我想要的。我需要将形状旋转 180 度。我不知道该怎么做...

请参阅代码段中的示例。

// Main template shape
let shape = [{x: 10, y:10}, {x: 120, y:10}, {x: 110, y:110}, {x: 50, y:175}];

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() {
    ctx.save();

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

    ctx.restore();
}

<!DOCTYPE html>
<html>

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

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

Answer 1

如果我没看错你的问题，你想将形状旋转 180 度吗？就像垂直反转一样？如果是这样，这里有一个解决方案，你需要一个相对于它转动的轴。问题是如果你只是反转每个点 (x,y)，你把 (x,-y), canvas 定义为仅正值它不会显示在你的屏幕上，想象它在屏幕外，您需要将它“推”回 canvas，您可以通过在反转形状后添加 canvas 的高度来实现。

// Main template shape
let shape = [ {x:10, y:10}, {x:120, y:10}, {x:110, y:110}, {x:50, y:175} ];

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() {
    ctx.save();

    ctx.beginPath();
    ctx.strokeStyle = 'yellow';
    ctx.fillStyle = 'red';
    for(let i = 0; i < shape.length; i++) {
        ctx.lineTo(shape[i][0], -shape[i][1] + 200);
    }
    for(let point of shape) {

        ctx.lineTo(point.x, -point.y + 200);
    }
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

    ctx.restore();
}

<!DOCTYPE html>
<html>

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

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

将形状旋转为原点的点数组

Rotate a shape as array of points on its origins

javascript

html5-canvas

2d