javascript - svg 在两点之间绘制虚线钟形曲线

Question

我想用 svg 绘制一条钟形曲线，如下图所示。所以基本上我应该能够传递 3 个参数:x1、x2 和高度，它应该绘制一条虚线钟形曲线。实现这一目标的最佳方法是什么？

这是我绘制规则贝塞尔曲线的方法。基本上我需要弄清楚如何将其转换为钟形曲线:

function getDimension(x1, x2, height) {
  return "M" + x1 + "," + height + " C" + x1 + ",0 " + x2 + ",0 " + x2 + "," + height;
}

var curve = document.createElementNS("http://www.w3.org/2000/svg", "path");
curve.setAttribute("d", getDimension(0, 100, 50));
curve.setAttribute("x", '0');
curve.setAttribute("fill", 'none');
curve.setAttribute("stroke", 'black');
curve.setAttribute("stroke-dasharray", '5');
document.getElementById('svg').appendChild(curve);

Answer 1

您可以使用三次曲线来获得近似钟形的曲线。在 SVG 中使用 C 绘制三次曲线:

function bellCurve(x1, x2, height)
{
    var width = x2-x1;
    var quart = width/4;
  
    return `M0 ${height} C ${quart} ${height}, ${quart} 0, ${quart*2} 0, ${quart*3} 0, ${quart*3} ${height}, ${quart*4} ${height}`;
}

var curve = document.createElementNS("http://www.w3.org/2000/svg", "path");
curve.setAttribute("d", bellCurve(0, 100, 50));
curve.setAttribute("x", '0');
curve.setAttribute("fill", 'none');
curve.setAttribute("stroke", 'black');
curve.setAttribute("stroke-dasharray", '5');
document.getElementById('svg').appendChild(curve);

<svg id="svg" />

您可能想要移动/添加 handle 以更正确地匹配钟形曲线。如果需要，模板文字也可以替换为字符串连接。