Slide 1
Slide 1 text
隨你填貼圖的背後
Koji Lin, LINE Fukuoka Corporation
JCConf Taiwan 2019
Slide 2
Slide 2 text
About me
● Koji Lin
● LINE Fukuoka 株式会社
○ 開發 1 室 室長
○ 之前為 LINE 貼圖的後端工程師
● 社群活動
○ 前 TWJUG 主辦
Slide 3
Slide 3 text
Agenda
● 什麼是隨你填貼圖
● SVG 和 Apache Batik
● 開發時遇到的問題
● 總結
Slide 4
Slide 4 text
隨你填貼圖
● 讓貼圖作者可以選擇字型跟擺放方式
○ 讓文字可以沿著曲線顯示
● 用戶可以自己輸入任意內容
○ 自己或對方名字
○ 任何可以組成句子的內容
● 在聊天室內也可以不限次數改變
Slide 5
Slide 5 text
技術選定
● 效能和效果穩定一致、支援各種字型
○ 從 Server 產生圖片
● 創作者透過工具產生擺放文字的路徑，最好能所
見即所得
○ 在瀏覽器編輯時，可以直接顯示結果
Slide 6
Slide 6 text
● Server Side 產生圖片的方式
○ 如果能直接使用 Java 最好
● 創作者編輯時的介面
○ 瀏覽器中直接顯示 SVG
技術選定
Slide 7
Slide 7 text
SVG
● 充足的文件跟有標準
○ 可以預期 Browser 內 render 跟 server side
產生的圖片不會有太大差異
● 涵蓋我們隨你填貼圖的需求
○ 字型
○ 著色
○ 設定路徑
Slide 8
Slide 8 text
SVG
● Raster Images
○ 固定大小，固定 pixels
● Vector Graphics
○ 用點、直線或者多邊形等基於數學方程的幾
何圖元表示圖像
● Rasterization
○ 將 vector image 轉換成 raster image
Slide 9
Slide 9 text
SVG Curves
● 貝茲曲線 Bézier curve
○ Quadratic
○ Cubic
● Arcs
Slide 10
Slide 10 text
SVG Curves
Slide 11
Slide 11 text
SVG Outlines
● Fill 和 Stroke
● 設定 fill 或 stroke 順序在 SVG 2 才有
○ Chrome/Firefox 已經支援
Slide 12
Slide 12 text
SVG Outlines
Slide 13
Slide 13 text
SVG Outlines
Slide 14
Slide 14 text
SVG viewBox
● viewport
○ 可視區域
● viewBox(min-x, min-y, widh, height)
○ 要顯示的區域
● 透過 viewport & viewBox 可以讓我們組合多個
svg 跟提供正確的大小比例
Slide 15
Slide 15 text
SVG viewBox
● 貼圖購買畫面中，單獨一張預覽用 SVG
Slide 16
Slide 16 text
技術選定
● 如何將匯出的 SVG 輸出成 PNG ?
○ 讀取路徑跟字型，用 Java Graphics 產生
○ 直接將 SVG 轉換成 PNG
■ Apache Batik
■ Headless Browser
■ 其他非 Java 的專案
Slide 17
Slide 17 text
Apache Batik
● Batik is a Java-based toolkit for applications or
applets that want to use images in the
Scalable Vector Graphics (SVG) format for
various purposes, such as display, generation
or manipulation
● 算是已經開發非常久的專案，涵蓋我們所需要的
功能
○ 缺點是專案已經不是很活躍
Slide 18
Slide 18 text
Apache Batik
Slide 19
Slide 19 text
Apache Batik
Slide 20
Slide 20 text
泰文
● 輸入 ชุตินันทดิ์
● Apache Batik
● Google Chrome
Slide 21
Slide 21 text
字元，字形和字位
● Character
○ Minimal unit of textual information
● Glyph
○ Visual representation of character(s)
● Grapheme
○ Anything that functions as an distinct unit
within an orthography
https://scripts.sil.org/IWS-Chapter02
Slide 22
Slide 22 text
字元，字形和字位
● Character
○ A
● Glyph
○ A
● Grapheme
○ A
Slide 23
Slide 23 text
字元，字形和字位
● Character
○ 我
● Glyph
○ 我
● Grapheme
○ 我
Slide 24
Slide 24 text
字元，字形和字位
● 英文/中文/日文基本上都是一個字元對應到一個
glyph/grapheme
● 但依照語言搭配字型可能
○ 可以多個 Character 組成一個 Glyph
■ Ligature
○ 可以多個 Glyph 組成一個 Grapheme
Slide 25
Slide 25 text
字元，字形和字位
● 英文/中文/日文基本上都是一個字元對應到一個
glyph/grapheme
● 但依照語言搭配字型可能
○ 可以多個 Character 組成一個 Glyph
○ 可以多個 Glyph 組成一個 Grapheme
○ 可以一個 Character 有多個 Glyph
Slide 26
Slide 26 text
Glyph 位置錯誤
● Batik 使用了Font#createGlyphVector來取
得座標位置，但是該API本身並不支援泰文。必
須使用 1.4 後有的 layoutGlyphVector
● Batik 預設 Glyph 的相對位置不會改變，所以快
取了 Glyph 的座標資訊
○ 泰文會因為順序而有不同高度
Slide 27
Slide 27 text
掉字/重複問題
● Batik 預設一個 Glyph 對應到一個 Character
○ 一個 Character 並不一定只對應到一個
Glyph
■ 例如 ํา 在不同字型下
GlyphVector#getNumGlyphs 會回傳
1 或 2
○ 可以想像如果迴圈使用 Character 去計算，
但是要取得 Glyph 就會對不上
Slide 28
Slide 28 text
不支援 paint-order
● stroke 變得太粗並蓋到字本身
Slide 29
Slide 29 text
產生太多檔案
● 如果不使用系統安裝的字型，而在 SVG 中用路
徑指定，Batik 會在暫存資料夾產生快取
Font#createFont(
int fontFormat,
InputStream fontStream)
● 解決方式就是在程式啟動時，透過
GraphicsEnvironment#registerFont 先安裝字型
後，SVG 內直接使用字型名稱
Slide 30
Slide 30 text
最後
● 很多時候想要的功能都可能有對應的開源專案
○ 主流語言例如 Java 就更不用說
● 當遇到問題時，開源讓我們有機會可以自己解決
問題跟貢獻
Slide 31
Slide 31 text
最後
https://speakerdeck.com/line_developers/behind-the-line-bot-platform?slide=5
Slide 32
Slide 32 text
Why ?
● 效能好
● 型別檢查
● 豐富的程式庫
● 跨國且需要大量開發者的公司，使用 Java 還是
最容易找到人員
Slide 33
Slide 33 text
We are hiring!
https://career.linecorp.com/