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框動態添加到後面(注意動態添加元素,
一周排行
  • php教程設置北京時間函數date_default_timezone_set()定義和用法date_default_timezone_set() 函數設置用在腳本中所有日期/時間函數的默認時區.語法date_defa
  • crontab就是linux系統的一個定時任務插件了,我們如果要使用 crontab就必須安裝它了,安裝好之後就可以使用crontab定時執行任務了,具體的如下.首先,打開命令行.如果沒有安裝crontab的話1,先
  • 因爲有的時候我們會手賤在函數中傳參導致修改數組值,所以就産生了這個東西,特點其實是讓編譯器報錯,告訴你這裏不應該被改變.如:int sum(const int ar[], int n)如果const int days
  • 在html表單提交中method請求Get和Post區別其實很顯示的,get提交會是url形式的並且數據量不能太多,而post數據是在浏覽器url看不到的並且可以是大數據量而且get安全性非常低,post安全性較高. ...
  • 小編整理過不只10篇關于利用js取得URL參數的一些函數了,今天 我們來看看一個關于jQuery獲取URL請求參數的例子,希望此例子可以對各位有幫助.1.juqery 代碼$.extend({ getUrlVars:
  • 解決iTunes發生未知錯誤-50問題的方法
    iTunes發生未知錯誤會有各種狀態代碼了,這裏整理的是iTunes發生未知錯誤 -50代 ...
  • CentOS中安裝phpmyadmin其實有很多的方法這裏只是告訴你下載一個體phpmyadmin然後解壓在指定的web目錄就可以了,下面我們一起來看看我的筆記首先下載一下phpmyadmin:http://www. ...
  • 費話不說多了我們直接來看CentOS6.3安裝MongoDB2.2與安裝PHP的MongoDB客戶端教程,希望此教程對各位會有所幫助.下載源碼:(放到 /usr/local/src 目錄下)到官網 http://ww ...
  • 以前的網是asp+sql server的,asp你懂的,後來轉了php,不過數據庫還是mssql,但是在php讀mssql大字段ntext顯示不完整,功夫不負有心人,後來還是解決了這個問題,現在把解決辦法整理如下.p
  • 在php中定義常量我們使用的是const來定義了並且const定義常量是不需要$符號了,如果使用$就是變量 了哦,下面我來一起來看看類 const常量訪問例子.const常量訪問 代碼如下 class Math {