问题描述
我有一个 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 函数，但它产生负数.我认为我的公式适用于 Carthesian 坐标，但不适用于 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
这篇关于垂直或水平翻转一组点作为围绕其中心的形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！