JCConf - 隨你填貼圖的背後

隨你填貼圖的背後 @JCConf 2019 by Koji Lin 2019/10/04 https://jcconf.tw/2019/

Transcript

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