math - 如何计算沿圆柱体切片的两点之间的 SVG 路径弧

Question

我正在尝试利用 SVG 在圆柱形表面上动态绘制线条。因为它是圆柱形的，所以两点之间的任何直线实际上都会遵循圆柱体的椭圆切片，因此需要将其渲染为椭圆弧的一部分。

作为docs状态，SVG 弧定义为:"A rx ry x-axis-rotation large-arc-flag swing-flag x y"

请告诉我在推导这条弧(AB)时哪里出错了。

1. 显然我知道我的起点和终点 (AB)。
2. 我假设圆柱体和切片中的 ry 相等。
3. rx 是切片斜边的一半。

4. θ 是 x 轴旋转......我认为？

   • 我认为这就是我遇到麻烦的地方。正如您在第二张图片中看到的那样，当我尝试将所有直线路径转换为圆弧时，某些圆弧在不旋转时结果是完美的(它们与矩形平面中的 x 轴平行，这意味着它们沿着主圆柱椭圆的圆弧路径)，然而，旋转时发生了一些有趣的事情。当我打开大圆弧标志时，很明显正在绘制的椭圆与我的圆柱体根本不对齐。

   • 我相当有信心斜边计算正确，因为将 θ 设置为零就可以得到圆柱体的直径，所以我对哪里出错感到有点困惑。

TLDR:根据我在图 1 中提供的数据，您将如何绘制圆弧 AB。

编辑 1: 这是一个由圆柱体和一条线组成的 SVG，可供使用。再次，我试图将线变成弧线以适合圆柱体表面，使其与圆柱体切片形成的椭圆弧相匹配。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <path id="cylinder" fill="none" stroke="#000000" stroke-width="2" d="M 0 32 a148 32 0 0 0 296 0 a148 32 0 0 0 -296 0 v185 a148 32 0 0 0 296 0 v-185"/>
    <path id="line_should_become_arc" fill="none" stroke="#000000" stroke-width="2" d="M 37 106 L 259 148"/>
</svg>

Answer 1

也许你想要这样的东西
(我不熟悉JS，所以不知道如何为SVG曲线提供计算参数)

直角坐标系中 AB 的角度为 15 度，1/cos(15)=1.035 - rx 系数。蓝色圆弧的 Y 坐标有意移动 10 个像素

<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 50 L50 250" stroke="black" fill="transparent"/>
  <path d="M50 250 A100 40 0 0 0 250 250" stroke="black" fill="transparent"/>
  <path d="M250 250 L250 50 A100 40 0 0 0 50 50 A100 40 0 0 0 250 50" stroke="black" fill="transparent"/>
  <path d="M50 150 A103.5 40 15 0 0 250 200 A103.5 40 15 0 0 50 150" stroke="black" fill="transparent"/>
  <path d="M100 210 A103.5 40 15 0 0 200 232" stroke="blue" fill="transparent"/>
</svg>