在单独绘制的随机生成的线之间填充

在单独绘制的随机生成的线之间填充

我想说明的是,如果磁铁坏了,碎片仍会保持极性。我被困在试图填补上部碎片的北极,因为我不知道如何克服随机生成的参差不齐的线条。

我对它很陌生,TikZ所以请原谅我的效率,我先在网格上手工绘制它,然后使用坐标对其进行编码TikZ。这是我目前得到的结果:

\documentclass[crop,tikz,margin=5mm]{standalone}
\usetikzlibrary{patterns, patterns.meta, calc,fit,backgrounds,positioning,arrows,shapes.geometric, decorations.pathmorphing}
\begin{document}

\begin{tikzpicture}

%\draw[step=0.5, gray, thin] (0,0) grid (9,6);
    

\draw[thick, black]
    (3.25,4)
    --(1,2.5)
    --(1,2)
    --(3,1.5)
    --(5.25,3)
    --(5.25,3.5)
    --(3,2)
    --(3,1.5)
    --(3,2)
    --(1,2.5)
    ;
\pgfmathsetseed{42}
    \draw[thick, decorate,decoration={random steps,segment length=10pt,amplitude=5pt}]
    (5.25,3.5) -- (3.25,4);

\draw[thick, black]
    (6.25,4.25)
    --(8.5,6)
    --(8.5,5.5)
    --(6.25,3.75)
    --cycle
    ;

\draw[thick, black]
    (8.5,6)
    --(6.5,6.5)
    --(4.25,4.75)
    --(4.25,4.25)
    ;
    
\pgfmathsetseed{42}
\draw[thick, decorate,decoration={random steps,segment length=10pt,amplitude=5pt}]
    (6.25,3.75)--(4.25,4.25);
\pgfmathsetseed{42}
\draw[thick, decorate,decoration={random steps,segment length=10pt,amplitude=5pt}]
    (6.25,4.25)--(4.25,4.75);

\draw[thick]
    (5.375,5.625)
    --(7.375,5.125)
    --(7.375,4.625)
    ;

\draw [thick,pattern=north west lines, pattern color=red]
    (1,2.5)--(3,2)--(4.125,2.75)--(2.125,3.25);
\draw [thick,pattern=vertical lines, pattern color=red]
    (1,2.5)--(3,2) -- (3,1.5) -- (1,2);
\draw [thick,pattern=vertical lines, pattern color=red]
    (3,2)--(3,1.5)--(4.125,2.25)--(4.125,2.75);

%\draw [thick,pattern=north west lines, pattern color=red];

\node (N) at (2.5,2.5){\textbf{{\large N}}};
\node (Z) at (3.75,3.45){\textbf{{\large Z}}};


\node (N) at (5.5,4.75){\textbf{{\large N}}};
\node (Z) at (7.25,6){\textbf{{\large Z}}};




\end{tikzpicture}


\end{document}

在此处输入图片描述

答案1

受到@Qrrbrbirlbel 回答(+1)的启发,但使用xslantyslant节点,用于练习:

\documentclass[margin=3mm]{standalone}
\usepackage{tikz}
\usetikzlibrary{calc,
                decorations.pathmorphing,
                patterns.meta,  
                }
\begin{document}
  
    \begin{tikzpicture}[
dec/.style={
    /utils/exec=\pgfmathsetseed{42},
    decoration={random steps, segment length=10pt, amplitude=5pt}},
N/.style args = {#1/#2}{draw, anchor=south west,
                        minimum height=5mm, minimum width=20mm, outer sep=0pt,
                        font=\huge\bfseries,
                        yslant=#1, xslant=#2},
P/.style args = {#1/#2}{pattern={Lines[angle=#1,distance={2pt},line width=0.1pt]},
                         pattern color=#2},
                       ]
\node (n1) [N=-0.5/ 0, P=90/red] {};
\node (n2) [N= 0.5/ 0, P=90/red] at (n1.south east) {};
\node (n3) [N= 0.5/-1, minimum size=20mm, P=0/red] at (n1.north east) {N};
\node (n4) [N= 0.5/ 0, P=90/blue] at (n2.south east) {};

\draw[P=0/blue] 
            (n3.south east) -- (n3.north east) 
                            -- ++ (2,1) decorate[dec] {-- (n4.north east)};
%
\node (n5) [N= 0.5/ 0, P=90/red] at ($(1,0.5) + (n4.south east)$) {};
\node (n6) [N= 0.5/ 0, P=90/blue] at (n5.south east) {};
\node (n7) [N= 0.5/-1, minimum size=20mm, P=0/blue] at (n5.north east) {S};

\draw[P=90/red]
            (n7.south west) -- (n7.north west) 
                            -- ++ (-2,-1)   coordinate (aux)
                            -- ++ ( 0,-0.5) decorate[dec] {-- (n5.south west)}
                            -- (n5.north west)
                            ;
\draw       (aux) decorate[dec] {-- (n5.north west)};
\end{tikzpicture}
\end{document}

在此处输入图片描述

附录:
在上述解决方案中,随机线之间的图案与上述节点中的图案相同。我这样做是因为在第一次尝试中,图案会突出于上方/下方绘制的形状。

与此同时,我发现了我做错了什么。在下面的 MWE 中,这个问题现在得到了纠正。为了更简单地定义随机线的坐标,现在引入了两个不可见的节点,它们的角定义这些线的坐标:

\documentclass[margin=3mm]{standalone}
\usepackage{tikz}
\usetikzlibrary{calc,
                decorations.pathmorphing,
                patterns.meta,
                }
\begin{document}

    \begin{tikzpicture}[
dec/.style={
    /utils/exec=\pgfmathsetseed{42},
    decoration={random steps,segment length=10pt,amplitude=5pt}},
N/.style args = {#1/#2}{draw, anchor=south west,
                        minimum height=5mm, minimum width=20mm, outer sep=0pt,
                        font=\huge\bfseries,
                        yslant=#1, xslant=#2},
P/.style args = {#1/#2}{pattern={Lines[angle=#1,distance={2pt},line width=0.1pt]},
                         pattern color=#2},
                       ]
\node (n1) [N=-0.5/ 0, P=90/red] {};
\node (n2) [N= 0.5/ 0, P=90/red] at (n1.south east) {};
\node (n3) [N= 0.5/-1, minimum size=20mm, P=0/red] at (n1.north east) {N};
\node (n4) [N= 0.5/ 0, P=90/blue] at (n2.south east) {};
\node (n5) [N= 0.5/-1, minimum size=20mm, draw=none] at (n3.south east) {};
\draw[P=0/blue]
            (n5.north east) decorate[dec] {-- (n5.south east)}
                         -- (n5.south west) -- (n5.north west)
                         -- cycle;

\node (n6) [N= 0.5/ 0, P=90/red] at ($(1,0.5) + (n4.south east)$) {};
\node (n7) [N= 0.5/ 0, P=90/blue] at (n6.south east) {};
\node (n8) [N= 0.5/-1, minimum size=20mm, P=0/blue] at (n6.north east) {S};
\node (n9) [N= 0.5/-1, draw=none,
            minimum size=20mm] at (n6.north west) {};
\draw[P=0/red]
    (n9.south west) -- (n9.south east) -- (n9.north east) -- (n9.north west)
        decorate[dec] {-- (n9.south west)} 
    ;
\node (n10) [N=-0.5/ 0, draw=none, anchor=south east] at (n6.south west) {};
%
\draw[P=90/red,
      line cap=round, line join=round]
    (n10.south west) -- (n10.north west)
        decorate[dec] {-- (n10.north east)}
    (n10.south west)        
        decorate[dec] {-- (n10.south east)}
                    -- (n10.north east);
\end{tikzpicture}
\end{document}

在此处输入图片描述

答案2

你可以只装饰一条线的一部分,比如说

\draw (0,0) -- (1,0) decorate {-- (1,1)} -- (0,1) -- cycle;

得到一个只有一边有锯齿状线条的矩形,并且种子固定,这样就可以重现。你甚至可以在路径的不同部分上重复两次,就像这样

\tikz[
  dec/.style={
    /utils/exec=\pgfmathsetseed{42},
    decoration={random steps,segment length=10pt,amplitude=5pt}}]
  \draw[fill=gray, ultra thick, line cap=round, line join=round]
             (0,0) decorate[dec] {-- (1,0)}
    (0,0) -- (0,1) decorate[dec] {-- (1,1)} -- (1,0);

这给出了一个相对好看的矩形,但仅仅是因为它有圆形帽和连接:
在此处输入图片描述


虽然 TikZ 提供了一种保存路径并在以后重复使用的方法,但它无法插入正在构建的路径中。这就是spath3库的作用所在。

使用spath/save我们可以保存一次参差不齐的线条。使用spath/insert我们可以在路径的当前点插入该线段,并spath/insert reverse在插入之前反转该线段。

这允许正常的闭合路径。


在下面的代码中,我使用了 TikZ 的 3d 功能和3d提供各种平面画布的库。

由于画布键并没有太多用处,因此我使用了类似

  • top face
  • side face
  • front face使用可选参数,以便我们可以轻松访问破碎的北片的正面。

除此之外,我还使用 PGFMath 函数(其中四个是常量)来实现

  1. 使用说话的名称(宽度、深度和高度是我能更好地形象化的东西)
  2. 不必重复数字,这也使我们能够仅通过调整一个值而不是几十个值来改变破损磁铁的尺寸。

侧面可以很容易地在\foreach循环中绘制,因为depthOfPiece(<piece>)我们得到了该部分的深度(从 0 开始),其中已经自动包含了断点之间的空间。

由于所有这些画布和交换X值有时有点令人困惑(特别是当宽度和深度具有相同的值时)我添加了一个“调试循环”,显示所有主画布及其轴的方向。


请原谅输出图片中的可怕图案,Image Magick 在转换图案方面做得很差。

代码

\documentclass[tikz,margin=5mm]{standalone}
\usetikzlibrary{
  3d,
  spath3,
  patterns.meta,
  decorations.pathmorphing}
\begin{document}
\begin{tikzpicture}[
  dec/.style={
    /utils/exec=\pgfmathsetseed{42},
    decoration={random steps,segment length=10pt,amplitude=5pt}},
  line join=round,
  % the pattern
  /pgf/pattern keys/every pattern/.style={distance=1.5pt},
  north/.style ={pattern color=red,  pattern={Lines[every pattern,angle= 90]}},
  north'/.style={pattern color=red,  pattern={Lines[every pattern,angle=-45]}},
  south/.style ={pattern color=blue, pattern={Lines[every pattern,angle= 90]}},
  south'/.style={pattern color=blue, pattern={Lines[every pattern,angle=-45]}},
  % 3d stuff
  front face/.style={canvas is yz plane at x={depthOfPiece(#1)}},
  front face/.default=0,
  side face/.style ={canvas is xz plane at y=0},
  top face/.style  ={canvas is xy plane at z=Height},
  x=(35:.75cm), y=(160:1cm), z=(90:.5cm),
  % geometry
  declare function={
    Height = 1;   % z direction
    Width  = 2;   % y direction
    Depth  = 2;   % x direction
    dDepth = 1.3; % distance between broken pieces
    depthOfPiece(\x) = % evals x value for piece's closest corner to viewer
      \x * Depth + (\x >= 2) * dDepth;}
  ]
% create the ragged line and save it
\path[dec,decorate] (0,0,0) -- (0, Width, 0) [spath/save=ragged line];

% front face
\draw[front face, north] (0,0) rectangle +(Width, Height);

% side pieces
\foreach[count=\piece from 0] \style in {north, south, north, south}
  \draw[side face, \style]
    (depthOfPiece \piece, 0) rectangle +(Depth, Height);

% top face
\begin{scope}[top face, transform shape, font=\Huge\bfseries]
  % the unbroken ones are easy
  \foreach \piece/\style/\text in {0/north'/N, 3/south'/Z}
    \draw[\style] (depthOfPiece \piece,0) rectangle
      node {\text} +(Depth, Width);
  
  % the broken ones are not
  % could be made with \foreach and a complex variable path
  \draw[south'] (depthOfPiece 1,0) -- +(right:Depth)
       [spath/append=ragged line]  -| cycle
   node at (depthOfPiece 1.5,.5*Width) {Z};
  \draw[north'] (depthOfPiece 2,0) [spath/append=ragged line]
        -- + (right:Depth) |- cycle
   node at (depthOfPiece 2.5,.5*Width) {N};
\end{scope}

% the broken front face
% this is where spath3 is necessary because the inverse is needed
\draw[front face=2, north]
  (0,0) [spath/append=ragged line] -- ++(up: Height)
        [spath/append reverse=ragged line] -- cycle;

% debug faces
\foreach \face/\col in {front/red, side/green, top/blue}
  \draw[ultra thick, transform shape, <->, \face\space face=4,
    \col, font=\Huge, nodes={fill=white, draw}]
    (0,3) node[above]{$y$} |- (3,0) node[right]{$x$};
\end{tikzpicture}

\tikz[
  dec/.style={
    /utils/exec=\pgfmathsetseed{42},
    decoration={random steps,segment length=10pt,amplitude=5pt}}]
\matrix[column sep=5mm, ultra thick, every path/.append style={fill=gray}]{
  \draw      (0,0) decorate[dec] {-- (1,0)}
    (0,0) -- (0,1) decorate[dec] {-- (1,1)} -- (1,0);
  &
  \draw[line cap=round, line join=round]
             (0,0) decorate[dec] {-- (1,0)}
    (0,0) -- (0,1) decorate[dec] {-- (1,1)} -- (1,0);\\};
\end{document}

输出

在此处输入图片描述 在此处输入图片描述

答案3

可能有更好的方法可以做到这一点,但你可以“过度填充”磁铁的前边缘(这样无论线如何精确地延伸,锯齿状边缘都会被覆盖),然后在绘制顶部位置时将其覆盖:

\documentclass[crop,tikz,margin=5mm]{standalone}
\usetikzlibrary{patterns, patterns.meta, calc,fit,backgrounds,positioning,arrows,shapes.geometric, decorations.pathmorphing}
\begin{document}

\begin{tikzpicture}

%\draw[step=0.5, gray, thin] (0,0) grid (9,6);
    

\draw[thick, black]
    (3.25,4)
    --(1,2.5)
    --(1,2)
    --(3,1.5)
    --(5.25,3)
    --(5.25,3.5)
    --(3,2)
    --(3,1.5)
    --(3,2)
    --(1,2.5)
    ;
\pgfmathsetseed{42}
    \draw[thick, decorate,decoration={random steps,segment length=10pt,amplitude=5pt}]
    (5.25,3.5) -- (3.25,4);

\draw[thick, black]
    (6.25,4.25)
    --(8.5,6)
    --(8.5,5.5)
    --(6.25,3.75)
    --cycle
    ;

\draw[thick, black]
    (8.5,6)
    --(6.5,6.5)
    --(4.25,4.75)
    --(4.25,4.25)
    ;
    
\pgfmathsetseed{42}
\draw[thick,pattern=vertical lines, pattern color=red]
    decorate[decoration={random steps,segment length=10pt,amplitude=5pt}] {(6.25,3.75)  -- (4.25,4.25)} -- (4.25,4.75) -- (6.25,5.25) -- (6.25,3.75);
\pgfmathsetseed{42}
\draw[thick,fill=white]
   decorate[decoration={random steps,segment length=10pt,amplitude=5pt}] { (6.25,4.25)--(4.25,4.75)} --
    (5.375,5.625)
    --(7.375,5.125);
\pgfmathsetseed{42}
\draw[thick,pattern=north west lines, pattern color=red]
   decorate[decoration={random steps,segment length=10pt,amplitude=5pt}] { (6.25,4.25)--(4.25,4.75)} --
    (5.375,5.625)
    --(7.375,5.125);
    
\draw[thick,pattern=vertical lines, pattern color=red] (7.375,5.125)--(6.25,4.25) -- (6.25,3.75) -- (7.375,4.625) -- cycle;

\draw[thick]
    (5.375,5.625)
    --(7.375,5.125)
    --(7.375,4.625)
    ;

\draw [thick,pattern=north west lines, pattern color=red]
    (1,2.5)--(3,2)--(4.125,2.75)--(2.125,3.25);
\draw [thick,pattern=vertical lines, pattern color=red]
    (1,2.5)--(3,2) -- (3,1.5) -- (1,2);
\draw [thick,pattern=vertical lines, pattern color=red]
    (3,2)--(3,1.5)--(4.125,2.25)--(4.125,2.75);

%\draw [thick,pattern=north west lines, pattern color=red];

\node (N) at (2.5,2.5){\textbf{{\large N}}};
\node (Z) at (3.75,3.45){\textbf{{\large Z}}};


\node (N) at (5.5,4.75){\textbf{{\large N}}};
\node (Z) at (7.25,6){\textbf{{\large Z}}};




\end{tikzpicture}


\end{document}

在此处输入图片描述

相关内容