我想修改(最佳答案的改进版本)的代码这帖子,使对话气泡序列看起来更像聊天窗口。具体来说,我想添加作者的图片和姓名。
理想情况下,设置应允许多个扬声器。因此,我想将名称 + 图片 + 颜色作为参数提供给气泡命令本身。
作为参考,我想要类似这样的内容:
这是在对链接帖子中的代码进行一些修改后实现的,但由于一些原因,它仍然不完全正确。
首先,当文本只有一两行(例如在底部气泡中)时,照片与气泡的对齐看起来很奇怪。
第二,我想在投影仪幻灯片中使用它来教学,为此,我想要按顺序覆盖气泡的选项,即在幻灯片 2、3 等。当前的解决方案是为每个新段落制作一个新气泡,但这与投影仪叠加配合得不是很好:如果我用包裹纳什的第二段\onslide<2>{}
,我会得到一个尴尬的结果,即幻灯片 1 上有一个空气泡,而文本出现在幻灯片 2 上。
我现在认为更实用的解决方案是定义不同类型的环境,每种类型的气泡一个,这样我就可以根据需要选择使用哪种环境。但我不知道如何从目前的解决方案开始做到这一点。
这是我用来获取上述图像的代码:
\documentclass{article}
\usepackage[many]{tcolorbox}
\usepackage{xcolor}
\usepackage{varwidth}
\usepackage{environ}
\usepackage{xparse}
\newlength{\bubblesep}
\newlength{\bubblewidth}
\setlength{\bubblesep}{2pt}
\AtBeginDocument{\setlength{\bubblewidth}{.75\textwidth}}
\definecolor{bubblegreen}{RGB}{103,184,104}
\definecolor{bubblegray}{RGB}{241,240,240}
\newcommand{\bubble}[4]{%
\tcbox[
on line,
arc=4.5mm,
colback=#1,
colframe=#1,
#2,
]{\color{#3}\begin{varwidth}{\bubblewidth}#4\end{varwidth}}%
}
\ExplSyntaxOn
\seq_new:N \l__ooker_bubbles_seq
\tl_new:N \l__ooker_bubbles_first_tl
\tl_new:N \l__ooker_bubbles_last_tl
\NewEnviron{rightbubbles}[3]
{
\begin{minipage}[t]{0.85\textwidth}
\begin{flushright}
\sffamily
\seq_set_split:NnV
\l__ooker_bubbles_seq {\par}
\BODY
\int_compare:nTF {\seq_count:N \l__ooker_bubbles_seq < 2}
{
\bubble{#1}{rounded~corners}{white}{\BODY}\par
}
{
\seq_pop_left:NN \l__ooker_bubbles_seq \l__ooker_bubbles_first_tl
\seq_pop_right:NN \l__ooker_bubbles_seq \l__ooker_bubbles_last_tl
\bubble{#1}{sharp~corners=southeast}{white}{
\hfill\textbf{{#2}:}\\
\l__ooker_bubbles_first_tl
}
\par\nointerlineskip
\addvspace{\bubblesep}
\seq_map_inline:Nn \l__ooker_bubbles_seq
{
\bubble{#1}{sharp~corners=east}{white}{##1}
\par\nointerlineskip
\addvspace{\bubblesep}
}
\bubble{#1}{sharp~corners=northeast}{white}{\l__ooker_bubbles_last_tl}
\par
}
\end{flushright}
\end{minipage}\hskip0.3em
\begin{minipage}[t]{0.1\textwidth}
\includegraphics[width=\textwidth]{#3}
\end{minipage}
}
\NewEnviron{leftbubbles}[3]
{
\begin{minipage}[t]{0.1\textwidth}
\includegraphics[width=\textwidth]{#3}
\end{minipage}\hskip0.3em
\begin{minipage}[t]{0.85\textwidth}
\begin{flushleft}
\sffamily
\seq_set_split:NnV \l__ooker_bubbles_seq { \par } \BODY
\int_compare:nTF { \seq_count:N \l__ooker_bubbles_seq < 2 }
{
\bubble{#1}{rounded~corners}{black}{\BODY}\par
}
{
\seq_pop_left:NN \l__ooker_bubbles_seq \l__ooker_bubbles_first_tl
\seq_pop_right:NN \l__ooker_bubbles_seq \l__ooker_bubbles_last_tl
\bubble{#1}{sharp~corners=southwest}{black}{
\textbf{{#2}:}\\
\l__ooker_bubbles_first_tl
}
\par\nointerlineskip
\addvspace{\bubblesep}
\seq_map_inline:Nn \l__ooker_bubbles_seq
{
\bubble{#1}{sharp~corners=west}{black}{##1}
\par\nointerlineskip
\addvspace{\bubblesep}
}
\bubble{#1}{sharp~corners=northwest}{black}{\l__ooker_bubbles_last_tl}\par
}
\end{flushleft}
\end{minipage}
}
\ExplSyntaxOff
\begin{document}
\begin{rightbubbles}{bubblegreen}{John Nash}{nash.png}
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\end{rightbubbles}
\begin{leftbubbles}{black!15}{Robert Aumann}{aumann.png}
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
\end{leftbubbles}
\begin{rightbubbles}{bubblegreen}{John Nash}{nash.png}
Quis autem vel eum iure!
\end{rightbubbles}
\end{document}
请注意,这是之前帖子的编辑版本,其中介绍了我想要实现的粗略版本。经过一番努力,我取得了一些进展,但我被对齐问题困住了。这在多个扬声器的情况下也不太好用,但我对现有代码的理解不够深入,无法弄清楚如何重新配置气泡。
当然,我并不期望答案完全遵循此代码。任何有关解决方案的提示都将不胜感激。
答案1
那么使用呢tcolorbox
?
我从您的问题中复制粘贴了图片,因此也许您需要调整一些长度。
\documentclass{article}
\usepackage{environ}
\usepackage{varwidth}
\usepackage[most]{tcolorbox}
\definecolor{bubblegreen}{RGB}{103,184,104}
\definecolor{bubblegray}{RGB}{241,240,240}
\tcbset{
commonoptions/.style={
enhanced,
enhanced jigsaw,
fonttitle=\bfseries,
boxed title style={opacityback=0, opacityframe=0},
sharp corners,
arc=4mm,
opacityframe=0,
after skip=0mm,
},
}
\newtcolorbox{rightbubbles}[4][]{
commonoptions,
attach boxed title to top right={yshift=-7mm, xshift=-2mm},
top=6mm,
right skip=1.5cm,
finish={\node[anchor=north west, yshift=2mm] at (frame.north east) {\includegraphics{#4}};},
title={#3:},
rounded corners=north,
rounded corners=southwest,
colback=#2,
colupper=white,
before skip=1mm,
#1}
\newtcolorbox{rightbubblesfinal}[2][]{
commonoptions,
right skip=1.5cm,
rounded corners=northwest,
rounded corners=south,
colback=#2,
colupper=white,
before skip=0mm,
#1}
\NewEnviron{rightbubbleslittle}[2]{\vspace{1mm}%
\tcbox[commonoptions,
finish={\node[anchor=north west, yshift=2mm] at (frame.north east) {\includegraphics{#2}};},
rounded corners,
colback=#1,
colupper=white,
before=\hfill,
right skip=1.5cm,
varwidth upper]
{\BODY}
}
\newtcolorbox{leftbubbles}[4][]{
commonoptions,
attach boxed title to top left={yshift=-7mm, xshift=2mm},
top=6mm,
left skip=1.5cm,
finish={\node[anchor=north east, yshift=2mm] at (frame.north west) {\includegraphics{#4}};},
title={#3:},
rounded corners=north,
rounded corners=southeast,
colback=#2,
colupper=black,
coltitle=black,
before skip=1mm,
#1}
\newtcolorbox{leftbubblesfinal}[2][]{
commonoptions,
left skip=1.5cm,
rounded corners=northeast,
rounded corners=south,
colback=#2,
colupper=black,
before skip=0mm,
#1}
\NewEnviron{leftbubbleslittle}[2]{\vspace{1mm}%
\tcbox[commonoptions,
finish={\node[anchor=north east, yshift=2mm] at (frame.north west) {\includegraphics{#2}};},
rounded corners,
colback=#1,
colupper=black,
left skip=1.5cm,
varwidth upper]
{\BODY}
}
\begin{document}
\begin{rightbubbles}{bubblegreen}{John Nash}{nash.png}
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\end{rightbubbles}
\begin{rightbubblesfinal}{bubblegreen}
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\end{rightbubblesfinal}
\begin{leftbubbles}{black!15}{Robert Aumann}{aumann.png}
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
\end{leftbubbles}
\begin{leftbubblesfinal}{black!15}
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
\end{leftbubblesfinal}
\begin{rightbubbleslittle}{bubblegreen}{nash.png}
Quis autem vel eum iure!
\end{rightbubbleslittle}
\begin{leftbubbleslittle}{black!15}{aumann.png}
Bye!
\end{leftbubbleslittle}
\end{document}
与beamer
:
\documentclass{beamer}
\usepackage{environ}
\usepackage{varwidth}
\usepackage[most]{tcolorbox}
\definecolor{bubblegreen}{RGB}{103,184,104}
\definecolor{bubblegray}{RGB}{241,240,240}
\tcbset{
commonoptions/.style={
enhanced,
enhanced jigsaw,
fonttitle=\bfseries\scriptsize,
fontupper=\tiny,
boxed title style={opacityback=0, opacityframe=0},
sharp corners,
arc=4mm,
opacityframe=0,
after skip=0mm,
},
}
\newtcolorbox{rightbubbles}[4][]{
commonoptions,
attach boxed title to top right={yshift=-7mm, xshift=-2mm},
top=6mm,
right skip=1.5cm,
finish={\node[anchor=north west, yshift=2mm] at (frame.north east) {\includegraphics{#4}};},
title={#3:},
rounded corners=north,
rounded corners=southwest,
colback=#2,
colupper=white,
before skip=1mm,
#1}
\newtcolorbox{rightbubblesfinal}[2][]{
commonoptions,
right skip=1.5cm,
rounded corners=northwest,
rounded corners=south,
colback=#2,
colupper=white,
before skip=0mm,
#1}
\NewEnviron{rightbubbleslittle}[2]{\vspace{1mm}%
\tcbox[commonoptions,
finish={\node[anchor=north west, yshift=2mm] at (frame.north east) {\includegraphics{#2}};},
rounded corners,
colback=#1,
colupper=white,
before=\hfill,
right skip=1.5cm,
varwidth upper]
{\BODY}
}
\newtcolorbox{leftbubbles}[4][]{
commonoptions,
attach boxed title to top left={yshift=-7mm, xshift=2mm},
top=6mm,
left skip=1.5cm,
finish={\node[anchor=north east, yshift=2mm] at (frame.north west) {\includegraphics{#4}};},
title={#3:},
rounded corners=north,
rounded corners=southeast,
colback=#2,
colupper=black,
coltitle=black,
before skip=1mm,
#1}
\newtcolorbox{leftbubblesfinal}[2][]{
commonoptions,
left skip=1.5cm,
rounded corners=northeast,
rounded
corners=south,
colback=#2,
colupper=black,
before skip=0mm,
#1}
\NewEnviron{leftbubbleslittle}[2]{\vspace{1mm}%
\tcbox[commonoptions,
finish={\node[anchor=north east, yshift=2mm] at (frame.north west) {\includegraphics{#2}};},
rounded corners,
colback=#1,
colupper=black,
left skip=1.5cm,
varwidth upper]
{\BODY}
}
\begin{document}
\begin{frame}\footnotesize
\begin{rightbubbles}{bubblegreen}{John Nash}{nash.png}
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\end{rightbubbles}
\onslide<2->{\begin{rightbubblesfinal}{bubblegreen}
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\end{rightbubblesfinal}}
\onslide<3->{\begin{leftbubbles}{black!15}{Robert Aumann}{aumann.png}
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
\end{leftbubbles}}
\onslide<4->{\begin{leftbubblesfinal}{black!15}
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
\end{leftbubblesfinal}}
\onslide<5->{\begin{rightbubbleslittle}{bubblegreen}{nash.png}
Quis autem vel eum iure!
\end{rightbubbleslittle}}
\onslide<6->{
\begin{leftbubbleslittle}{black!15}{aumann.png}
Bye!
\end{leftbubbleslittle}}
\end{frame}
\end{document}
答案2
你可以使用你的原始代码,如果你添加\vspace{0pt}
到你的小页面(见这个答案),这样在顶部对齐时会忽略内容的基线,因此短消息的对齐方式也是正确的。因此,使用此方法时,短消息不需要额外的气泡环境。
beamer
它似乎\pause
也适用于。
\documentclass[10pt]{beamer}
\usepackage[many]{tcolorbox}
\usepackage{xcolor}
\usepackage{varwidth}
\usepackage{environ}
\usepackage{xparse}
\newlength{\bubblesep}
\newlength{\bubblewidth}
\setlength{\bubblesep}{2pt}
\AtBeginDocument{\setlength{\bubblewidth}{.75\textwidth}}
\definecolor{bubblegreen}{RGB}{103,184,104}
\definecolor{bubblegray}{RGB}{241,240,240}
\newcommand{\bubble}[4]{%
\tcbox[
on line,
arc=.8em, % in `em` to be relative to current font size
colback=#1,
colframe=#1,
#2,
]{\color{#3}\begin{varwidth}{\bubblewidth}#4\end{varwidth}}%
}
\ExplSyntaxOn
\seq_new:N \l__ooker_bubbles_seq
\tl_new:N \l__ooker_bubbles_first_tl
\tl_new:N \l__ooker_bubbles_last_tl
\NewEnviron{rightbubbles}[3]
{
\begin{minipage}[t]{0.85\textwidth}
\vspace{0pt} % see https://tex.stackexchange.com/a/11632/164157
\begin{flushright}
\sffamily
\seq_set_split:NnV
\l__ooker_bubbles_seq {\par}
\BODY
\int_compare:nTF {\seq_count:N \l__ooker_bubbles_seq < 2}
{
\bubble{#1}{rounded~corners}{white}{\BODY}\par
}
{
\seq_pop_left:NN \l__ooker_bubbles_seq \l__ooker_bubbles_first_tl
\seq_pop_right:NN \l__ooker_bubbles_seq \l__ooker_bubbles_last_tl
\bubble{#1}{sharp~corners=southeast}{white}{
\hfill\textbf{{#2}:}\\
\l__ooker_bubbles_first_tl
}
\par\nointerlineskip
\addvspace{\bubblesep}
\seq_map_inline:Nn \l__ooker_bubbles_seq
{
\bubble{#1}{sharp~corners=east}{white}{##1}
\par\nointerlineskip
\addvspace{\bubblesep}
}
\bubble{#1}{sharp~corners=northeast}{white}{\l__ooker_bubbles_last_tl}
\par
}
\end{flushright}
\end{minipage}\hskip0.3em
\begin{minipage}[t]{0.1\textwidth}
\vspace{0pt}
\includegraphics[width=\textwidth]{#3}
\end{minipage}
}
\NewEnviron{leftbubbles}[3]
{
\begin{minipage}[t]{0.1\textwidth}
\vspace{0pt}
\includegraphics[width=\textwidth]{#3}
\end{minipage}\hskip0.3em
\begin{minipage}[t]{0.85\textwidth}
\vspace{0pt}
\begin{flushleft}
\sffamily
\seq_set_split:NnV \l__ooker_bubbles_seq { \par } \BODY
\int_compare:nTF { \seq_count:N \l__ooker_bubbles_seq < 2 }
{
\bubble{#1}{rounded~corners}{black}{\BODY}\par
}
{
\seq_pop_left:NN \l__ooker_bubbles_seq \l__ooker_bubbles_first_tl
\seq_pop_right:NN \l__ooker_bubbles_seq \l__ooker_bubbles_last_tl
\bubble{#1}{sharp~corners=southwest}{black}{
\textbf{{#2}:}\\
\l__ooker_bubbles_first_tl
}
\par\nointerlineskip
\addvspace{\bubblesep}
\seq_map_inline:Nn \l__ooker_bubbles_seq
{
\bubble{#1}{sharp~corners=west}{black}{##1}
\par\nointerlineskip
\addvspace{\bubblesep}
}
\bubble{#1}{sharp~corners=northwest}{black}{\l__ooker_bubbles_last_tl}\par
}
\end{flushleft}
\end{minipage}
}
\ExplSyntaxOff
\begin{document}
\begin{frame}
\footnotesize
\begin{rightbubbles}{bubblegreen}{John Nash}{nash.jpg}
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\end{rightbubbles}
\pause
\begin{leftbubbles}{black!15}{Robert Aumann}{aumann.jpg}
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
\end{leftbubbles}
\pause
\begin{rightbubbles}{bubblegreen}{John Nash}{nash.jpg}
Quis autem vel eum iure!
\end{rightbubbles}
\end{frame}
\end{document}
答案3
对@CarLaTex 答案的版本进行了稍微调整,以允许任何正方形任何尺寸的图像,不仅仅是专门设计和尺寸的圆形图像
\documentclass{article}
\usepackage{environ}
\usepackage{varwidth}
\usepackage[most]{tcolorbox}
\definecolor{bubblegreen}{RGB}{103,184,104}
\definecolor{bubblegray}{RGB}{241,240,240}
\tcbset{
commonoptions/.style={
enhanced,
enhanced jigsaw,
fonttitle=\bfseries,
boxed title style={opacityback=0, opacityframe=0},
sharp corners,
arc=4mm,
opacityframe=0,
after skip=0mm,
},
}
\newtcolorbox{rightbubbles}[4][]{
commonoptions,
attach boxed title to top right={yshift=-7mm, xshift=-2mm},
top=6mm,
right skip=1.5cm,
finish={\node[anchor=center, yshift=-7mm,xshift=7mm] at (frame.north east) {\roundperson{#4}};},
title={#3:},
rounded corners=north,
rounded corners=southwest,
colback=#2,
colupper=white,
before skip=1mm,
#1}
\newtcolorbox{rightbubblesfinal}[2][]{
commonoptions,
right skip=1.5cm,
rounded corners=northwest,
rounded corners=south,
colback=#2,
colupper=white,
before skip=0mm,
#1}
\NewEnviron{rightbubbleslittle}[2]{\vspace{1mm}%
\tcbox[commonoptions,
finish={\node[anchor=center, yshift=-7mm,xshift=7mm] at (frame.north east) {\roundperson{#2}};},
rounded corners,
colback=#1,
colupper=white,
before=\hfill,
right skip=1.5cm,
varwidth upper]
{\BODY}
}
\newtcolorbox{leftbubbles}[4][]{
commonoptions,
attach boxed title to top left={yshift=-7mm, xshift=2mm},
top=6mm,
left skip=1.5cm,
finish={\node[anchor=center, yshift=-7mm,xshift=-7mm] at (frame.north west) {\roundperson{#4}};},
title={#3:},
rounded corners=north,
rounded corners=southeast,
colback=#2,
colupper=black,
coltitle=black,
before skip=1mm,
#1}
\newtcolorbox{leftbubblesfinal}[2][]{
commonoptions,
left skip=1.5cm,
rounded corners=northeast,
rounded corners=south,
colback=#2,
colupper=black,
before skip=0mm,
#1}
\NewEnviron{leftbubbleslittle}[2]{\vspace{1mm}%
\tcbox[commonoptions,
rounded corners,
finish={\node[anchor=center, yshift=-7mm,xshift=-7mm] at (frame.north west) {\roundperson{#2}};},
colback=#1,
colupper=black,
left skip=1.5cm,
varwidth upper]
{\BODY}
}
\newcommand{\roundperson}[1]{
\begin{tikzpicture}\clip (0,0) circle (0.7cm) node {\includegraphics[width=1.4cm]{#1}};\end{tikzpicture}
}
\begin{document}
\begin{rightbubbles}{bubblegreen}{John Nash}{example-image-1x1}
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\end{rightbubbles}
\begin{rightbubblesfinal}{bubblegreen}
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
\end{rightbubblesfinal}
\begin{leftbubbles}{black!15}{Robert Aumann}{example-image-1x1}
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
\end{leftbubbles}
\begin{leftbubblesfinal}{black!15}
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
\end{leftbubblesfinal}
\begin{rightbubbleslittle}{bubblegreen}{example-image-1x1}
Quis autem vel eum iure!
\end{rightbubbleslittle}
\begin{leftbubbleslittle}{black!15}{example-image-1x1}
Bye!
\end{leftbubbleslittle}
\end{document}