如何绘制具有不透明度的重叠区域的形状？

Question

有人可以帮忙制作这个形状，但你可以改变每个部分的长度和宽度。（并且我希望能够填充、不透明度并改变它的长度和宽度）。

这只是我的草图。

我尝试过像这样组合三个部分，但效果不太好。重叠区域不适用于不透明度。

\documentclass[]{standalone} 
\usepackage{tikz}

\begin{document}

\begin{tikzpicture}

\draw[fill=red,draw=none, rounded corners, line cap=round, opacity=0.3] (0,0) rectangle (1cm,4cm);

\draw[fill=red,draw=none, rounded corners,  line cap=round, opacity=0.3] (0,0) rectangle (4cm,1cm);

\draw[fill=red,draw=none, rounded corners, line cap=round, opacity=0.3] (3cm,0) rectangle (4cm,4cm);

\end{tikzpicture}
\end{document}

Answer 1

这种方法不会创建节点，但可能对最终解决方案的路径仍然有帮助。利用transparency group：

\documentclass[border=10pt]{standalone}
\usepackage{tikz}

\begin{document}
\begin{tikzpicture}

\begin{scope}[opacity=.3, transparency group, rounded corners] 
    \fill[red] (0,0) rectangle (1,4); 
    \fill[red] (0,0) rectangle (4,1); 
    \fill[red] (3,0) rectangle (4,4); 
\end{scope}

\end{tikzpicture}
\end{document}

---

您还可以将其用作pic：

\documentclass[border=10pt]{standalone}
\usepackage{tikz}

\tikzset{
    u shape/.pic={
        \begin{scope}[transparency group, rounded corners] 
            \path[#1]
                (0,0) rectangle (1,4)
                (0,0) rectangle (4,1)
                (3,0) rectangle (4,4); 
        \end{scope}
    }
}

\begin{document}
\begin{tikzpicture}

\pic[opacity=0.3] at (0,0) {u shape={fill=green}};

\pic[rotate=30, opacity=0.25] at (3,2) {u shape={fill=red}};

\end{tikzpicture}
\end{document}

---

因为您希望能够改变高度和宽度：

\documentclass[border=10pt]{standalone}
\usepackage{tikz}

\tikzset{
    pics/u shape/.style={
        code={
            \tikzset{u shape/.cd, #1}
            \path[rounded corners, pic actions]
                (0,0) -- ++(0,{\pgfkeysvalueof{/tikz/u shape/height}}) 
                    -- ++(1,0)
                [sharp corners]
                    -- ++(0,{1-\pgfkeysvalueof{/tikz/u shape/height}})
                    -- ++({\pgfkeysvalueof{/tikz/u shape/width}-2},0)
                [rounded corners]
                    -- ++(0,{\pgfkeysvalueof{/tikz/u shape/height}-1})
                    -- ++(1,0)
                    -- ++(0,{-\pgfkeysvalueof{/tikz/u shape/height}})
                    -- ++({-\pgfkeysvalueof{/tikz/u shape/width}},0)
                    -- cycle; 
        }
    },
    u shape/.cd,
    width/.initial=3,
    height/.initial=2,
}

\begin{document}
\begin{tikzpicture}

    \pic[fill=red] at (0,0) {u shape};
    
    \pic[fill=green, rotate=30, opacity=0.5] at (0,-2) {u shape={width=5, height=3}};

\end{tikzpicture}
\end{document}

Answer 2

我不确定我是否完全理解了你真正需要什么，但这是一个开始。然而，它是不是节点形状。要做到这一点还需要做更多的工作（它涉及 PGF），但只需使用普通的 TikZ 和一些棘手的内部结构以及库fit，我们就可以使用给定的文本创建一个矩形节点，然后使用该节点作为参考并在其周围绘制 U 形。

为此，Unode = {<width>}{<path usage>}使用键来<width>指定该 U 的宽度并指定<path usage>该路径的用途（，，，，draw... ）。fillpatternopacity

您可以使用这种every Unode样式作为这些形状之间的通用样式。

使用该fit库，将放置另一个矩形节点，以便您可以正常使用它，并且线会停止在整个形状之外。

选择性sharp corners圆角可以部分路径已关闭。我还使用<width>参数将圆角半径设置为始终安全的程度，但您当然可以将其设置为任何其他值。

---

您不能使用外部形状作为放置整个形状的参考。如果您anchor在节点处使用，则将使用主/内部节点的锚点来放置整个构造。

这也可以用稍微不同的语法来实现pic……但是我想得太晚了。

代码

\documentclass[tikz]{standalone}
\usetikzlibrary{fit}
\tikzset{
  Unode/.style 2 args={
    shape=rectangle, path only,
    append after command={
      \pgfextra{%
        \pgfmathanglebetweenpoints{\pgfpointanchor{\tikzlastnode}{west}}
                                  {\pgfpointanchor{\tikzlastnode}{east}}%
        \let\unodeFitRotate\pgfmathresult
        \pgfsettransform{\csname pgf@sh@nt@\tikzlastnode\endcsname}}
      (\tikzlastnode.north west)
        edge[every Unode,#2,rounded corners={(#1)/3}, to path={
            --++ (left:{#1}) |- ([yshift={-(#1)}]\tikzlastnode.south west)
                             -| ([xshift={#1}]\tikzlastnode.north east)
                             -- (\tikzlastnode.north east) {[sharp corners]
                             |- (\tikzlastnode.south west)} -- cycle}] ()
      node [path only, inner sep=+0pt, rotate fit=\unodeFitRotate,
        fit={([xshift={-(#1)}]\tikzlastnode.north west)
             ([shift={({#1},{-(#1)})}]\tikzlastnode.south east)}]
        (\tikzlastnode-f) {}}},
  every Unode/.style={draw=none, fill, fill opacity=.5}}
\begin{document}

\tikz\node[Unode={.3cm}{red}]{hana};

\begin{tikzpicture}[node font=\Huge]
\draw[help lines] (-1.5,-1.5) grid (6.5,2.75);
\node[Unode={.5cm}{green!50}]                                    (foo) {Foo};
\node[rotate=45, anchor=west,
      Unode={.7cm}{left color=red, right color=orange}] at (4,1) (bar) {Bar};
\draw[thick] (foo-f) -- (bar-f);
\path[font=\small, every pin edge/.style={thick, blue, <-}]
      (0,0) coordinate[pin={$(0,0)$}] (@)
      (4,1) coordinate[pin={$(4,1)$}] (@);
\end{tikzpicture}
\end{document}

输出

Answer 3

仅添加最简单的解决方案，您只需使用设置为\draw（或其他）即可。line width1cm

\documentclass{article}

\usepackage{tikz}

\begin{document}

\begin{tikzpicture}
\draw[red, opacity=.3, line width=1cm, rounded corners](0,3)--(0,0)--(4,0)--(4,3);
\end{tikzpicture}

\end{document}