百度貼吧“神來一句”功能分析

最近需要爲論壇做一個類似百度貼吧的“神來一句”的功能,對其相關實現進行了分析,並給出自己的實現方式。

功能分析

神來一句可以理解爲一種快速回復帖子的途徑,用於可以直接發送表情圖片,也可以編輯其中的文字,然後再發送圖片。

經過分析可以發現每個表情圖片都對應一個原始圖片和留白圖片,其中如果用於不修改文字直接發送,則實際上發送的是原始圖片;如果用於修改其中文字,則需要重新生成圖片,然後發送生成的圖片。

相關技術點

最近也沒抽出時間總結,有幾個難點先記錄下。

文字框固定,字體大小根據多少自適應

外面用一個寬高固定的div,裏面再套一個寬高自適應的div,內層的div隨着字體的大小和內容的變化而變化。每次修改文字內容,都先將字體設置爲最大,然後判斷內層div大小,如果超過外層,則fonst-size遞減,最終找到合適的font-size,實現文字大小的自適應。

後端生成圖片時,字體大小與前端一致

因爲使用gd庫爲圖片添加文字時,字體大小單位時磅,前端font-size大小是像素,所以需要先進行單位的轉換。

後端生成圖片時,保持與前端一致的wordbrake

因爲用戶輸入的內容可能包括中文和英文,英文單詞過長時需要進行wordbrake。後端php中workbrake分割中文會導致亂碼,可以使用用於處理utf-8的mb_wordbrake(網絡上有資源)。

發佈了189 篇原創文章 · 獲贊 64 · 訪問量 47萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章