如何按黄金分割比Phi拆分线段并应用于JS动态生成SVG的Bezier曲线

计算逻辑 #

黄金分割比精确值φ的计算公式为 (1 + √5)/2，约等于1.618。对于任意输入的总长度height，拆分后的两段长度可通过以下方式计算：

• 长段长度 = 总长度 * (φ / (1 + φ)) ≈ 总长度 * 0.618
• 短段长度 = 总长度 / (1 + φ) ≈ 总长度 * 0.382

代码实现 #

你可以直接在原有逻辑中加入黄金分割的常量定义和自动计算逻辑，修改后的完整代码如下：

<svg width="600" height="600" viewBox="0 0 600 600">
    <path d="" />
</svg>

<script>
// 定义精确的黄金分割比常量
const PHI = (1 + Math.sqrt(5)) / 2;
// 输入的总高度，可替换为表单获取的动态值
let height = 100;
// 自动计算两段长度
let vertical = height / (1 + PHI); // 短段，约0.382*height
let corner = height * (PHI / (1 + PHI)); // 长段，约0.618*height

// 生成路径d属性
document.querySelector('path').setAttribute("d",
    `m 300 300 v ${vertical} c 0 ${corner} ${vertical} ${corner} ${corner} ${corner}`
)
</script>

补充说明 #

如果你需要保留两位小数的输出，可以在计算后调用toFixed(2)方法处理，比如vertical = (height / (1 + PHI)).toFixed(2)，就能得到示例中的38.2、61.8格式的数值。

内容的提问来源于stack exchange，提问作者bloodyKnuckles