如何使用 Open Source 工具在程式內整合圖檔

1. 有圖有真相
如何使用 Open Source 工具在程式內整合圖檔
黃志賢 hoyo
友情提示：簡報中圖檔皆屬原創作人所有

2. 什麼是真相！？

3. 柯南都這樣說

5. 大家都說：
「老闆腦中只想著賺錢。」

6. 沒圖沒真相…

7. 感
謝
是
本
人
的
mark
授
權
使
用

8. 版
權
創
意
為
mark
所
有

9. 以上為大眾版

10. 畫圖畫圖
圖要怎麼畫？

16. X

17. 程式是文字
資料庫也是文字
圖片為什麼不能是文字

18. _
／ ￣ ）
／ /
／ _/
/ |
/ ＿＿ |
|￣ ￣￣ヽ|
| ＿＿ |
_ -― ￣ ＿＿￣￣ ┴- ､
{ /￣ ￣￣ヽ ヽ
｀ -∩_|_ （_･) (_･） _ | ∩_ノ
⊂_ _つ｀ｚ――ｙ´ ﾉ~⊂_ _つ
{ }｀-/⌒⌒i-´ { }
｀ -| | | | ｀i -´
| ｀ー‐ ´ ｀－～，
ヽ ＿＿＿， -－～´
， -‐､ ， -.､
／ ﾉ ノ ﾉ
/ ､_.ノ .／ ､_.ノ´
/ ﾉ ／ .ﾉ ，，-‐'⌒i
. / __ノ / /⌒ｉi´ ／､_ .ノ´.
l. `ｉﾉ / / |／ ，.'~´ .
| ，，，|./ ｀`´.丿 ､_ノ ，-‐'´⌒)
. l. |｀`''' / .ﾉ ./ 丶，-‐'´
| ，___l |､. / / ､，，/
. | ﾉ | ｀` '´-､ ，ﾉ
| _/ |` ‐､__ ）
| / ヽ-､ _￣`|
| . ヽ::::.｀ ､，|
| :. |:::: |
| :: |:::: |.
λ::: ﾉ:: 丿
/ ， ::::::'/
/ :/:::::::::/
/ ::/:::::::::/
＿/ :::::::::::::/＿
， -‐´ / ::::::::::::::/ ｀‐- ､
（， / :::::::::::::/ ）
` ‐- ＿ :::::::::::/ ＿ -‐'´
/⌒ヽ ／￣ヽ
＿|＿＿ヽ，-／ |
，，-'"....:::::::::::::::::::::::ヽ､ |
／..........:::::::::::::::::::::::::::::::::ヽ＿ﾉ
／::::::::::::::::::::::::::::::::::::::::::::::::::::ヽヽ.
/:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::ヽ ヽ
|::::::::::|ヽ（＼（ ＼__ヽ_ヽ､::::::::::::::::::i ヽ.
ヽ::::::::i -‐- -‐‐- ヽ::::::::::::::::i ／
＼::i`'⌒ `⌒ |::::::::::::::::i
i::::::i ﾉ |::::::::::::::::::i
|:::::::i ヽ＿＿ /::::::::::::::::::::i
|:::: ::ヽ 丶 ノ /::::::::::::::::::::::::i
|:::: :::::＼ ｀ ， /::::::::::::::::::::::::::::i
|::: :::::::::｀`. - ´ |::::::::::::::::::::::::::::::i
i::::: :::::::::::::::ト､_，，／´ ヽ::::::::／‐､:::::/
/lヽ::::: :::::::::::|／ヽ /￣ /ヽ
/ ヽ ｀ T ｀>lｺ<￣| ，／ ヽ
/ ヽ |／|| || ＼| ，／ ヽ
＼＿__| |_| |＿_／
| | | |
＿ , ― ､
,－' ｀ ￣ヽ_
,' ヽ
( ）
（ ノ｀ｰ'ｰ'ヽ ）
（ ﾉ● ●（ )
( 〉 -――-( ）＿ _
｀ｰ'ｌ ● （ ノ ヽ )
､‘ｰ'ー’ _ノ｀ー' |
￣|￣ |
/ /7 /￣￣/ /
｀ー´ ｀ー ´ ｀―´

20. 事情的起源由我從電腦裡拿出
暗黑破壞神的赫拉迪克方塊開始

21. 維特之腳
城鎮傳送書
赫拉迪克方塊配方用法說明

22. 文字敘述 1
文字敘述 2
文字敘述 3
文字敘述 4
想要的結果
or
不想要的結果

23. 章子怡的臉型
范冰冰的眼睛
劉亦菲的鼻子
張柏芝的眉毛
張曼玉的雙唇

24. 大誤

26. 本片開始

27. 現實狀況劇一
大 BOSS：「阿賢，把數字銷售報
表改成圖表，看數字沒 FU」

28. 1231.5400
4565.4500
5646.500
6546.600
2300.000
9546.400
6546.600
3212.3300
13255.400
564.6500
75343.000
12345.400

30.  官網： http://jpgraph.net/
 文字語言： Object
 Open Source：是

31. http://jpgraph.net/

32. 折線圖入門配方
折線圖 Line

33. 條狀圖 Bar
條狀圖入門配方

34. 折線圖 Line
條狀圖 Bar

35. 現實狀況劇二
琴酒：「很持酒，九月九的酒掛了，
將組織圖更新一下」

36. 八點檔開播時人物關係圖

38. 三百集後……

40. Graphviz
 官網： http://www.graphviz.org/
 文字語言：DOT Language
 Open Source：是

41. Graphviz

42. digraph G {
“大老闆”->”秘書”
}
> dot 1.dot -Tpng >1.png
Graphviz 入門配方

43. digraph G {
“大老闆”->”秘書”
“秘書”->”小秘書(1)”
“秘書”->”小秘書(2)”
“秘書”->”小秘書(3)”
}
> dot 1.dot -Tpng >1.png
Graphviz 一級配方

44. 現實狀況劇三
～！＠＃＄％︿＆＊ ～！＠︿＆＊
～！＠＃＄％︿＆＊ ～！＠︿＆＊
～！＠＃＄％︿＆＊ ～！＠︿＆＊

45. ~!@#$%^&*
~!@#$%^&*
~!@#$%^&*

47.  官網：http://www.latex-project.org/
 文字語言：TeX
 Open Source：是
 30 年歷史
 越來越多出版社全部或局部使用 TeX 排版
(美國、日本、大陸… 就是沒台灣)

50. 入門配方
documentclass{article}
begin{document}
Hello world!
end{document}
> latex 1.tex
> dvips 1.dvi
> ps2pdf 1.ps

52. 數學公式
$sum_{i=0}ˆ2 $
[ z = left{
begin{array}{ll}
1 & (x>0)
0 & (x<0)
end{array}
right.
]

53. 現實狀況劇四
幫我們畫精確的數學圖型吧！

54. 正三角形 ABC
線段 AB 的二分之一
交於角 C

56. MetaPost
 官網：http://www.tug.org/metapost.html
 文字語言：MetaFont
 Open Source：是
 可和 LaTeX 融合

57. METAPOST
http://melusine.eu.org/syracuse/metapost/

58. METAPOST 拜碼頭程式碼
beginfig(1)
draw (0,0)--(1cm,0)--(0,1cm)--cycle;
endfig;
end
> mpost 1.mp
編譯指令
檔案內容

59. METAPOST 入門配方
> mpost 1.mp
編譯指令
檔案內容
beginfig(1)
pair A, B, C;
A:=(0,0); B:=(2cm,0);
C:=(1cm,2cm);
draw A--B--C--cycle;
draw 1/2[A,B] -- C;
label.lft( btex A etex, A );
label.rt( btex B etex, B );
label.top( btex C etex, C );
endfig;
end

60. METAPOST 基本配方
beginfig(1)
pair A,B,C,D;
u:=2cm;
A=(0,0); B=(u,0); C=(u,u); D=(0,u);
transform T;
A transformed T = 1/5[A,B];
B transformed T = 1/5[B,C];
C transformed T = 1/5[C,D];
path p;
p = A--B--C--D--cycle;
for i=0 upto 100:
draw p;
p:= p transformed T;
endfor;
endfig;
end

61. MetaPost

62. LaTeX 附加 METAPOST
http://math.berkeley.edu/~vojta/tex/samp-l/mpost.htm
file.tex
documentclass{article}
usepackage{graphicx}
begin{document}
Hi there: includegraphics{file1.mps}
end{document}
file.mp
filenametemplate "%j%c.mps";
beginfig(1);
z1=(0,0);
z2=(10mm,10mm);
drawarrow(z1--z2);
label.ulft(btex $A$ etex, .5[z1,z2]);
endfig;
bye
> mpost file
> latex file
> dvipdfmx file
編譯指令

63. 有圖真有真相乎
？

64. 往上滾的球
請看操演…

65. 誇大

66. 齊頭

67. 有圖有真相！
有圖有真相？

68. 全劇終