Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JCConf - 隨你填貼圖的背後

JCConf - 隨你填貼圖的背後

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

2102a6b8760bd6f57f672805723dd83a?s=128

LINE Developers Taiwan
PRO

October 04, 2019
Tweet

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/