☰

如何定位 tikz 节点相对于其他两个节点

tag-icon • tag-icon tikz-pgf positioning
如何定位 tikz 节点相对于其他两个节点

假设我有这样的结构：

在此处输入图片描述

代码：

\documentclass{standalone}
\usepackage[utf8]{inputenc}
\usepackage[english]{babel}
\usepackage{tikz}
\usetikzlibrary{calc,shapes, positioning}
\begin{document}
\def\len{1cm}
\begin{tikzpicture}[node distance = \len, auto]
\tikzset{
    line/.style = {draw},
    block/.style = {rectangle, draw, text centered, minimum height=2em},
}
\node [block] (1-1) {1-1};
\node [block, below = of 1-1] (1-2) {1-2};
\path [line] (1-1) -- (1-2);
\node [block, below right = of 1-2] (2-1) {2-1};
\path [line] (1-2) -| (2-1);
\node [block, right = of 2-1] (3-1) {3-1};
\node [block, dotted] at(3-1|-1-2) (3-2) {3-1};
\path [line] (1-1) -| (3-1);
\end{tikzpicture}
\end{document}

如何使用 calc 库将节点 3-1 定位到节点 2-1 的右侧并与 1-2 处于同一级别？我使用虚线边框绘制了所需的位置。

请不要建议使用矩阵。

更新

1 方法是使用above right = of 2-1。它适用于此测试用例，但如果节点 1-2 很高，它就不会将 1-3 垂直定位到其中心：

\documentclass{standalone}
\usepackage[utf8]{inputenc}
\usepackage[english]{babel}
\usepackage{tikz}
\usetikzlibrary{calc,shapes, positioning}
\begin{document}
\def\len{1cm}
\begin{tikzpicture}[node distance = \len, auto]
\tikzset{
    line/.style = {draw},
    block/.style = {rectangle, draw, text centered, minimum height=2em},
}
\node [block] (1-1) {1-1};
\node [block, below = of 1-1, text width = 1cm] (1-2) {text, text, text (!): $\frac{1}{2}$};
\path [line] (1-1) -- (1-2);
\node [block, below right = of 1-2] (2-1) {2-1};
\path [line] (1-2) -| (2-1);
\node [block, above right = of 2-1] (3-1) {3-1};
\path [line] (1-1) -| (3-1);
\end{tikzpicture}
\end{document}

给出这个：

在此处输入图片描述

更新 2

@Bordaigorl 建议使用right = 2 of 1-2。但如果 2-1 较宽，它将在视觉上与 3-1 重叠：

\documentclass{standalone}
\usepackage[utf8]{inputenc}
\usepackage[english]{babel}
\usepackage{tikz}
\usetikzlibrary{calc,shapes, positioning}
\begin{document}
\def\len{1cm}
\begin{tikzpicture}[node distance = \len, auto]
\tikzset{
    line/.style = {draw},
    block/.style = {rectangle, draw, text centered, minimum height=2em},
}
\node [block] (1-1) {1-1};
\node [block, below = of 1-1, text width = 1cm] (1-2) {text, text, text (!): $\frac{1}{2}$};
\path [line] (1-1) -- (1-2);
\node [block, below right = of 1-2] (2-1) {2-2-2-2-2};
\path [line] (1-2) -| (2-1);
\node [block, right = 2 of 1-2] (3-1) {3-1};
\path [line] (1-1) -| (3-1);
\end{tikzpicture}
\end{document}

在此处输入图片描述

可能的解决方案

我在 2-1 的右侧使用了额外的 \coordinate 节点。不使用这个节点是否可以解决问题？

\documentclass{standalone}
\usepackage[utf8]{inputenc}
\usepackage[english]{babel}
\usepackage{tikz}
\usetikzlibrary{calc,shapes, positioning}
\begin{document}
\def\len{1cm}
\begin{tikzpicture}[node distance = \len, auto]
\tikzset{
    line/.style = {draw},
    block/.style = {rectangle, draw, text centered, minimum height=2em},
}
\node [block] (1-1) {1-1};
\node [block, below = of 1-1, text width = 1cm] (1-2) {text, text, text (!): $\frac{1}{2}$};
\path [line] (1-1) -- (1-2);
\node [block, below right = of 1-2] (2-1) {2-2-2-2-2};
\path [line] (1-2) -| (2-1);
\node [coordinate, right = of 2-1.east] (3-1) {};
\node [block] at(3-1|-1-2) (3-2) {3-1};
\path [line] (1-1) -| (3-2);
\end{tikzpicture}
\end{document}

在此处输入图片描述

答案1

您可以使用right=of 2-1 |- 1-2（无需calc库）：

\documentclass{standalone}
\usepackage{tikz}
\usetikzlibrary{positioning}
\begin{document}
\def\len{1cm}
\begin{tikzpicture}[node distance = \len, auto]
\tikzset{
    block/.style = {rectangle, draw, text centered, minimum height=2em},
}
\node [block] (1-1) {1-1};
\node [block, below = of 1-1] (1-2) {1-2};
\node [block, below right = of 1-2] (2-1) {2-1};
\node [block,right=of 2-1 |- 1-2] (3-1) {3-1};
\end{tikzpicture}
\end{document}

在此处输入图片描述

答案2

您可以通过要求它将“右边两个”positioning放置在以下位置来实现这一点：3-11-2

\begin{tikzpicture}[node distance = \len, auto]
    \tikzset{
        line/.style = {draw},
        block/.style = {rectangle, draw, text centered, minimum height=2em},
    }
    \node [block] (1-1) {1-1};
    \node [block, below = of 1-1] (1-2) {1-2};
    \path [line] (1-1) -- (1-2);
    \node [block, below right = of 1-2] (2-1) {2-1};
    \path [line] (1-2) -| (2-1);
    \node [block, right =2 of 1-2] (3-1) {3-1};
    % \node [block, dotted] at(3-1|-1-2) (3-2) {3-1};
    \path [line] (1-1) -| (3-1);
\end{tikzpicture}

然而，如果节点大小不同，则扩展性不佳。

为了适应所有的约束，可以使用该on grid选项，当使用positioning键时，指示 TikZ 使用节点的中心作为定位的参考点：

\begin{document}
\def\len{2cm}

    \begin{tikzpicture}[x=\len, y=\len, on grid]
        \tikzset{
            line/.style = {draw},
            block/.style = {rectangle, draw, text centered, minimum height=2em},
        }
        \node [block] (1-1) {1-1};
        \node [block, below =1 of 1-1, text width = 1cm] (1-2) {text, text, text (!): $\frac{1}{2}$};
        \path [line] (1-1) -- (1-2);
        \node [block, below right =1 of 1-2] (2-1) {2-2-2-2};
        \path [line] (1-2) -| (2-1);
        \node [block, right =1.5 of 1-2] (3-1) {3-1};
        \path [line] (1-1) -| (3-1);
    \end{tikzpicture}
\end{document}

需要进行一些更改：

  1. 这里的距离必须改变，因为现在它们代表的是中心之间的距离，而不是边界之间的距离（因此\def\len{2cm}）
  2. 我们在定位键中使用显式无量纲相对坐标，以便在必要时使用x和y键进行缩放

现在，您可以根据需要向节点添加内容，但它们仍保持相对位置，因为它们现在相对于中心。如果稍后间距不够，您可以重新定义\len（或x单独y定义）以将节点隔开。

相关内容