最近需要爲論壇做一個類似百度貼吧的“神來一句”的功能,對其相關實現進行了分析,並給出自己的實現方式。
功能分析
神來一句可以理解爲一種快速回復帖子的途徑,用於可以直接發送表情圖片,也可以編輯其中的文字,然後再發送圖片。
經過分析可以發現每個表情圖片都對應一個原始圖片和留白圖片,其中如果用於不修改文字直接發送,則實際上發送的是原始圖片;如果用於修改其中文字,則需要重新生成圖片,然後發送生成的圖片。
相關技術點
最近也沒抽出時間總結,有幾個難點先記錄下。
文字框固定,字體大小根據多少自適應
外面用一個寬高固定的div,裏面再套一個寬高自適應的div,內層的div隨着字體的大小和內容的變化而變化。每次修改文字內容,都先將字體設置爲最大,然後判斷內層div大小,如果超過外層,則fonst-size遞減,最終找到合適的font-size,實現文字大小的自適應。
後端生成圖片時,字體大小與前端一致
因爲使用gd庫爲圖片添加文字時,字體大小單位時磅,前端font-size大小是像素,所以需要先進行單位的轉換。
後端生成圖片時,保持與前端一致的wordbrake
因爲用戶輸入的內容可能包括中文和英文,英文單詞過長時需要進行wordbrake。後端php中workbrake分割中文會導致亂碼,可以使用用於處理utf-8的mb_wordbrake(網絡上有資源)。