импорт внешнего изображения поверх узла с помощью tikz

Question

Как сгенерировать эти узлы и структуру ребер с помощью tikz в латексе?

Я создал следующую фигуру, используя tikz, теперь я хотел бы поместить несколько фигур в верхней части каждого узла (например, сердце с бьющимся сердцем в одном узле и фигурку сыра в другом узле)?

Причина, по которой я хочу создать фигуру сердца, tikzзаключается в том, что качество моего внешнего изображения ухудшается, поскольку я обрезал частоту сердечных сокращений с одного изображения, поместил его поверх фигуры сердца, и постоянное изменение его размера ухудшает его качество.

Я также хотел бы поместить одного из персонажей из этого пакета \usepackage{tikzlings}в качестве фигуры поверх другого узла, и это не работает (например \thing[cheese]), или даже не использовать этот пакет, а использовать другой пакет или просто создать фигурку сыра внутри узла).

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

\begin{document}
\begin{tikzpicture}
     %nodes for latent state
        \node[scale=0.07,circle, fill=red!40!brown!65] (P1) at (0,7) {\includegraphics[]{}};
        \node[scale=0.07,circle, fill=red!40!brown!65] (P2) at (2.5,7) {\includegraphics[]{}};
        \node[align=center] at (0,6.2){\tiny\textbf{\textsc{Low}}};
        \node[align=center] at (2.5,6.2){\tiny\textbf{\textsc{High}}};
        %links
        \path[every node/.style={font=\sffamily\small}]
    (P2) edge [bend right] coordinate [pos=0.2] (top) (P1) 
    (P1) edge [bend right] (P2)
    ;
    \path (P1) edge [loop left] node {} (P1);
    \path (P2) edge [loop right] node {} (P2);
    %%%%%%%%%%
    %%% RECTANGLES %%%
\node[draw, thick, dotted, rounded corners, inner xsep=3.5em, inner ysep=1em, fit=(P1) (P2)] (box) {};
\node[fill=white] at (box.south) {\tiny\textbf{\textsc{States}}};
\end{tikzpicture}
\end{document}

Answer 1

На данный момент, исходя из вашего кода, я получаю следующую картину:

Исходя из вашего намерения использовать изображение, обрезанное по контуру, я предлагаю вам альтернативу, основанную на синтаксисе, path pictureпредставленном в разделе §15.6 pgfmanual. Эта альтернатива дает рисунок внизу этого ответа.

\documentclass[tikz]{standalone}
\usetikzlibrary{fit}
\usepackage{tikzlings}
\tikzset{
    img/.style={circle, fill=red!40!brown!65,inner sep=0pt},
}
\begin{document}
\begin{tikzpicture}
    %nodes for latent state
    % Current code
    %\node[img] (P1) at (0,7) {\includegraphics[width=1cm]{example-image-a}};
    %\node[img] (P2) at (2.5,7) {\includegraphics[width=1cm]{example-image-b}};
    % Proposal
    \path[img] (0,7) circle (5mm) [path picture={\node (P1) at (path picture bounding box.center) {\includegraphics[width=1cm]{example-image-a}};}] ;
    \path[img] (2.5,7) circle (5mm) [path picture={\node (P2) at (path picture bounding box.center) {\includegraphics[width=1cm]{example-image-b}};}] ;
    \node[align=center] at (0,6.2){\tiny\textbf{\textsc{Low}}};
    \node[align=center] at (2.5,6.2){\tiny\textbf{\textsc{High}}};
    %links
    \path[every node/.style={font=\sffamily\small}]
    (P2) edge [bend right] coordinate [pos=0.2] (top) (P1)
    (P1) edge [bend right] (P2)
    ;
    \path (P1) edge [loop left] node {} (P1);
    \path (P2) edge [loop right] node {} (P2);
    %%%%%%%%%%
    %%% RECTANGLES %%%
    \node[draw, thick, dotted, rounded corners, inner xsep=3.5em, inner ysep=1em, fit=(P1) (P2)] (box) {};
    \node[fill=white] at (box.south) {\tiny\textbf{\textsc{States}}};
\end{tikzpicture}
\end{document}

РЕДАКТИРОВАТЬ

Вот рабочая версия, включающая улучшенное определение положения узлов «Низкий» и «Высокий» с помощью библиотеки positioningи включение \tikzlingsв узлы.

\documentclass[tikz]{standalone}
\usetikzlibrary{fit,positioning}
\usepackage{tikzlings}
\tikzset{
    img/.style={circle, fill=red!40!brown!65,inner sep=0pt,outer sep=0pt},
}
\begin{document}
\begin{tikzpicture}
    %nodes for latent state
    \path[img] (0,7) circle (5mm) [path picture={\node (P1) at (path picture bounding box.center) {\tikz[scale=0.5]{\marmot}};}] ;
    \path[img] (2.5,7) circle (5mm) [path picture={\node (P2) at (path picture bounding box.center) {\tikz[scale=0.5]{\cat}};}] ;
    \node[below=5mm of P1.center] (P1l) {\tiny\textbf{\textsc{Low}}};
    \node[below=5mm of P2.center] (P2l) {\tiny\textbf{\textsc{High}}};
    %links
    \path[every node/.style={font=\sffamily\small}]
    (P2) edge [bend right] coordinate [pos=0.2] (top) (P1)
    (P1) edge [bend right] (P2)
    ;
    \path (P1) edge [loop left] node {} (P1);
    \path (P2) edge [loop right] node {} (P2);
    %%%%%%%%%%
    %%% RECTANGLES %%%
    \node[draw, thick, dotted, rounded corners, inner xsep=3.5em, inner ysep=1em, fit=(P1) (P2)] (box) {};
    \node[fill=white] at (box.south) {\tiny\textbf{\textsc{States}}};
\end{tikzpicture}
\end{document}

EDIT n°2: включение формы сердцебиения и\resizebox

\documentclass[tikz]{standalone}
\usetikzlibrary{fit,positioning}
\usepackage{tikzlings}
\tikzset{
    img/.style={circle, fill=red!40!brown!65,inner sep=0pt,outer sep=0pt},
}
\usepackage{fontawesome}
\begin{document}
\begin{tikzpicture}
    %nodes for latent state
    \path[img] (0,7) circle (5mm) [path picture={\node[text width=1cm,align=center,anchor=center,inner sep=0pt, outer sep=0pt] (P1) at (path picture bounding box.center) {\resizebox{1cm}{!}{\faHeartbeat}};}] ;
    \path[img] (2.5,7) circle (5mm) [path picture={\node[text width=1cm,align=center,anchor=center,inner sep=0pt, outer sep=0pt] (P2) at (path picture bounding box.center) {\resizebox{1cm}{!}{\tikz{\cat}}};}] ;
    \node[below=5mm of P1.center] (P1l) {\tiny\textbf{\textsc{Low}}};
    \node[below=5mm of P2.center] (P2l) {\tiny\textbf{\textsc{High}}};
    %links
    \path[every node/.style={font=\sffamily\small}]
    (P2) edge [bend right] coordinate [pos=0.2] (top) (P1)
    (P1) edge [bend right] (P2)
    ;
    \path (P1) edge [loop left] node {} (P1);
    \path (P2) edge [loop right] node {} (P2);
    %%%%%%%%%%
    %%% RECTANGLES %%%
    \node[draw, thick, dotted, rounded corners, inner xsep=3.5em, inner ysep=1em, fit=(P1) (P2)] (box) {};
    \node[fill=white] at (box.south) {\tiny\textbf{\textsc{States}}};
\end{tikzpicture}
\end{document}

Answer 2

Небольшая вариация. в основном не по теме хорошего@ BambOo ответ(+1), для развлечения и тренировки. Основные отличия в определенных стилях, которые позволяют писать более короткий и понятный код:

\documentclass[margin=3mm]{standalone}
\usepackage{newtxtext} % provide also bold small caps fonts
\usepackage{tikzlings}
\usetikzlibrary{arrows.meta,
                fit}

\begin{document}
    \begin{tikzpicture}[
        every edge/.style = {draw,-Straight Barb},
every label/.append style = {font=\scriptsize\bfseries\scshape, % work with newtxtext
                             fill=white,inner ysep=1pt},
               FIT/.style = {draw, densely dotted, rounded corners,
                             inner ysep=1em, fit=#1},
               img/.style = {fill=yellow!50},
state/.style 2 args = {path picture={\node[inner sep=0pt] (#1) at (\ppbb.center)
                                                          {\tikz[scale=0.6] {#2}};}}
                        ]
\def\ppbb{path picture bounding box}
% states
\fill[img] (0,0) circle (6mm) [state={P1}{\penguin[body=teal]}] ;
    \node (p1) [label=below:Low] at (P1.south) {};
\fill[img] (3,0) circle (6mm) [state={P2}{\penguin[body=red]}] ;
    \node (p2) [label=below:High] at (P2.south) {};
% links
\path   (P2) edge [bend right]  (P1) % , coordinate [pos=0.2] (top)
        (P1) edge [bend right]  (P2)
        (P1) edge [loop  left]  coordinate (L)  (P1)
        (P2) edge [loop right]  coordinate (R)  (P2);
    %%%%%%%%%%
% automatom border
\node[FIT=(L) (P1) (p2) (R),
      label={[anchor=center]below:States}]  {};
    \end{tikzpicture}
\end{document}