垂直或水平围绕其中心翻转形状为点的数组 [英] Flipping an array of points as a shape around its center vertically or horizontally
问题描述
我有一个Web应用程序，它接收一些点数组，我需要将它们绘制在画布上.不幸的是，我无法获得想要的数据集.我需要将形状旋转180度.考虑下图:
I have a web app that receives some array of points and I need to draw them on a canvas. Unfortunately, I get the dataset not the way I want. I need to rotate the shapes 180 degrees. Consider the diagram below:
最初，我得到了绿色矩形的点.例子要点:
Originally I get the points of the green rectangle. Example points:
(1,1)，(3,1)，(2、3)
(1,1), (3,1), (2, 3)
数据集中出现的点的顺序可能会有所不同...最后，绘制形状的是path.
The order of points appearing in the dataset can varry...at the end it is the path that draws the shape.
现在，我需要围绕它的中心垂直翻转它，以得到红色三角形.坐标为:
Now I need to flip this vertically around its center to end up with the RED triangle. The coordinates will be:
(3,1)，(3,3)，(2,1)
(3,1), (3,3), (2,1)
请参见代码段中的示例.我已经创建了此flipVertical函数，但它会产生负数.我认为我的公式适用于笛卡尔坐标，而不适用于x，y始终为正的2D画布.
Please see the example in the snippet. I have created this flipVertical function but it produces negative number. I think my formula my work for carthesian coordinates but not for 2D canvas which x,y are always positive.
我可能会得到具有很多点的非常复杂的形状...这个三角形只是一个例子.什么是一个好的解决方案?
I may get very complex shapes with many points...this triangle is only an example. what would be a good solution?
// Main template shape
let shape = [{x: 10, y:10}, {x: 30, y:10}, {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>
推荐答案
要找到中点，请执行以下操作:
To find the mid-point, do something like:
let shape = [{x: 10, y:10}, {x: 30, y:10}, {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中的最小值/最大值.然后:
This gives you the min/max values in y. Then:
let x = (max-min)*2;
let flipped = { x: point.x, y: x - point.y };
然后应将10、10、30更改为30、30、10
which should then change 10, 10, 30 into 30, 30, 10
这篇关于垂直或水平围绕其中心翻转形状为点的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
