Adolfo Reyna
50 lines
1.6 KiB
JavaScript
50 lines
1.6 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.createSmoothSvgPath = void 0;
|
|
const line = (pointA, pointB) => {
|
|
const lengthX = pointB.x - pointA.x;
|
|
const lengthY = pointB.y - pointA.y;
|
|
return {
|
|
length: Math.sqrt(lengthX ** 2 + lengthY ** 2),
|
|
angle: Math.atan2(lengthY, lengthX),
|
|
};
|
|
};
|
|
const controlPoint = ({ current, previous, next, reverse, }) => {
|
|
const p = previous || current;
|
|
const n = next || current;
|
|
// The smoothing ratio
|
|
const smoothing = 0.2;
|
|
// Properties of the opposed-line
|
|
const o = line(p, n);
|
|
const angle = o.angle + (reverse ? Math.PI : 0);
|
|
const length = o.length * smoothing;
|
|
const x = current.x + Math.cos(angle) * length;
|
|
const y = current.y + Math.sin(angle) * length;
|
|
return { x, y };
|
|
};
|
|
const createSmoothSvgPath = ({ points }) => {
|
|
return points.reduce((acc, current, i, a) => {
|
|
if (i === 0) {
|
|
return `M ${current.x},${current.y}`;
|
|
}
|
|
const { x, y } = current;
|
|
const previous = a[i - 1];
|
|
const twoPrevious = a[i - 2];
|
|
const next = a[i + 1];
|
|
const { x: cp1x, y: cp1y } = controlPoint({
|
|
current: previous,
|
|
previous: twoPrevious,
|
|
next: current,
|
|
reverse: false,
|
|
});
|
|
const { x: cp2x, y: cp2y } = controlPoint({
|
|
current,
|
|
previous,
|
|
next,
|
|
reverse: true,
|
|
});
|
|
return `${acc} C ${cp1x},${cp1y} ${cp2x},${cp2y} ${x},${y}`;
|
|
}, '');
|
|
};
|
|
exports.createSmoothSvgPath = createSmoothSvgPath;
|