我正在编写一些代码,其中用户放置数字或点/标记,并通过它们绘制贝塞尔曲线 SVG 线(因此一条平滑的线连接所有点)。这是基于
https://codepen.io/francoisromain/pen/dzoZZj
svg.innerHTML = svgPath(points, bezierCommand)
我创建的示例路径是:
<svg width="100px" height="100px" viewBox="100 200 500 400">
<path d="M 346,186.5 C 374,208.875 452,237.875 458,276 C 464,314.125 433.75,340.5 370,339 C 306.25,337.5 253,307.75 203,270 C 153,232.25 134.75,209 170,188 C 205.25,167 300.5,186.5 344,186">
</svg>
到目前为止,它运行良好,直到我关闭生产线。如果我添加 Z,它会突然连接点。
结束需要是(如果需要)一条曲线,以便从最后一个点到第一个点再到第二个点有一个温和的过渡......即整个路径变成一个“平滑”循环。
我尝试添加贝塞尔曲线,但连接最终变成了一个尖锐的凹凸。我尝试在第一个点附近添加另一个点,然后使用 Z,但我再次得到一个尖锐的碰撞。
这怎么办?
我修改了原始函数以返回一个pathData(根据SVG 2 SVGPathData接口草案)数组而不是
d
属性字符串。我还更改了坐标结构,因此我们正在使用点对象。
[
{ x: 344, y: 186 }
]
而不是
[
[ 344, 186 ]
]
这非常方便,因为大多数本机方法(如
getPointAtLength()
)或属性(如 points
)也将坐标作为对象返回
points = [
{ x: 344, y: 186 },
{ x: 458, y: 276 },
{ x: 370, y: 339 },
{ x: 203, y: 270 },
{ x: 170, y: 188 },
//duplicated points from the beginning
{ x: 344, y: 186 },
{ x: 458, y: 276 },
];
// append first 2 points for closed paths
if (closed) {
points = points.concat(points.slice(0, 2));
}
这样,该函数将在第一个/最后一个顶点和第二个顶点之间创建一条平滑曲线。
显然,这条路径有一个重叠的曲线段,我们需要将其删除。另外,第一个
C
需要一些调整。
C
命令1.控制点并删除最后一个命令我们可以将最后一个命令的第一个控制点复制到第一个
C
命令。
// copy last commands 1st controlpoint to first curveto
if (closed) {
let comLast = pathData[pathData.length - 1];
let valuesLastC = comLast.values;
let valuesFirstC = pathData[1].values;
pathData[1] = {
type: "C",
values: [valuesLastC[0], valuesLastC[1], valuesFirstC.slice(2)].flat()
};
// delete last curveto
pathData = pathData.slice(0, pathData.length - 1);
}
let points = [
{ x: 344, y: 186 },
{ x: 458, y: 276 },
{ x: 370, y: 339 },
{ x: 203, y: 270 },
{ x: 170, y: 188 }
];
let smoothing = 0.3;
let pathData = getCurvePathData(points, smoothing, true);
// serialize pathData to d attribute string
let d = pathDataToD(pathData, 1);
path.setAttribute("d", d);
// Render the svg <path> element
function getCurvePathData(points, smoothing = 0.2, closed=true){
// append first 2 points for closed paths
if (closed) {
points = points.concat(points.slice(0, 2));
}
// Properties of a line
const line = (pointA, pointB) => {
const lengthX = pointB.x - pointA.x;
const lengthY = pointB.y - pointA.y;
return {
length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
angle: Math.atan2(lengthY, lengthX)
};
};
// Position of a control point
const controlPoint = (current, previous, next, reverse) => {
const p = previous || current;
const n = next || current;
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 };
};
let pathData = [];
pathData.push({ type: "M", values: [points[0].x, points[0].y] });
for (let i = 1; i < points.length; i++) {
let point = points[i];
const cp1 = controlPoint(points[i - 1], points[i - 2], point);
const cp2 = controlPoint(point, points[i - 1], points[i + 1], true);
//console.log( i, 'a', a)
const command = {
type: "C",
values: [cp1.x, cp1.y, cp2.x, cp2.y, point.x, point.y]
};
pathData.push(command);
}
// copy last commands 1st controlpoint to first curveto
if (closed) {
let comLast = pathData[pathData.length - 1];
let valuesLastC = comLast.values;
let valuesFirstC = pathData[1].values;
pathData[1] = {
type: "C",
values: [valuesLastC[0], valuesLastC[1], valuesFirstC.slice(2)].flat()
};
// delete last curveto
pathData = pathData.slice(0, pathData.length - 1);
}
return pathData;
};
// convert pathdata to d attribute string
function pathDataToD(pathData, decimals=3){
let d = pathData
.map((com) => {
return `${com.type}${com.values.map(value=>{return +value.toFixed(decimals)}).join(" ")}`;
})
.join(" ");
return d;
}
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" id="svg">
<path id="pathPoly" fill="none" stroke="green"></path>
<path id="path" fill="none" stroke="#000"></path>
</svg>
请参阅 François Romain 的原始帖子:使用三次贝塞尔曲线平滑 Svg 路径