☰

對修訂後的操作的回應：

tag-icon • tag-icon tikz-pgf shapes
對修訂後的操作的回應：

我想繪製類似以下（photoshop'd）渲染的內容：Photoshop 處理過的
該圖像由三個 s 組成\node，每個圖像使用不同的邊框。整個事情都固定在 a 上chain，因為在我的實際情況中，我正在創建類似的東西TikZ 教程中的文法圖 (p60)。

現在，我有一個 MWE，它\node也可以渲染 L、C 和 R 之間的邊界，但我希望這些邊界在不更改「外部」邊界的情況下消失。

我的實際程式碼：
實際的

\documentclass{standalone}

\usepackage{tikz}
\usetikzlibrary{chains,scopes,shapes.misc}

\begin{document}

\begin{tikzpicture}[start chain,
    node distance=5mm,
    every node/.style={on chain},
    connect/.style={join=by ->},
    point/.style={coordinate},
    l/.style={draw, fill=cyan!50, rounded rectangle, rounded rectangle right arc=0},
    c/.style={draw, fill=green!50},
    r/.style={draw, fill=orange!50, rounded rectangle, rounded rectangle left arc=0},
    cozy/.style={node distance=-\pgflinewidth}]
\node[point] (p1) {};
\node [l, connect] (l) {L};
{[cozy]
\node [c] (c) {C};
\node [r] (r) {R};
}
\node[point, connect] (p2) {};
\end{tikzpicture}
\end{document}

自訂邊框（修訂版）

我已關注這個例子,@哈里什·庫馬爾的回答， 和這個答案。我嘗試手動繪製邊框，對形狀的每個部分使用略有不同的方法。它們都有各自的缺點：

  • 應用於L：\node將s保留line width為預設值 ( \pgflinewidth)，draw=none將導致\node包含 width 的周圍空間0.5*\pgflinewidth。為了在\node的維度內繪製邊框，邊框不得超出該空間。不幸的是，邊框內部的一部分被繪製在填充物後面，使其看起來太細長。此外，東部錨點現在看起來好像有點偏離。
  • 應用於C：設定至少\node可以line width=0確保所有錨點（尤其是東部和西部）位於正確的位置。然而，透過這種方式，整個邊框都繪製在填充物後面。
  • 應用於R：設定\node'sline width=0並繪製邊框外部的填料。這會導致邊框超出\node的尺寸，使其與連接物件重疊。

自訂邊框

\documentclass{standalone}

\usepackage{tikz}
\usetikzlibrary{calc,chains,scopes,shapes.misc,backgrounds}
\pgfdeclarelayer{background}
\pgfdeclarelayer{foreground}
\pgfdeclarelayer{foreforeground}
\pgfsetlayers{background,main,foreground,foreforeground}

\begin{document}

\begin{tikzpicture}[start chain,
    node distance=5mm,
    every node/.style={on chain},
    connect/.style={join=by ->},
    point/.style={coordinate},
    l/.style={line width=\pgflinewidth, fill=cyan!50, rounded rectangle, rounded rectangle right arc=0, append after command={% <= for the border
        \pgfextra{\begin{pgfinterruptpath}\begin{pgfonlayer}{foreground}
            \draw[] let \p1=($(\tikzlastnode.north east)+(-0.5\pgflinewidth,-0.5\pgflinewidth)$),
                \p2=($(\tikzlastnode.north west)+(0,-0.5\pgflinewidth)$),
                \p3=($(\tikzlastnode.south west)+(0,0.5\pgflinewidth)$),
                \p4=($(\tikzlastnode.south east)+(-0.5\pgflinewidth,0.5\pgflinewidth)$),
                \n1={0.5*(\y2-\y3)} in
                (\p1) -- (\p2) arc(90:270:\n1) -- (\p4);
        \end{pgfonlayer}\end{pgfinterruptpath}}
    }},
    c/.style={line width=0, fill=green!50, append after command={% <= for the border
        \pgfextra{%                 
            \begin{pgfinterruptpath}\begin{pgfonlayer}{foreground}
                \draw[] let \p1=($(\tikzlastnode.north east)+(0,-0.5\pgflinewidth)$),
                \p2=($(\tikzlastnode.north west)+(0,-0.5\pgflinewidth)$),
                \p3=($(\tikzlastnode.south west)+(0,0.5\pgflinewidth)$),
                \p4=($(\tikzlastnode.south east)+(0,0.5\pgflinewidth)$) in
                (\p1) -- (\p2) (\p3) -- (\p4);
            \end{pgfonlayer}\end{pgfinterruptpath}
        }
    }},
    r/.style={line width=0, fill=orange!50, rounded rectangle, rounded rectangle left arc=0, append after command={% <= for the border
        \pgfextra{%                 
            \begin{pgfinterruptpath}
            \draw[] let \p1=($(\tikzlastnode.north east)+(0,0.5\pgflinewidth)$),
                \p2=($(\tikzlastnode.north west)+(0,0.5\pgflinewidth)$),
                \p3=($(\tikzlastnode.south west)+(0,-0.5\pgflinewidth)$),
                \p4=($(\tikzlastnode.south east)+(0,-0.5\pgflinewidth)$),
                \n1={0.5*(\y1-\y4)} in
                (\p3) -- (\p4) arc(-90:90:\n1) -- (\p2);
            \end{pgfinterruptpath}
        }
    }}
]
\node[point] (p1) {};
\node [l, connect] (l) {L};
{[node distance=-0.5\pgflinewidth]
\node [c] (c) {C};}
{[node distance=0]
\node [r] (r) {R};}
\node[point, connect] (p2) {};

\node[font=\tiny, cyan, below=of l] (lbl l-se) {l.se};
\draw[red,->] (lbl l-se) -- (l.south east);

\begin{pgfonlayer}{foreforeground}%apparently, using layer 'foreground' in 'append after command' brings the entire node to the front, which we don't want!
\node[font=\tiny, green, below=of c, yshift=2mm] (lbl c-ne) {c.ne};
\draw[red,->] (lbl c-ne) -- (c.north east);
\end{pgfonlayer}

\node[font=\tiny, orange, below=of r] (lbl r-sw) {r.sw};
\draw[red,->] (lbl r-sw) -- (r.south west);
\end{tikzpicture}
\end{document}

如何確保我的自訂邊框位於\node的邊框內並繪製在上面的\node填滿顏色？ 我曾嘗試使用\begin{pgfonlayer}{foreground}將邊框帶到前景，但似乎所做的append after command只是將整個邊框\node帶到前景，而邊框仍在填充物後面。

答案1

您可以透過以下方式減少/增加它們0.5\pgflinewidth：

\documentclass[border=10pt]{standalone}

\usepackage{tikz}
\usetikzlibrary{calc,chains,scopes,shapes.misc,calc}

\begin{document}

\begin{tikzpicture}[start chain,
    node distance=5mm,
    every node/.style={on chain},
    connect/.style={join=by ->},
    point/.style={coordinate},
    l/.style={fill=cyan!50, rounded rectangle, rounded rectangle right arc=0, append after command={% <= for the border
        \pgfextra{%
            \begin{pgfinterruptpath}
            \draw[] let \p1=(\tikzlastnode.north west), \p2=(\tikzlastnode.south east), \n1={0.5*(\y1-\y2)} in
                ($(\tikzlastnode.north east)+(-0.5\pgflinewidth,0)$) -- (\tikzlastnode.north west) arc(90:270:\n1) -- ($(\tikzlastnode.south east)+(-0.5\pgflinewidth,0)$);
            \end{pgfinterruptpath}
        }
    }},
    c/.style={fill=green!50, append after command={% <= for the border
        \pgfextra{%
            \begin{pgfinterruptpath}
            \draw[] ($(\tikzlastnode.north east)+(-0.5\pgflinewidth,0)$) -- ($(\tikzlastnode.north west)+(0.5\pgflinewidth,0)$) ($(\tikzlastnode.south west)+(0.5\pgflinewidth,0)$) -- ($(\tikzlastnode.south east)+(-0.5\pgflinewidth,0)$);
            \end{pgfinterruptpath}
        }
    }},
    r/.style={fill=orange!50, rounded rectangle, rounded rectangle left arc=0, append after command={% <= for the border
        \pgfextra{%
            \begin{pgfinterruptpath}
            \draw[] let \p1=(\tikzlastnode.north west), \p2=(\tikzlastnode.south east), \n1={0.5*(\y1-\y2)} in
                ($(\tikzlastnode.north west)+(0.5\pgflinewidth,0)$) -- (\tikzlastnode.north east) arc(90:-90:\n1) -- ($(\tikzlastnode.south west)+(0.5\pgflinewidth,0)$);
            \end{pgfinterruptpath}
        }
    }},
    cozy/.style={node distance=-\pgflinewidth}]
\node[point] (p1) {};
\node [l, connect] (l) {L};
% introduced space here on purpose, to demonstrate too long borders
\node [c] (c) {C};
{%[cozy]
\node [r] (r) {R};
}
\node[point, connect] (p2) {};
\end{tikzpicture}
\end{document}

在此輸入影像描述

對修訂後的操作的回應：

可能是我沒理解你的需求，但這就是你想要的嗎？

\documentclass[border=10pt]{standalone}

\usepackage{tikz}
\usetikzlibrary{calc,chains,scopes,shapes.misc,backgrounds}
\pgfdeclarelayer{background}
\pgfdeclarelayer{foreground}
%\pgfdeclarelayer{foreforeground}
\pgfsetlayers{background,main,foreground}%,foreforeground}

\begin{document}

\begin{tikzpicture}[start chain,
    node distance=5mm,
    every node/.style={on chain},
    connect/.style={join=by ->},
    point/.style={coordinate},
    l/.style={line width=\pgflinewidth, fill=cyan!50, rounded rectangle, rounded rectangle right arc=0, append after command={% <= for the border
        \pgfextra{\begin{pgfinterruptpath}\begin{pgfonlayer}{foreground}
            \draw[] let \p1=($(\tikzlastnode.north east)+(-0.5\pgflinewidth,-\pgflinewidth)$),
                \p2=($(\tikzlastnode.north west)+(0,-\pgflinewidth)$),
                \p3=($(\tikzlastnode.south west)+(0,\pgflinewidth)$),
                \p4=($(\tikzlastnode.south east)+(-0.5\pgflinewidth,\pgflinewidth)$),
                \n1={0.5*(\y2-\y3)} in
                (\p1) -- (\p2) arc(90:270:\n1) -- (\p4);
        \end{pgfonlayer}\end{pgfinterruptpath}}
    }},
    c/.style={line width=0, fill=green!50, append after command={% <= for the border
        \pgfextra{%
            \begin{pgfinterruptpath}\begin{pgfonlayer}{foreground}
            \draw[] let \p1=($(\tikzlastnode.north east)+(-0.5\pgflinewidth,-0.5\pgflinewidth)$),
                \p2=($(\tikzlastnode.north west)+(0.5\pgflinewidth,-0.5\pgflinewidth)$),
                \p3=($(\tikzlastnode.south west)+(0.5\pgflinewidth,0.5\pgflinewidth)$),
                \p4=($(\tikzlastnode.south east)+(-0.5\pgflinewidth,0.5\pgflinewidth)$) in
                (\p1) -- (\p2) (\p3) -- (\p4);
            \end{pgfonlayer}\end{pgfinterruptpath}
        }
    }},
    r/.style={line width=0, fill=orange!50, rounded rectangle, rounded rectangle left arc=0, append after command={% <= for the border
        \pgfextra{%
            \begin{pgfinterruptpath}
            \begin{pgfonlayer}{foreground}
            \draw[] let \p1=($(\tikzlastnode.north east)+(0,-0.5\pgflinewidth)$),
                \p2=($(\tikzlastnode.north west)+(0,-0.5\pgflinewidth)$),
                \p3=($(\tikzlastnode.south west)+(0,0.5\pgflinewidth)$),
                \p4=($(\tikzlastnode.south east)+(0,0.5\pgflinewidth)$),
                \n1={0.5*(\y1-\y4)} in
                (\p3) -- (\p4) arc(-90:90:\n1) -- (\p2);
            \end{pgfonlayer}
            \end{pgfinterruptpath}
        }
    }}
]
\node[point] (p1) {};
\node [l, connect] (l) {L};
{[node distance=-0.5\pgflinewidth]
\node [c] (c) {C};}
{[node distance=0]
\node [r] (r) {R};}
\node[point, connect] (p2) {};

%\node[font=\tiny, cyan, below=of l] (lbl l-se) {l.se};
%\draw[red,->] (lbl l-se) -- (l.south east);
%
%\begin{pgfonlayer}{foreforeground}%apparently, using layer 'foreground' in 'append after command' brings the entire node to the front, which we don't want!
%\node[font=\tiny, green, below=of c, yshift=2mm] (lbl c-ne) {c.ne};
%\draw[red,->] (lbl c-ne) -- (c.north east);
%\end{pgfonlayer}

%\node[font=\tiny, orange, below=of r] (lbl r-sw) {r.sw};
%\draw[red,->] (lbl r-sw) -- (r.south west);
\end{tikzpicture}
\end{document}

在此輸入影像描述

更改c/.style為

c/.style={line width=0, fill=green!50, append after command={% <= for the border
    \pgfextra{%
        \begin{pgfinterruptpath}\begin{pgfonlayer}{foreground}
        \draw[] let \p1=($(\tikzlastnode.north east)+(-0\pgflinewidth,-0.5\pgflinewidth)$),
            \p2=($(\tikzlastnode.north west)+(0\pgflinewidth,-0.5\pgflinewidth)$),
            \p3=($(\tikzlastnode.south west)+(0\pgflinewidth,0.5\pgflinewidth)$),
            \p4=($(\tikzlastnode.south east)+(-0\pgflinewidth,0.5\pgflinewidth)$) in
            (\p1) -- (\p2) (\p3) -- (\p4);
        \end{pgfonlayer}\end{pgfinterruptpath}
    }
}},

給出

在此輸入影像描述

但為此你需要 TikZ 3。 TikZ 2 將在填滿色彩後面繪製邊框。

答案2

一種可能性是使用shapes.multipart庫中的多部分矩形：

\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{shapes.multipart}

\tikzset{
mynode/.style={
  rectangle split,
  rectangle split parts=3,
  rectangle split horizontal,
  draw,
  rounded corners=6pt,
  rectangle split part fill={cyan!50, green!50,orange!50},
  rectangle split draw splits=false
  }
} 

\begin{document}

\begin{tikzpicture}
\node[mynode] at (2,3) {L\nodepart{two}C\nodepart{three}R};
\end{tikzpicture}

\end{document}

在此輸入影像描述

相關內容