Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added smoothing to path drawing

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-28 10:33:09 +10:00
parent c3ed55e5e8
commit 581ddf12aa
1 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/map/MapDrawing.js
View File

@ -176,10 +176,30 @@ function MapDrawing({
useEffect(() => {
function pointsToPath(points, close) {
const path = new Path2D();
path.moveTo(points[0].x * width, points[0].y * height);
for (let point of points.slice(1)) {
path.lineTo(point.x * width, point.y * height);
if (points.length < 2) {
return path;
}
path.moveTo(points[0].x * width, points[0].y * height);
// Draw a smooth curve between the points
for (let i = 1; i < points.length - 2; i++) {
var xc = (points[i].x * width + points[i + 1].x * width) / 2;
var yc = (points[i].y * height + points[i + 1].y * height) / 2;
path.quadraticCurveTo(
points[i].x * width,
points[i].y * height,
xc,
yc
);
}
// Curve through the last two points
path.quadraticCurveTo(
points[points.length - 2].x * width,
points[points.length - 2].y * height,
points[points.length - 1].x * width,
points[points.length - 1].y * height
);
if (close) {
path.closePath();
}
@ -199,6 +219,17 @@ function MapDrawing({
return path;
}
function triangleToPath(points) {
const path = new Path2D();
path.moveTo(points[0].x * width, points[0].y * height);
for (let point of points.slice(1)) {
path.lineTo(point.x * width, point.y * height);
}
path.closePath();
return path;
}
function shapeToPath(shape) {
const data = shape.data;
if (shape.type === "path") {
@ -209,7 +240,7 @@ function MapDrawing({
} else if (shape.shapeType === "rectangle") {
return rectangleToPath(data.x, data.y, data.width, data.height);
} else if (shape.shapeType === "triangle") {
return pointsToPath(data.points, true);
return triangleToPath(data.points);
}
}
}