☰

我可以使用 calc 计算 TikZ 中两个相对定位节点之间的差异吗？

tag-icon • tag-icon tikz-pgf positioning nodes
我可以使用 calc 计算 TikZ 中两个相对定位节点之间的差异吗？

我有一张带有相对定位节点的图表。 如何计算水平距离X，在节点“sub3”和节点“key”之间并将该值乘以 2，并将其用于节点“bang2”的定位，以使其与节点 bang1 对齐。

我尝试使用 TikZ Manual v2.10 第 54 页中的部分代码在节点“sub3”处绘制一个圆，半径延伸到节点“bang2”，以测试是否可以计算，但失败了。我知道 TikZ 示例使用绝对定位而不是相对定位。我想这就是我的测试失败的原因。

\documentclass[12pt]{standalone}
\usepackage{fontspec}
\usepackage{tikz}
\usetikzlibrary{arrows,positioning,shapes,backgrounds,fit,calc} 

\begin{document}

\begin{tikzpicture}[node distance=3cm, auto]  
\tikzset{
    mynode/.style={rectangle,rounded corners,draw=black, top color=white, bottom color=red!50,very thick, inner sep=1em, minimum size=3em, text centered},
    keynode/.style={rectangle,rounded corners,draw=black, top color=white, bottom color=orange!50,very thick, inner sep=1em, minimum size=3em, text centered},
    bangnode/.style={shape=star, star points=20, star point ratio=1.65,draw=black, top color=white, bottom color=yellow!50,very thick, inner sep=2em, minimum size=3em, text centered,font=\bfseries},
    myarrow/.style={->, >=latex', shorten >=1pt, thick},
    mylabel/.style={text width=7em, text centered} 
}  



\node[bangnode](bang1){Bang};
   \node[keynode,below left=2cm and 2cm of bang1](key){Key Message};
      \node[mynode,below right of=key](sub1){Sub Topic 1};
      \node[mynode,below of=sub1](sub2){Sub Topic 2};
      \node[mynode,below of=sub2](sub3){Sub Topic 3};
\node[bangnode,below right=2cm and 2cm of sub3](bang2){Bang};
%ARROWS
\draw[<->,bend left=45] (sub1)[]to(sub2);
\draw[<->,bend left=45] (sub2)to(sub3);
\draw[<->,bend left=45] (sub1)to (key);
\draw[<->,bend left=45] (sub2)to (key);
\draw[<->,bend left=45] (sub3)to (key);
%\draw (key) let 
          %   \p1 = ($ (sub3) - (key) $);
           % in
           %   circle ({veclen(\x1,\y1)});

\begin{pgfonlayer}{background}
    \node [fill=blue!10,fit=(bang1) (bang2) (sub1)(sub2)(sub3)(key)] {};
  \end{pgfonlayer}
\end{tikzpicture}

\end{document}

图表

答案1

如果您只想水平对齐(bang1)和(bang2)节点，则无需进行如此复杂的计算。您可以使用let语法获取的 x 坐标(bang1)和的 y 坐标(sub3)，例如

\path let \p1=(bang1), \p2=(sub3) in
node[bangnode,yshift=-2cm,anchor=north] (bang2) at (\x1,\y2) {Bang};

完整示例：

\documentclass[12pt]{standalone}
\usepackage{fontspec}
\usepackage{tikz}
\usetikzlibrary{arrows,positioning,shapes,backgrounds,fit,calc} 

\begin{document}

\begin{tikzpicture}[node distance=3cm, auto]  
\tikzset{
    mynode/.style={rectangle,rounded corners,draw=black, top color=white, bottom color=red!50,very thick, inner sep=1em, minimum size=3em, text centered},
    keynode/.style={rectangle,rounded corners,draw=black, top color=white, bottom color=orange!50,very thick, inner sep=1em, minimum size=3em, text centered},
    bangnode/.style={shape=star, star points=20, star point ratio=1.65,draw=black, top color=white, bottom color=yellow!50,very thick, inner sep=2em, minimum size=3em, text centered,font=\bfseries},
    myarrow/.style={->, >=latex', shorten >=1pt, thick},
    mylabel/.style={text width=7em, text centered} 
}  



\node[bangnode](bang1){Bang};
   \node[keynode,below left=2cm and 2cm of bang1](key){Key Message};
      \node[mynode,below right of=key](sub1){Sub Topic 1};
      \node[mynode,below of=sub1](sub2){Sub Topic 2};
      \node[mynode,below of=sub2](sub3){Sub Topic 3};
\path let \p1=(bang1), \p2=(sub3) in
node[bangnode,yshift=-2cm,anchor=north] (bang2) at (\x1,\y2) {Bang};
%ARROWS
\draw[<->,bend left=45] (sub1)[]to(sub2);
\draw[<->,bend left=45] (sub2)to(sub3);
\draw[<->,bend left=45] (sub1)to (key);
\draw[<->,bend left=45] (sub2)to (key);
\draw[<->,bend left=45] (sub3)to (key);


\begin{pgfonlayer}{background}
    \node [fill=blue!10,fit=(bang1) (bang2) (sub1)(sub2)(sub3)(key)] {};
  \end{pgfonlayer}
\end{tikzpicture}

\end{document}

在此处输入图片描述

另一个更简单的选择是使用垂直坐标系，并使用类似

\node[bangnode,yshift=-2cm,anchor=north] (bang2) at (bang1|-sub3) {Bang};

使用 的 x 坐标(bang1)和 的 y 坐标来放置节点(sub3)。完整示例：

\documentclass[12pt]{standalone}
\usepackage{fontspec}
\usepackage{tikz}
\usetikzlibrary{arrows,positioning,shapes,backgrounds,fit,calc} 

\begin{document}

\begin{tikzpicture}[node distance=3cm, auto]  
\tikzset{
    mynode/.style={rectangle,rounded corners,draw=black, top color=white, bottom color=red!50,very thick, inner sep=1em, minimum size=3em, text centered},
    keynode/.style={rectangle,rounded corners,draw=black, top color=white, bottom color=orange!50,very thick, inner sep=1em, minimum size=3em, text centered},
    bangnode/.style={shape=star, star points=20, star point ratio=1.65,draw=black, top color=white, bottom color=yellow!50,very thick, inner sep=2em, minimum size=3em, text centered,font=\bfseries},
    myarrow/.style={->, >=latex', shorten >=1pt, thick},
    mylabel/.style={text width=7em, text centered} 
}  



\node[bangnode](bang1){Bang};
   \node[keynode,below left=2cm and 2cm of bang1](key){Key Message};
      \node[mynode,below right of=key](sub1){Sub Topic 1};
      \node[mynode,below of=sub1](sub2){Sub Topic 2};
      \node[mynode,below of=sub2](sub3){Sub Topic 3};
\node[bangnode,yshift=-2cm,anchor=north] (bang2) at (bang1|-sub3) {Bang};
%ARROWS
\draw[<->,bend left=45] (sub1)[]to(sub2);
\draw[<->,bend left=45] (sub2)to(sub3);
\draw[<->,bend left=45] (sub1)to (key);
\draw[<->,bend left=45] (sub2)to (key);
\draw[<->,bend left=45] (sub3)to (key);


\begin{pgfonlayer}{background}
    \node [fill=blue!10,fit=(bang1) (bang2) (sub1)(sub2)(sub3)(key)] {};
  \end{pgfonlayer}
\end{tikzpicture}

\end{document}

并且，为了回答具体的问题，当然您可以使用veclen和let语法来计算节点之间的距离；一个简单的例子：

\documentclass[12pt]{article}
\usepackage{tikz}
\usetikzlibrary{positioning,calc} 

\begin{document}

\begin{tikzpicture}
\node (A) {A};
\node[below left=of A ] (B) {B};
\node[below =of B ] (C) {C};
\node[below right =of C ] (D) {D};
\draw (B) -- (D);
\draw (B) let \p1 = ($ (D) - (B) $)
  in circle ({veclen(\x1,\y1)});
\end{tikzpicture}

\end{document}

在此处输入图片描述

在原始代码中：

\draw (key) let 
  \p1 = ($ (sub3) - (key) $);
  in
  circle ({veclen(\x1,\y1)});

第二行末尾有一个多余的分号；将其删除后：

\draw (key) let 
  \p1 = ($ (sub3) - (key) $)
  in
  circle ({veclen(\x1,\y1)});

代码应该可以工作。

相关内容