如何保持方向不变按比例缩短线段的坐标距离？

核心数学逻辑 #

要维持线段原有方向，必须基于线段的方向向量做比例缩放，不能单独修改x/y坐标或直接减去固定值：

• 线段的方向向量为：dx = x2 - x1，dy = y2 - y1
• 设目标保留长度比例为 k（比如保留90%长度则k=0.9，即缩减10%），缩放后的向量为 (k*dx, k*dy)

两种缩减场景的代码实现 #

1. 保留起点，从终点向起点缩减 #

新终点坐标通过起点叠加缩放后的向量计算：

<!-- 原线段（100%长度） -->
<line x1="x1" y1="y1" x2="x2" y2="y2" stroke="gray" />

<!-- 缩减为原长度90%的线段 -->
<line
  x1="x1"
  y1="y1"
  x2="x1 + 0.9*(x2 - x1)"
  y2="y1 + 0.9*(y2 - y1)"
  stroke="purple"
/>

2. 保留终点，从起点向终点缩减 #

新起点坐标通过终点反向叠加缩放后的向量计算：

<!-- 原线段（100%长度） -->
<line x1="x1" y1="y1" x2="x2" y2="y2" stroke="gray" />

<!-- 缩减为原长度90%的线段 -->
<line
  x1="x2 - 0.9*(x2 - x1)"
  y1="y2 - 0.9*(y2 - y1)"
  x2="x2"
  y2="y2"
  stroke="blue"
/>

错误做法的问题说明 #

• 直接减去固定值：比如x2 = x2 - 10、y2 = y2 -10，会导致x/y方向的缩减量与原向量比例不匹配，直接改变线段斜率（方向）
• 单独修改x或y的比例：比如仅对x坐标做比例调整，会破坏原向量的x/y比值，同样改变线段方向

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