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

Added smoothing to freehand fog

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-04-29 09:42:58 +10:00
parent 2cac27945c
commit abf75f1566
2 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/map/MapFog.js
View File

@ -57,9 +57,6 @@ function MapFog({
gridSize,
shapes
);
const commonShapeData = {
id: shortid.generate(),
};
if (isEditing && toolSettings.type === "add") {
setDrawingShape({
type: "fog",
@ -67,7 +64,8 @@ function MapFog({
strokeWidth: 0.1,
color: "black",
blend: true, // Blend while drawing
...commonShapeData,
id: shortid.generate(),
fogType: toolSettings.useGridSnapping ? "sharp" : "smooth",
});
}
}

57
src/helpers/drawing.js
View File

@ -134,7 +134,7 @@ export function shapeHasFill(shape) {
);
}
export function pointsToPath(points, close, canvasWidth, canvasHeight) {
export function pointsToPathSmooth(points, close, canvasWidth, canvasHeight) {
const path = new Path2D();
if (points.length < 2) {
return path;
@ -169,6 +169,19 @@ export function pointsToPath(points, close, canvasWidth, canvasHeight) {
return path;
}
export function pointsToPathSharp(points, close, canvasWidth, canvasHeight) {
const path = new Path2D();
path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight);
for (let point of points.slice(1)) {
path.lineTo(point.x * canvasWidth, point.y * canvasHeight);
}
if (close) {
path.closePath();
}
return path;
}
export function circleToPath(x, y, radius, canvasWidth, canvasHeight) {
const path = new Path2D();
const minSide = canvasWidth < canvasHeight ? canvasWidth : canvasHeight;
@ -201,32 +214,10 @@ export function rectangleToPath(
return path;
}
export function triangleToPath(points, canvasWidth, canvasHeight) {
const path = new Path2D();
path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight);
for (let point of points.slice(1)) {
path.lineTo(point.x * canvasWidth, point.y * canvasHeight);
}
path.closePath();
return path;
}
export function fogToPath(points, canvasWidth, canvasHeight) {
const path = new Path2D();
path.moveTo(points[0].x * canvasWidth, points[0].y * canvasHeight);
for (let point of points.slice(1)) {
path.lineTo(point.x * canvasWidth, point.y * canvasHeight);
}
path.closePath();
return path;
}
export function shapeToPath(shape, canvasWidth, canvasHeight) {
const data = shape.data;
if (shape.type === "path") {
return pointsToPath(
return pointsToPathSmooth(
data.points,
shape.pathType === "fill",
canvasWidth,
@ -251,10 +242,24 @@ export function shapeToPath(shape, canvasWidth, canvasHeight) {
canvasHeight
);
} else if (shape.shapeType === "triangle") {
return triangleToPath(data.points, canvasWidth, canvasHeight);
return pointsToPathSharp(data.points, true, canvasWidth, canvasHeight);
}
} else if (shape.type === "fog") {
return fogToPath(shape.data.points, canvasWidth, canvasHeight);
if (shape.fogType === "smooth") {
return pointsToPathSmooth(
shape.data.points,
true,
canvasWidth,
canvasHeight
);
} else if (shape.fogType === "sharp") {
return pointsToPathSharp(
shape.data.points,
true,
canvasWidth,
canvasHeight
);
}
}
}