Beamer 使用 tikz 宏包實現畫圖和動畫實例

無意之中搜索到tikz這個宏包,它可以在beamer中用來繪制圖表,還可以結合到beamer中形成動畫效果,感覺非常不錯,現在整理出教程

之前使用beamer寫slides,都是直接找的圖片,所以直接采用貼圖的方式。前幾天搜索到了tikz這個宏包,發現它可以用來繪制圖表,並結合到beamer中形成動畫效果,因此找了一些資料,並嘗試畫簡單的流程圖。
首先,需要在源文件中指定引用tikz宏包,並且定義一些簡單的圖形:

代碼如下

usepackage{tikz}
tikzstyle{block} = [rectangle, draw, fill=blue!20, text width=4em, text centered, rounded corners]
tikzstyle{hugeBlock} = [rectangle, draw, fill=blue!20,
text width=5em, text centered, rounded corners, minimum height=4em]
tikzstyle{line} = [draw, -latex']


這裏定義了兩個圖形,一個是普通的“塊”,用藍色填充,文字居中,有圓角;還有一個“大塊”,其他都一樣,只是文字寬度和“塊”最小寬度不同。

試著畫一個簡單的靜態圖:

代碼如下
begin{frame}{集中式工作流}
工作流程和svn類似,基本形態如圖:
begin{tikzpicture}[node distance = 2cm, auto]
node [block] (center) {共享倉庫};
node[block, below of=center, node distance = 3cm](centerDevelop){開發者2};
node[block, left of=centerDevelop, node distance = 3cm](leftDevelop){開發者1};
node[block, right of=centerDevelop,node distance = 3cm](rightDevelop){開發者3};
path[line,<->](center) -- (leftDevelop);
path[line,<->](center) -- (centerDevelop);
path[line,<->](center) -- node{push/pull} (rightDevelop);
end{tikzpicture}
end{frame}


首先是開始一個tikzpicture繪圖區域,然後使用node繪制節點,節點都是使用前面定義的“塊”。可以通過位置參數來控制繪制的節點和其他節點的相對位置關系。繪制完節點之後,繪制節點的連線:通過path指令。這裏使用雙向箭頭,所以在參數裏面增加了<->符號。連接節點的方式很簡單,用前面定義的節點名字,之間用–連起來就好了。這幅圖是參照pro git中的集中式工作流介紹中的插圖畫的,源圖爲:集中式工作流

繪制出來的圖爲:

Beamer  使用 tikz 宏包實現畫圖和動畫實例

雖然不是太好看,當然也可以通過修改“塊”的圖形,弄的更好看些。
將tikz用在beamer中,最主要的當然是爲了讓生成的pdf有“動畫”效果了,也就是能夠自動生成多張pdf頁面,在播放的時候有類似分布展現的效果。

代碼如下
begin{frame}frametitle{集成管理員工作流}framesubtitle{參與者流程}
begin{tikzpicture}[node distance = 3cm, auto]
path[use as bounding box] (-1,0) rectangle (10,-2);
path[line]<1-> node[block](fock){fock工程};
path[line]<2-> node[block, right of=fock, node distance=3cm](clone){克隆到本地}
(fock) -- (clone);
path[line]<3-> node[block, right of=clone, node distance=3cm](edit){修改}
(clone) -- (edit);
path[line]<4-> node[block, below of=edit, node distance=3cm](commit){提交}
(edit) -- (commit);
path[line]<5-> node[block, left of=commit, node distance=3cm](push){推送遠程}
(commit) -- (push);
path[line]<6-> node[block, left of=push, node distance=3cm](mergeRequst){請求merge}
(push) -- (mergeRequst);
end{tikzpicture}
end{frame}


這裏主要靠path指令,用法和beamer中的itemize/item相同,通過指定<n->,讓tex在後面第n頁上繪制。需要特別注意的是第一個path。必須要繪制一個bounding box,否則在排版的時候會自動把節點進行居中等重排,導致後面的頁面和前面的節點絕對位置有所移動。這裏每個path會生成一頁,這一個frame會包含6頁。

beamer中使用listings宏包
好幾次想在beamer中使用listings宏包來進行格式化和語法高亮,總是編譯不通過。終于找到方法了,要在\begin{frame}後面加上[fragile]屬性,如果frame包含名字,這個屬性要在名字之前,如:

代碼如下

\begin{frame}[fragile]{title}
\begin{lstlisting}
code
\end{lstlisting}
\end{frame}

更多相關文章
  • animate() 方法執行 CSS 屬性集的自定義動畫.該方法通過CSS樣式將元素從一個狀態改變爲另一個狀態.CSS屬性值是逐漸改變的,這樣就可以創建動畫效果,下面我們一起來一個jquery animate step實現css3屬性動畫的例子.jquery animation的工作原理是通過將元素 ...
  • css3+html5 實現變形與動畫教程
    本文是我們詳細介紹一下 css3+html5實現動畫的原理及實例的圖解教程,css3制作動畫的幾個屬性:變形(transform),過渡(transition)和動畫(animation)等.transform變形.transform英文意思:改變,變形.css3中transform注意包括以下幾種 ...
  • python實現手機APP自動簽到
    現在的app在應用已經到達了頂峰狀態了,一個小小的企業網站有時也要做一個app了,下文我們
  • Shadowsocks + ChnRoute 實現 OpenWRT 路由器自動翻牆配置
    翻牆對于想看看外面的世界的朋友都希望來翻牆了,下面我們介紹一篇Shadowsocks + ChnRoute 實現 OpenWRT 路由器自動翻牆的配置教程這篇文章介紹的方法基于aa65535的shadowsocks-spec for openwrt,介紹了如何在OpenWRT下配置自動翻牆,新版本支
  • 本文我們來講講在iOS開發中比較常用的特效無限滾動,這個滾動是使用UIScrollView組件實現,本文提供了三個實例分析,還有實現原理.實例一 iOS開發中UIScrollView支持無限滾動默認的UIScrollView滑動到底之後(假設往右),就無法繼續往右滑了,但爲了更好的用戶體驗,我們繼續
  • 本文章介紹了利用png-24透明背景在ie6下無法透明的解決辦法,有需要了解的同學可以參考一下下,最後面我們還提供一透明的方法.在IE6直接顯示(包括內容中直接插入.作爲背景圖片)PNG-24格式的圖片,是不能正確顯示透明.半透明內容與其他內容的疊加呈現效果的.那些IE7+以及其他標准浏覽器中漂亮的
  • html5用transform來實現位移,縮放,旋轉實例
    一篇關于html5用transform來實現位移,縮放,旋轉實例,希望對各位朋友學習html5會有所幫助.前面我講過在canvas中實現圖形的變換,這是比較簡單的,因爲都是用的直觀的函數.今天我還是要實現同樣的圖形變化效果,但不同的是我要用一個看起來就讓人心碎的方法,就是transform,也就是矩 ...
  • JavaScript ajax實現省市區聯動例子
    本文章來爲各位介紹一個關于JavaScript ajax實現省市區聯動例子 ,希望這個例子對各位有幫助.總結下自己在專案中做的最多的便是省市區的聯動選擇了.一種是省市區的樣式是三個select框,直接選擇,樣式如下: 一種是省select框存在,市,區select框動態添加到後面(注意動態添加元素,
一周排行
  • 小編找了很久關于jspm是什麽東西,發現它就是一個叫做jackson方法因爲是一個名爲jackson提示的所以叫它的名字了,下面一起來看看.我在 JSPM 環境下開發時,頁面修改由 Browsersync 監控,然後
  • Windows visual studio 2015 搭建 python 開發環境
    Python語言自從20世紀90年代初誕生至今,它逐漸被廣泛應用于處理系統管理任務和Web ...
  • Nginx目錄權限這個設置就像apache的一個可以設置能不能直接訪問目錄了,下面一起來看看,希望對各位會有所幫助.在學習Linux時,Web環境是LNMP,在使用過程中浏覽目錄時提示沒有權限,要打開這個功能需要做以 ...
  • phpcmsV9後台上傳圖片提示undefind解決辦法
    本人使用的是phpcms9.4.2版本了在以前版本是可以上傳圖片的但是升級到9.4.2之後
  • html中的file控件是非常的難看得,下文來幫助各位利用純css美化file文件上傳控件了,有興趣的朋友可進入參考.在專案開發過程中可能經常也會遇到file控件,但是這個控件比較另類,能夠修改的屬性不多,而且樣式外
  • C++11標准爲C++編程語言的第三個官方標准,C++11包含了核心語言的新機能,並且拓展C++標准程序庫,並且加入了大部分的C++ Technical Report 1程序庫(數學上的特殊函數除外).C++11標准
  • 魅族MX4Pro wlan自動休眠設置方法圖解
    手機可節省我們第一步就是wifi網路要關閉了,這樣我們又不是隨時關了,這個可以設置沒有使用
  • 首先要准備一些圖像,圖像的大小(無論是尺寸大小還是數據大小)要控制好,如果太大,會使用戶等不及查看全圖就跳出了,如果太小,又會影響頁面質量 在script中將這些圖像編爲一個數組,便于調用.數組的長度當然就是圖像的數
  • 安裝php solr擴展是非常的簡單的,下面小編來給大家介紹linux中php solr擴展具體安裝過程.從http://pecl.php.net/package/solr下載最新版本.解壓後運行:phpize./c ...
  • 本文章介紹的目的就是實現在 openSUSE 13.1 系統下,配置 Apache 伺服器綁定 www.111cn.net二級域名,具體配置步驟如下.DNS 綁定 A 記錄#首先在 DNS 上創建 A 記錄,將域名綁