如何根据相邻矩形的位置使矩形填充一些空间？

Question

我正在尝试创建一个由两个并排的矩形堆栈组成的图形。右侧堆栈包含三个矩形，左侧堆栈包含两个矩形。矩形的高度取决于文本内容。两个堆栈中的文本内容相同，但考虑到文本在右侧堆栈中分布在三个矩形上，并且矩形之间有一定间距，因此这个堆栈略高一些。

我更喜欢让 TikZ 确定矩形的大小和位置。我的策略是先为右侧堆栈创建框，然后以左侧堆栈结束。我的问题是如何让左侧堆栈的顶部矩​​形占据的空间恰好与堆栈顶部对齐。

我尝试了以下方法，结果还不错。inner sep=0pt但我不喜欢这个部分，它看起来像是黑客行为，导致两个堆栈中的文本上行不水平对齐。此外，左上角的矩形似乎有点偏离。

有人知道怎样插入左上角的矩形，使其完美贴合，并且两个堆栈中的上部文本行水平对齐吗？或者有没有更好的方法来实现我想要的结果？

编辑：请注意，每个堆栈中的每行文本不需要水平对齐。我希望两个上部矩形的第一行水平对齐。框内的后续行可以使用默认行距。因此，项目 7（和项目 1）最好水平对齐。

提前致谢！Kor

\documentclass{standalone}
\usepackage{tikz}
\usetikzlibrary{fit, positioning}


\pgfmathsetmacro \spacing {{0.07}}

\begin{document}
    \begin{tikzpicture}[
            level/.style={draw=black, text=black, align=center, minimum width=8.5em},
            bottom level/.style={level, fill=red},
            middle level/.style={level, fill=green},
            top level/.style={level, fill=blue},
        ]

        % Right, higher stack
        \node (r1) [bottom level] {item 1};
        \node (r2) [middle level, above=\spacing of r1]
            {item 6\\item 5\\item 4\\item 3\\item 2};
        \node (r3) [top level, above=\spacing of r2] {item 7};

        % Left stack, whose top should align with right stack
        \node (l1) [bottom level, left=(3 * \spacing) of r1] {item 1};
        \node (l2) [top level,
                    fit=(l1.west |- r2.south) (l1.east |- r3.north),
                    inner sep=0pt,
                ]
            {item 7\\item 6\\item 5\\item 4\\item 3\\item 2};
    \end{tikzpicture}
\end{document}

Answer 1

我不确定我是否理解了这个问题，但如果目的是调整框，atcbposter可以作为替代方案。我不知道 OP 想如何补偿由于框数不同而导致的垂直空间差异，所以这只是 star 的另一种替代方案。

\documentclass[a4paper]{article}
\usepackage[most]{tcolorbox}
\usepackage{lipsum}


\begin{document}
\begin{tcbposter}[
    poster={spacing=2mm, columns=2, height=13cm},
    boxes={sharp corners, notitle},
]
\posterbox{name=L1}{This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated.}


\posterbox[colback=red!30]{name=Lbottom, above=bottom}{This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated.}
\posterbox[colback=blue!20]{name=L2, between=L1 and Lbottom}{This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated.}

\posterbox[colback=green]{name=R1, column=2}{This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated.}

\posterbox[colback=purple!30]{name=R2, column=2, below=R1}{This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated.}

\posterbox[colback=blue!20]{name=Rbottom, column=2, above=bottom}{This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated. This is some text that will be repeated.}

\posterbox[colback=purple!30]{name=R2, column=2, between=R2 and Rbottom}{This is some text that will be repeated. This is some text that will be repeated.}
\end{tcbposter}
\end{document}

Answer 2

一个可能的解决方案。将文本排列成matrix两列。这样两列中的文本就完全对齐了。可以通过背景层添加颜色，它覆盖文本以及行之间的空间。

\documentclass[tikz, border=2mm]{standalone}
\usetikzlibrary{matrix, backgrounds, fit}

\begin{document}
\begin{tikzpicture}

\matrix(A) [matrix of nodes, nodes={minimum width=3cm, minimum height=8mm}, row sep=1mm, column sep=1mm]
{
item 7 & item 7\\
item 6 & item 6\\
item 5 & item 5\\
item 4 & item 4\\
item 3 & item 3\\
item 2 & item 2\\
item 1 & item 1\\
};

\begin{scope}[on background layer]
\node[draw, fit={(A-1-1)(A-6-1)}, inner sep=0pt, fill=blue!70]{}; \node[draw, fit={(A-7-1)}, inner sep=0pt, fill=red!70]{}; 

\node[draw, fit={(A-1-2)}, inner sep=0pt, fill=blue!70]{}; 
\node[draw, fit={(A-2-2)(A-6-2)}, inner sep=0pt, fill=green!70]{}; \node[draw, fit={(A-7-2)}, inner sep=0pt, fill=red!70]{}; 

\end{scope}
\end{tikzpicture}
\end{document}

Answer 3

我使用过这种方法tcbposter来画图，效果很好。为了完整起见，这是我如何使用它的一个例子。甚至可以注释框，这是我的另一个要求。

\documentclass{standalone}
\usepackage[most]{tcolorbox}
\usetikzlibrary{decorations.pathreplacing}

\begin{document}
    \begin{tcbposter}[
            poster={
                rowspacing=0.7mm,
                colspacing=5mm,
                columns=2,
                height=13em,
                width=20em,
            },
            boxes={
                sharp corners,
                notitle,
                colframe=black!70,
                halign=center,
            },
            coverage={
                top=0cm,
                bottom=0cm,
                left=0cm,
                right=0cm,
                width=25em,
            },
        ]
        \posterbox[colback=red!70]{name=l1, column=1, above=bottom}{item 1}
        \posterbox[colback=blue!70]{name=l2, column=1, between=top and l1}
            {item 7\\item 6\\item 5\\item 4\\item 3\\item 2}
        \posterbox[colback=red!70]{name=r1, column=2, above=bottom}{item 1}
        \posterbox[colback=blue!70]{name=r3, column=2, below=top}{item 7}
        \posterbox[colback=green!70]{name=r2, column=2, between=r3 and r1}
            {item 6\\item 5\\item 4\\item 3\\item 2}

        \draw [decorate, decoration={brace, amplitude=8pt}, thick]
            ([email protected] east) -- ([email protected] east)
            node [black, midway, xshift=1em, anchor=west] {top};

        \draw [decorate, decoration={brace, amplitude=8pt}, thick]
            ([email protected] east) -- ([email protected] east)
            node [black, midway, xshift=1em, anchor=west] {middle};

        \draw [decorate, decoration={brace, amplitude=8pt}, thick]
            ([email protected] east) -- ([email protected] east)
            node [black, midway, xshift=1em, anchor=west] {bottom};
    \end{tcbposter}
\end{document}