☰

TikZ 如何绘制二次贝塞尔曲线？

tag-icon • tag-icon tikz-pgf bezier
TikZ 如何绘制二次贝塞尔曲线？

我试图理解 TikZ 是如何绘制贝塞尔曲线的。根据维基百科，二次贝塞尔曲线的参数化由给出B(t) = (1 - t) ((1 - t) P0 + t P1) + t ((1 - t) P1 + t P2。考虑示例y = 2x^2，经过点P0 = (0,0)和P2 = (1, 2)（下图蓝线），可以参数化为P(t) = (t, 2t^2)

很容易计算

B''(t) = 2 (P2 - 2 P1 + P0) = (2, 4) - 2P1
P''(t) = (0, 4)

由此我可以计算出控制点。P1 = (1/2, 0)结果B''(t) = P''(t)如下图红色部分所示

显然曲线不同，这意味着该点P1不是我应该使用的控制点。或者B(t)维基百科使用的参数化不是 TikZ 使用的参数化。那么问题是：TikZ 实际使用的参数化是什么？

在此处输入图片描述

\documentclass[tikz, border = 5pt]{standalone}

\usetikzlibrary{decorations.markings}

\begin{document}
\begin{tikzpicture}[%
  decoration = {markings,
    mark = at position 0.5 with {\fill[red, opacity = 0.5] circle (0.05);}
  },
  ]

  \draw [help lines] (-1, -1) grid (2, 3);

  % parabola
  \draw[blue, thick] (0, 0) parabola (1, 2) node[left]{$y=2x^2$};
  \fill[blue, opacity = 0.5] (0.5, 0.5) circle (0.05);

  % bezier
  \draw[red, thick, postaction={decorate}] (0, 0) .. controls (0.5, 0) .. (1, 2) node[midway, right]{bezier};
\end{tikzpicture}
\end{document}

我知道这，但我认为它没有涵盖这个问题。

答案1

正如 Paul Gaborit 在评论中所说，(a) .. controls (b) .. (c)这不是二次贝塞尔曲线，而是三次贝塞尔曲线(a) .. controls (b) and (b) .. (c)。

如果您想在 TikZ 中绘制二次曲线，您可以定义自己的样式。下面是如何使用库to path执行此操作的示例。calc

\documentclass[tikz,border=7pt,convert={density=1400}]{standalone}
\usetikzlibrary{calc}
\tikzset{
  quadratic/.style={
    to path={
      (\tikztostart) .. controls
      ($#1!1/3!(\tikztostart)$) and ($#1!1/3!(\tikztotarget)$)
      .. (\tikztotarget)
    }
  }
}
\begin{document}
  \begin{tikzpicture}[nodes={scale=2,text opacity=1}]
    \draw[help lines] (0,0) grid (2,4);
    \filldraw[fill opacity=.07]
        (0,0) coordinate[label=center:.](A)
      --(1,0) coordinate[label=center:.](B)
      --(2,4) coordinate[label=center:.](C);
    \draw[blue] (A)..controls (B)..(C);
    \draw[red,very thick] (A) to[quadratic={(B)}] (C);  % <- The quadratic curve
    \draw[white,domain=0:2] plot (\x,\x^2);
  \end{tikzpicture}
\end{document}

在此处输入图片描述

calc如果您更喜欢不使用和使用 PGF 命令的代码，\pgfpathquadraticcurveto您可以用以下方式替换样式定义：

\makeatletter
\def\pt@get#1{%
  \tikz@scan@one@point\pgfutil@firstofone#1\relax%
  \pgfpoint{\the\pgf@x}{\the\pgf@y}%
}
\tikzset{
  quadratic/.code={
    \def\tikz@to@path{}% <- TikZ do nothing
    \pgfpathquadraticcurveto{\pt@get{#1}}{\pt@get{(\tikztotarget)}}% <- PGF insert the quadratic curve
  }
}
\makeatother

答案2

具有 3 个控制点 P0、P1、P2 的二次贝塞尔曲线是具有 4 个控制点 P0、(1/3 P0+2/3 P1)、(2/3 P1+1/3 P2)、P2 的三次贝塞尔曲线的特殊情况。例如，如果要绘制控制点为 (0,6)、(3,6)、(6,0) 的抛物线（二次贝塞尔）的向下弧，请使用三次控制点 (0,6)、(2,6)、(4,4)、(6,0)，如下所示\draw (0,6) .. controls (2,6) and (4,4) .. (6,0); 通过比较两个贝塞尔曲线的系数可获得公式，如下所示https://en.wikipedia.org/wiki/B%C3%A9zier_curve

相关内容