產生文章摘要的縮圖

在 Facebook 上分享 Dcard 文章時，如果沒有指定圖片的話，可能會看到如下的文章摘要：

這張圖片是透過 Go library draw2d 產生的，它有類似 HTML5 canvas 的 API，所以畫一些簡單的圖形都還算小菜一碟，然而在處理文字上就沒這麼得心應手了。

初次嘗試

這段程式實際上執行時只會印出背景圖片：

而且會跳出錯誤：

這是因為 draw2d 預設依賴 resource/font 資料夾下的字型，所以必須自行指定字型路徑。

設定完成後可以得到以下結果，除了 Emoji 變成方框和內容沒有換行以外，其他元素都放在正常的位置上。

處理文字換行

draw2d 只有提供三種有關文字的函數：

沒有任何一個函數可以自動換行或文字排版，所以必須自行處理，我首先想到的做法就是先分行，透過 GetStringBounds 取得該行的高度後，把游標移動到下一行直到超過邊界為止。

在每行文字長度不要太超過的情況下，這種解法除了行高有些異常之外，得到的結果看起來還可以。

但是這種做法是有缺點的，因為我把所有字元視為寬度相同的方塊字，如果每行文字長度比較長，或是有中英混排，就可能誤判寬度導致排版出錯。

所以我改變了做法，分行之後再切字，計算每個字的實際寬度來避免出錯。

排版正常多了，雖然還有一些潛在問題，例如標點符號位置和英文斷字等，但以目前文章大部分都是中文的情況來說還算可以。

Emoji

最後剩下的就是 Emoji，目前 Emoji 還是方格，我決定利用 EmojiOne 來取代它們。

我稍微修改了 drawLine 函數，讓它在偵測到文字為 Emoji 時把文字取代為 Emoji 的圖片，有些 Emoji 是由好幾個字元組成的（例如 👨‍👩‍👧‍👦 = ["👨", "\u200d", "👩", "\u200d", "👧", "\u200d", "👦"]），中間會以 ZWJ（Zero-width joiner）連接。

以上就是 Web team 在 Dcard Lab 的第一篇文章，之後會為各位帶來更多更有深度的文章，請各位拭目以待

By Dcard Web Team
Dcard 廣大徵才中唷！請到 👉🏼 https://join.dcard.today/

Originally published at gist.github.com.