![如何制作如以下示例中的小图形?](https://linux22.com/image/379703/%E5%A6%82%E4%BD%95%E5%88%B6%E4%BD%9C%E5%A6%82%E4%BB%A5%E4%B8%8B%E7%A4%BA%E4%BE%8B%E4%B8%AD%E7%9A%84%E5%B0%8F%E5%9B%BE%E5%BD%A2%EF%BC%9F.png)
答案1
可能有几种方法可以做到这一点,但搜索这样的事情可能会很棘手,部分原因是许多问题就像你的一样:一个图像,以及“我该怎么做?”的问题。当然,很可能没有人问过如何制作这样的图表。
话虽如此:在我睡觉前快速进行丑陋的破解。for 循环中的数字(0.12、0.63 等)对应于 URL 节点左下角和右下角之间的分数水平距离,可能需要对其进行一些微调。
\documentclass[border=5mm]{standalone}
\usepackage{url}
\usepackage{tikz}
\usetikzlibrary{calc}
\begin{document}
\begin{tikzpicture}
\node [inner xsep=0pt,name=foo] {\url{https://username:[email protected]:5000/api/person?id=1234#email}};
\foreach [remember=\xb as \xa (initially 0)] \xb/\txt in {
0.12/Schema,
0.63/Authority,
0.79/Path,
0.91/Query,
1/Fragment}
{
\draw ($(foo.south west)!\xa!(foo.south east)$) |- coordinate [pos=0.75] (m)
($(foo.south west)!\xb!(foo.south east) + (-1pt,-5pt)$) --
($(foo.south west)!\xb!(foo.south east) + (-1pt,0)$);
\draw (m) -- ++(0,-5pt) node[below, font=\scriptsize\sffamily] {\txt};
}
\end{tikzpicture}
\end{document}
答案2
这是替代方案Torbjørn 的精彩回答基于托比昂的非常有用的命令\tikznode
优点是您可以更轻松地控制垂直条的位置,因为它们由节点决定,但缺点是它(目前?)不能与\url
。(编辑:缩短了代码,遵循了(猜猜是谁 ;-) Torbjørn T 的建议。开头和结尾的较短的腿是故意的,但是,如果你不喜欢它们,可以替换\strut
为\vphantom{x}
。)
\documentclass{article}
\usepackage{tikz}
\usetikzlibrary{positioning}
\newcommand{\tikznode}[2]{\tikz[remember picture,baseline=(#1.base),inner sep=0pt] \node (#1) {#2};}
\begin{document}
\texttt{\tikznode{0}{\strut}https:/\tikznode{1}{/}username:password\@server.com:5000\tikznode{2}{/}api/person\tikznode{3}{?}id=1234\tikznode{4}{\#}email\tikznode{5}{\strut}}
\begin{tikzpicture}[overlay,remember picture,font=\sffamily]
\coordinate[below=4pt of 0.south] (B);
\foreach [count=\X from 0, count=\Z] \Y in {Schema,Authority,Path,Query,Fragment}
{\draw ([xshift=-1pt]\Z.south) -- ([xshift=-1pt]\Z.south |-B) -| ([xshift=1pt]\X.south)
coordinate[pos=0.25](M-\X);
\draw (M-\X) -- ++(0,-3pt) node[below]{\Y};}
\end{tikzpicture}
\end{document}
答案3
这是一种使用装饰将 url 排版为单独节点的方法text effects along path
,然后可以使用它来定位括号。
\documentclass[tikz,border=2]{standalone}
\usetikzlibrary{calc,decorations.pathreplacing,decorations.text}
\begin{document}
\begin{tikzpicture}
\path [decoration={
text effects along path,
text={https://username:[email protected]:5000/api/person?id=1234\#email},
text effects/.cd,
text along path,
path from text,
character count=\n,
every character/.style={
font=\tt, name=n\n,
text height=0.666em, text depth=0.125em,
minimum height=0}},
decorate] (0,0);
\foreach \i/\j/\name in {
1/8/Schema,9/41/Authority,42/52/Path,53/60/Query,61/66/Fragment}
\draw [decoration={brace, mirror, amplitude=6}, decorate]
($(n\i.south west)+(0.05,0)$) -- ($(n\j.south east)-(0.05,0)$)
node [midway, below=8, font=\scriptsize\sffamily] {\name};
\end{tikzpicture}
\end{document}