绘制¶

简单图形¶

对于常见的基本图形（如 $\huge\bigcirc$ \huge\bigcirc ）可直接使用对应命令/字符。

但对于稍微复杂的图形，我们很难找到某个可以满足要求的字符/命令。此时我们则需要将多个基本图形结合到一起以达到目标效果。

例-圆角矩形边框

可以拆分成 4 条线段和 4 段 $\dfrac{1}{4}$ 圆弧。

对于线段，直接使用 \rule 绘制。\ 对于圆弧，由于 $\LaTeX$ 中没有 $\dfrac{1}{4}$ 圆弧的命令，所以使用特殊字符： ◜◝◟◞

缺点：无法自定义圆角大小，无法在讨论区渲染。

$
\def\w{100pt}\def\h{61pt}
\def\arcoffest{54.7pt}
\color{#bebebe}
\rule[-3pt]{0.5pt}{\h}\kern{-1.2pt}
\raisebox{\arcoffest}{◜}\kern{-5pt}
\rule[\h]{\w}{0pt}
\kern{-4.5pt}\raisebox{\arcoffest}{◝}\kern{-1pt}
\rule[-3pt]{0.5pt}{\h}\kern{-\w}
\kern{-6.9pt}\raisebox{-6pt}{◟}\kern{-5pt}
\rule[-6pt]{\w}{0pt}\kern{-4.3pt}
\raisebox{-6pt}{◞}\kern{-0.5pt}
$

$ \def\w{100pt}\def\h{61pt} \def\arcoffest{54.7pt} \color{#bebebe} \rule[-3pt]{0.5pt}{\h}\kern{-1.2pt} \raisebox{\arcoffest}{◜}\kern{-5pt} \rule[\h]{\w}{0pt} \kern{-4.5pt}\raisebox{\arcoffest}{◝}\kern{-1pt} \rule[-3pt]{0.5pt}{\h}\kern{-\w} \kern{-6.9pt}\raisebox{-6pt}{◟}\kern{-5pt} \rule[-6pt]{\w}{0pt}\kern{-4.3pt} \raisebox{-6pt}{◞}\kern{-0.5pt} $

例-信息角标

这个比较容易实现，使用两个圆 + 一个矩形就可以画出。

$
% #1 宽度 #2 文字 #3 颜色
\def\infobadage#1#2#3{
    {\color{#3}
    \LARGE\bullet
    \kern{-3.7pt}
    \rule[1pt]{#1}{6.5pt}
    \kern{-3.7pt}
    \LARGE\bullet}
    \kern{-#1}\kern{-5.9pt}
    \color{white}
    \raisebox{2.4pt}{\tiny\textsf{#2}}
}
\infobadage{17.2pt}{114514}{FA5151}\quad
\infobadage{20pt}{1919810}{FA5151}\quad
\infobadage{18.2pt}{abcdefg}{FA5151}
$

$ % #1 宽度 #2 文字 #3 颜色 \def\infobadage#1#2#3{ {\color{#3} \LARGE\bullet \kern{-3.7pt} \rule[1pt]{#1}{6.5pt} \kern{-3.7pt} \LARGE\bullet} \kern{-#1}\kern{-5.9pt} \color{white} \raisebox{2.4pt}{\tiny\textsf{#2}} } \infobadage{17.2pt}{114514}{FA5151}\quad \infobadage{20pt}{1919810}{FA5151}\quad \infobadage{18.2pt}{abcdefg}{FA5151} $

复杂示例

例-简单提示框

用圆 + 矩形就可以画出。

演示源码

$ % w, h, fillcol, bordercol \newcommand\BorderRect[4]{ \color{#3}\rule{#1}{#2}\kern{-#1} \color{#4}\rule{0.5px}{#2}\kern{-0.5px} \rule{#1}{0px}\rule{0.5px}{#2}\kern{-0.5px} \kern{-#1}\rule[#2]{#1}{0px} } % w, h, title, subtitle, fillcol, iconch ,iconcol \newcommand\BasicInfoBarFather[7]{ \BorderRect{#1}{#2}{#5}{ghostwhite} \kern{-#1} \raisebox{#2}{ \raisebox{-26pt}{ \color{black}\kern{-4px} \raisebox{7px}{ \color{#7}\Huge{∙}\kern{-1px} } \raisebox{10.6px}{ \kern{-20.2px} \color{white}\scriptsize\textbf{#6} } \kern{-7px}\footnotesize \raisebox{10.2px}{\textbf{\textsf{#3}}}\kern{2px} \raisebox{10.2px}{\textsf{#4}} } } } \def\BasicInfoBarColorFill{#F4F4F4}\def\BasicInfoBarColorIcon{#0078D4} \def\BasicWarnBarColorFill{#FFF4CE}\def\BasicWarnBarColorIcon{#9D5D00} \def\BasicOkBarColorFill{#DFF6DD}\def\BasicOkBarColorIcon{#0F7B0F} \def\BasicErrBarColorFill{#FDE7E9}\def\BasicErrBarColorIcon{#C42B1C} \newcommand\BasicInfoBar[4]{ \BasicInfoBarFather{#1}{#2}{#3}{#4} {\BasicInfoBarColorFill}{i}{\BasicInfoBarColorIcon} } \newcommand\BasicWarnBar[4]{ \BasicInfoBarFather{#1}{#2}{#3}{#4} {\BasicWarnBarColorFill}{i}{\BasicWarnBarColorIcon} } \newcommand\BasicOkBar[4]{ \BasicInfoBarFather{#1}{#2}{#3}{#4} {\BasicOkBarColorFill} {\tiny\kern{-2px}\raisebox{0.8px}{√}} {\BasicOkBarColorIcon} } \newcommand\BasicErrBar[4]{ \BasicInfoBarFather{#1}{#2}{#3}{#4} {\BasicErrBarColorFill} {\kern{-2px}\raisebox{0.6px}{×}} {\BasicErrBarColorIcon} } \BasicInfoBar{200px}{26px}{标题}{副标题}\newline \BasicWarnBar{200px}{26px}{标题}{副标题}\newline \BasicOkBar{200px}{26px}{标题}{副标题}\newline \BasicErrBar{200px}{26px}{标题}{副标题}\newline $

$
% w, h, fillcol, bordercol
\newcommand\BorderRect[4]{
  \color{#3}\rule{#1}{#2}\kern{-#1}
  \color{#4}\rule{0.5px}{#2}\kern{-0.5px}
  \rule{#1}{0px}\rule{0.5px}{#2}\kern{-0.5px}
  \kern{-#1}\rule[#2]{#1}{0px}
}
% w, h, title, subtitle, fillcol, iconch ,iconcol
\newcommand\BasicInfoBarFather[7]{
  \BorderRect{#1}{#2}{#5}{ghostwhite}
  \kern{-#1}
  \raisebox{#2}{
    \raisebox{-26pt}{
      \color{black}\kern{-4px}
      \raisebox{7px}{
        \color{#7}\Huge{∙}\kern{-1px}
      }
      \raisebox{10.6px}{
        \kern{-20.2px}
        \color{white}\scriptsize\textbf{#6}
      }
      \kern{-7px}\footnotesize
      \raisebox{10.2px}{\textbf{\textsf{#3}}}\kern{2px}
      \raisebox{10.2px}{\textsf{#4}}
    }
  }
}
\def\BasicInfoBarColorFill{#F4F4F4}\def\BasicInfoBarColorIcon{#0078D4}
\def\BasicWarnBarColorFill{#FFF4CE}\def\BasicWarnBarColorIcon{#9D5D00}
\def\BasicOkBarColorFill{#DFF6DD}\def\BasicOkBarColorIcon{#0F7B0F}
\def\BasicErrBarColorFill{#FDE7E9}\def\BasicErrBarColorIcon{#C42B1C}
\newcommand\BasicInfoBar[4]{
  \BasicInfoBarFather{#1}{#2}{#3}{#4}
  {\BasicInfoBarColorFill}{i}{\BasicInfoBarColorIcon}
}
\newcommand\BasicWarnBar[4]{
  \BasicInfoBarFather{#1}{#2}{#3}{#4}
  {\BasicWarnBarColorFill}{i}{\BasicWarnBarColorIcon}
}
\newcommand\BasicOkBar[4]{
  \BasicInfoBarFather{#1}{#2}{#3}{#4}
  {\BasicOkBarColorFill}
  {\tiny\kern{-2px}\raisebox{0.8px}{√}}
  {\BasicOkBarColorIcon}
}
\newcommand\BasicErrBar[4]{
  \BasicInfoBarFather{#1}{#2}{#3}{#4}
  {\BasicErrBarColorFill}
  {\kern{-2px}\raisebox{0.6px}{×}}
  {\BasicErrBarColorIcon}
}
\BasicInfoBar{200px}{26px}{标题}{副标题}\newline
\BasicWarnBar{200px}{26px}{标题}{副标题}\newline
\BasicOkBar{200px}{26px}{标题}{副标题}\newline
\BasicErrBar{200px}{26px}{标题}{副标题}\newline
$

对图形进行加减¶

加：相同颜色堆叠
减：背景颜色堆叠

演示源码

$ \color{black}\Huge\bullet\kern{-10pt} \color{white}{\bullet}\kern{-13pt} \color{black}\bullet \Huge\bigstar\kern{-21pt} \color{white}{\bigstar}\kern{-22pt} \color{black}\bigstar \Huge\bigstar\kern{-19pt} \Large\color{white} \raisebox{1.5pt}{★} $

$ \kern{2pt} \color{black}\small \raisebox{-3pt}{\bf{⊥}} \kern{-10.5pt} \color{black}\Huge\circ \color{white}\kern{-16pt}\rule[6.5pt]{12pt}{10pt} \kern{-10.6pt}\color{black} \LARGE\raisebox{2.3pt}{∙} \kern{-8.5pt}\raisebox{6pt}{∙}\kern{-7.8pt} \rule[6pt]{6.8pt}{4pt}\kern{-6.5pt} \color{red}\xcancel{\phantom{\rule[-2pt]{6pt}{15pt}}} $

$
\color{black}\Huge\bullet\kern{-10pt}
\color{white}{\bullet}\kern{-13pt}
\color{black}\bullet
\Huge\bigstar\kern{-21pt}
\color{white}{\bigstar}\kern{-22pt}
\color{black}\bigstar
\Huge\bigstar\kern{-19pt}
\Large\color{white}
\raisebox{1.5pt}{★}
$

$
\kern{2pt}
\color{black}\small
\raisebox{-3pt}{\bf{⊥}}
\kern{-10.5pt}
\color{black}\Huge\circ
\color{white}\kern{-16pt}\rule[6.5pt]{12pt}{10pt}
\kern{-10.6pt}\color{black}
\LARGE\raisebox{2.3pt}{∙}
\kern{-8.5pt}\raisebox{6pt}{∙}\kern{-7.8pt}
\rule[6pt]{6.8pt}{4pt}\kern{-6.5pt}
\color{red}\xcancel{\phantom{\rule[-2pt]{6pt}{15pt}}}
$

其他¶

阴影¶

原理：绘制由灰到白的渐变色。（计算渐变色的方法有很多，但那超出了本文的范围）

示例：

\def\w{100pt}
\def\drawx#1#2{\color{#1}\rule[#2]{\w}{0pt}\kern{-\w}}
\drawx{bfbfbf}{0pt}
\drawx{d6d6d6}{-0.5pt}
\drawx{ececec}{-1.0pt}
\drawx{f8f8f8}{-1.5pt}\newline
\drawx{2a2a2a}{0pt}
\drawx{2e2e2e}{-0.5pt}
\drawx{2f2f2f}{-1.0pt}
\drawx{313131}{-1.5pt}

$ \def\w{100pt} \def\drawx#1#2{\color{#1}\rule[#2]{\w}{0pt}\kern{-\w}} \drawx{bfbfbf}{0pt} \drawx{d6d6d6}{-0.5pt} \drawx{ececec}{-1.0pt} \drawx{f8f8f8}{-1.5pt}\newline \drawx{2a2a2a}{0pt} \drawx{2e2e2e}{-0.5pt} \drawx{2f2f2f}{-1.0pt} \drawx{313131}{-1.5pt} $

简单像素画¶

原理：逐一绘制像素。

缺点：公式中函数嵌套有限制¹，绘制大小有限。

可优化：对位于同一列/行的同颜色像素一起绘制。

演示源码

这是游戏 minecraft 中的工具：铁镐

$ \newcommand{\x}{0}\newcommand{\bitsize}{2mm}\newcommand{\b}[1]{\color{#1}\rule[\x mm]{\bitsize}{\bitsize}}\newcommand{\bw}{\bitsize}\newcommand {\w}{26mm}\newcommand{\rx}[1]{\renewcommand{\x}{#1}} \newcommand{\k}{\kern{-\w}} \b{#281e0b}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff} \k\rx{2}\b{#493615}\b{#896727}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff} \k\rx{4}\b{#fff}\b{#493615}\b{#684e1e}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff} \k\rx{6}\b{#fff}\b{#fff}\b{#493615}\b{#896727}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#181818}\b{#fff} \k\rx{8}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#684e1e}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#181818}\b{#fff}\b{#181818} \k\rx{10}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#896727}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#181818}\b{#d8d8d8}\b{#181818} \k\rx{12}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#684e1e}\b{#281e0b}\b{#fff}\b{#fff}\b{#181818}\b{#c1c1c1}\b{#181818} \k\rx{14}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#896727}\b{#281e0b}\b{#fff}\b{#181818}\b{#c1c1c1}\b{#181818} \k\rx{16}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#684e1e}\b{#281e0b}\b{#c1c1c1}\b{#d8d8d8}\b{#181818} \k\rx{18}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#d8d8d8}\b{#c1c1c1}\b{#181818}\b{#fff} \k\rx{20}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#444}\b{#181818}\b{#181818}\b{#181818}\b{#c1c1c1}\b{#c1c1c1}\b{#896727}\b{#281e0b}\b{#fff} \k\rx{22}\b{#fff}\b{#fff}\b{#fff}\b{#444}\b{#fff}\b{#d8d8d8}\b{#c1c1c1}\b{#c1c1c1}\b{#d8d8d8}\b{#444}\b{#493615}\b{#684e1e}\b{#fff} \k\rx{24}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#444}\b{#444}\b{#444}\b{#444}\b{#444}\b{#fff}\b{#fff}\b{#fff}\b{#fff} $

$
\newcommand{\x}{0}\newcommand{\bitsize}{2mm}\newcommand{\b}[1]{\color{#1}\rule[\x mm]{\bitsize}{\bitsize}}\newcommand{\bw}{\bitsize}\newcommand {\w}{26mm}\newcommand{\rx}[1]{\renewcommand{\x}{#1}}
\newcommand{\k}{\kern{-\w}}
\b{#281e0b}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}
\k\rx{2}\b{#493615}\b{#896727}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}
\k\rx{4}\b{#fff}\b{#493615}\b{#684e1e}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}
\k\rx{6}\b{#fff}\b{#fff}\b{#493615}\b{#896727}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#181818}\b{#fff}
\k\rx{8}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#684e1e}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#181818}\b{#fff}\b{#181818}
\k\rx{10}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#896727}\b{#281e0b}\b{#fff}\b{#fff}\b{#fff}\b{#181818}\b{#d8d8d8}\b{#181818}
\k\rx{12}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#684e1e}\b{#281e0b}\b{#fff}\b{#fff}\b{#181818}\b{#c1c1c1}\b{#181818}
\k\rx{14}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#896727}\b{#281e0b}\b{#fff}\b{#181818}\b{#c1c1c1}\b{#181818}
\k\rx{16}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#684e1e}\b{#281e0b}\b{#c1c1c1}\b{#d8d8d8}\b{#181818}
\k\rx{18}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#493615}\b{#d8d8d8}\b{#c1c1c1}\b{#181818}\b{#fff}
\k\rx{20}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#444}\b{#181818}\b{#181818}\b{#181818}\b{#c1c1c1}\b{#c1c1c1}\b{#896727}\b{#281e0b}\b{#fff}
\k\rx{22}\b{#fff}\b{#fff}\b{#fff}\b{#444}\b{#fff}\b{#d8d8d8}\b{#c1c1c1}\b{#c1c1c1}\b{#d8d8d8}\b{#444}\b{#493615}\b{#684e1e}\b{#fff}
\k\rx{24}\b{#fff}\b{#fff}\b{#fff}\b{#fff}\b{#444}\b{#444}\b{#444}\b{#444}\b{#444}\b{#fff}\b{#fff}\b{#fff}\b{#fff}
$

生成器

原先为“元素的数量有限制”，后由 OoHappyoO 指正。 ↩