canvas - 将 SVG ARCTO 映射到 HTML Canvas ARCTO

Question

SVG specification 中的 ARCTO 与我们在 Canvas 中的有很大不同。我有一个用例，我将根据 SVG 规范获取数据，但我需要在 Canvas 上绘制它。

我试过这个，但我想我的几何很弱。你能帮忙吗？

Answer 1

我遇到了同样的问题，所以我遇到了这篇文章。 Implementation Requirements Appendix of the W3C SVG definition 准确地说明了如何将形式(他们称之为)端点参数化转换为中心参数化并返回:

SVG圆弧(端点参数化)描述为:

x1/y1:起始位置(最后一条路径命令的位置)

x2/y2:圆弧的结束位置(这条路径命令的x和y值)

rx/ry:x 和 y 半径

φ:旋转角度

fA:大弧标志(1或0，是用大弧还是小弧)

fS:sweep flag(顺时针还是逆时针)

Canvas 圆弧使用(中心点参数化):

cx/cy:椭圆的中心点

rx/ry:x 和 y 半径

φ:旋转角度

θ1:椭圆的起始角度(旋转前)

Δθ:椭圆使用的角度距离(方向取决于扫掠标志 fS，你也可以计算出终点 θ2 可能会更好)

从 SVG 转换为 Canvas

这意味着从 SVG 转换为 Canvas ，您可以使用以下等式(直接取自 W3C 的给定 url):

1. Compute (x1′, y1′) (Equation F.6.5.1)

   

2. Compute (cx′, cy′) (Equation F.6.5.2)

   

   where the + sign is chosen if f_A ≠ f_S, and the − sign is chosen if f_A = f_S.

3. Compute (cx, cy) from (cx′, cy′) (Equation F.6.5.3)

   

4. Compute θ₁ and Δθ (Equations F.6.5.5 and F.6.5.6)

   Edit: I am now using other equations, have a look at the bottom

   

   

   where θ₁ is fixed in the range −360° < Δθ < 360° such that:

   if f_S = 0, then Δθ < 0,

   else if f_S = 1, then Δθ > 0.

   In other words, if f_S = 0 and the right side of (F.6.5.6) is greater than 0, then subtract 360°, whereas if f_S = 1 and the right side of (F.6.5.6) is less than 0, then add 360°. In all other cases leave it as is.

版权所有 © 2011 年 8 月 16 日万维网联盟(麻省理工学院、ERCIM、京王、北航)。 http://www.w3.org/Consortium/Legal/2015/doc-license

编辑:修改了第 4 步的方程。

我现在使用以下公式来确定 θ1 和 Δθ:





这只是弧的起点和终点与中心点之间的向量。因为角度是在旋转之前计算的，所以减去 φ。如果需要，你可以把它放在一边。

我收到了给定方程的错误结果，但这也可能是我实现中的一个错误。在尝试查找 bug 时，我在想 W3C 在这里做什么。我正在研究如何计算角度，这是我想到的第一件事。这对我来说是正确的结果。

从 Canvas 转换为 SVG

在转换回来时使用 W3C 方程时，我也遇到了问题。这可能是因为改变了角度。为了从 Canvas 转换为 SVG，您需要将起点和终点角度(θ1 和 θ2 = θ1 + Δθ)以及中心点转换为圆弧的交点。这些是 SVG 弧的起点和终点。

计算 (x1', y1') 和 (x2', y2')


这是计算由旋转坐标系中的给定角度 θ1/θ2 定义的线的交点。对于 x 坐标，当 -π/2 ≤ θ ≤ π/2 时，应选择 + 号。当 0 ≤ θ ≤ π 时，应选择 y 坐标的 + 号。

计算 (x1, y1) 和 (x2, y2)


起点和终点的 x 和 y 坐标可以通过旋转回旋转角度 φ 并将矢量平移到椭圆的中心来计算。

查找标志

标志很容易确定:如果 Δθ 大于 180°，fA 是 1，如果 Δθ 大于 0°，fS 是 1。