用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

奥格斯堡汉诺威96: [經驗] 小程序海報生成工具

汉诺威96升级 www.wikuss.com.cn 524

主題

899

帖子

1萬

積分

管理員

Rank: 9Rank: 9Rank: 9

積分
12161
2019-9-26 16:21:47 Rolan 管理員 樓主 1386
開門見山工具地址 點我直達>>painter-custom-poster
由于掛載在github page上,打開速度會慢一些,請耐心等待或自行解決git網速問題
背景在做汉诺威96升级時候,我們經?;嵊幸桓魴棖?,需要將小程序分享到朋友圈,但是朋友圈是不允許直接分享小程序,那我們還有其他的辦法解決嗎?答案肯定是有的,即 canvas 生成個性化海報分享圖片到朋友圈
分析
  • 小程序中有大量的生成圖片需求,但是使用過 canvas 的人,都會發現一些難以預料的問題>>有關小程序的坑
  • 直接在 canvas 上繪制圖形,對于普通開發者來說代碼會特別凌亂并且難以維護,經?;嶧ǚ押芫玫氖奔淙ビ嘔?li>不同的環境渲染問題,例如在開發者工具看起來好好的,一到 Android 真機,就出現圖片不顯示,位置不對應等等問題
解決那可不可以開發一款生成海報的插件庫呢?
  • 首先,只需要提供一份簡單的參數配置文件即可
  • 解決掉小程序Canvas遇到的一些大大小小的坑
  • 有嚴苛的測試環節,解決各種環境和各種機型遇到的問題,并提供穩定的線上版本
  • 長期維護,并有專人更新迭代更新穎的功能
以上的要求當然是可以的,曾經的我也想嘗試開發一款出來,但是后來嘗試了幾款現成的工具之后就放棄了,畢竟輪子這個東西,是需要不斷維護更新的,另外已經有這么多優秀現成的插件了,我為何還要費力去寫呢,貢獻代碼豈不更美哉,以下是我收集的幾款
  • 小程序生成圖片庫,輕松通過 json 方式繪制一張可以發到朋友圈的圖片>>Painter
  • 小程序組件-小程序海報組件>>wxa-plugin-canvas
  • 微信小程序:一個 json 幫你完成分享朋友圈圖片>>mp_canvas_drawer
我想干什么嘮了這么多,好像提供給大家插件就沒我什么事情了...想走是不可能的為了能夠制作出更酷炫的海報,我思考了許久雖然有了插件后,只需要提供配置代碼就能夠制作出一款海報來,但是我發現還是有些許問題
  • 制作海報效率還是不夠高,微調一個元素的大小和位置,就需要不斷的修改保存代碼,等待片刻,查看效果,真的煩
  • 一個小小的位置調整可能就需要來回調整無數次,這種最簡單的機械化勞動,這輩子是不可能的
  • 拿著完美的稿子,遞給設計師看,這個位置不對,這個線太粗,這個顏色太重...你信不信我打死你
  • 對于一些精美復雜的海報,實現起來真的不太現實
那我需要怎么做呢,請點擊這個鏈接體驗>>painter-custom-poster點擊左側例子展示中的任意一個例子,然后導入代碼就能看到效果圖,這下你應該能猜到了我的想法了
如何實現
  • 剛開始我想用簡單的html和css加拖動功能實現,通過簡單嘗試之后就放棄了,因為這個功能真的太復雜了,簡單的工具肯定是不行的
  • 中間這個計劃停滯了很長時間,一度已經放棄
  • 直到發現了這個庫fabric.js,真的太太優秀了,贊美之詞無以言表,唯一的缺點就是中文教程太少,必須生啃英文加谷歌翻譯
  • fabric介紹,你可以很容易地創建任何一個簡單的形狀,復雜的形狀,圖像;將它們添加到畫布中,并以任何你想要的方式進行修改:位置、尺寸、角度、顏色、筆畫、不透明度等
How To Use目前工具一共分成4部分
例子展示用來將一些用戶設計的精美海報顯示出來,通過點擊對應的例子并將代碼導入畫布中
畫布區顯示真實的海報效果,畫布里添加的元素,都可以直接用鼠標進行拖動,旋轉,縮放操作
操作區第一排四個按鈕
  • 復制代碼 將畫布的展示效果轉化成小程序海報插件庫所需要的json配置代碼,目前我使用的是Painter庫,默認會轉化成這個插件的配置代碼,將代碼直接復制到card.js即可
  • 查看代碼  這個功能用不用無所謂,可以直觀的看到生成的代碼
  • 導出json 將畫布轉化成fabric所需要的json代碼,方便將自己設計的海報代碼保存下來
  • 導入json 將第3步導出的json代碼導入,會在畫布上顯示已設計的海報樣式
第二排五個按鈕
  • 畫布 畫布的屬性參數 詳解見下方
  • 文字 添加文字的屬性參數 詳解見下方
  • 矩形 添加矩形的屬性參數 詳解見下方
  • 圖片 添加圖片的屬性參數 詳解見下方
  • 二維碼 添加二維碼的屬性參數 詳解見下方
第三排
各種元素的詳細設置參數
激活區激活對象是指鼠標點擊畫布上的元素,該對象會被藍色的邊框覆蓋,此時該對象被激活,可以執行拖動 旋轉 縮放等操作激活區只有對象被激活才會出來,用來設置激活對象的各種配置參數,修改value值后,實時更新當前激活對象的對應狀態,點擊其他區域,此??榻?br /> 快捷鍵
  • '←'  左移一像素
  • '→'  右移一像素
  • '↑'  上移一像素
  • '↓'  下移一像素
  • 'ctrl + z'  撤銷
  • 'ctrl + y'  恢復
  • 'delete'    刪除
  • '[' 提高元素的層級
  • ']' 降低元素的層級
布局屬性通用布局屬性屬性說明默認
rotate旋轉,按照順時針旋轉的度數0
width、heightview 的寬度和高度
top、left如 css 中為 absolute 布局時的作用0
background背景顏色rgba(0,0,0,0)
borderRadius邊框圓角0
borderWidth邊框寬0
borderColor邊框顏色#000000
shadow陰影''shadow可以同時修飾 image、rect、text 等 。在修飾 text 時則相當于 text-shadow;修飾 image 和 rect 時相當于 box-shadow
使用方法:
shadow: 'h-shadow v-shadow blur color';h-shadow: 必需。水平陰影的位置。允許負值。v-shadow: 必需。垂直陰影的位置。允許負值。blur: 必需。模糊的距離。color: 必需。陰影的顏色。舉例: shadow:10 10 5 #888888復制代碼漸變色支持你可以在畫布的 background 屬性中使用以下方式實現 css 3 的漸變色,其中 radial-gradient 漸變的圓心為 中點,半徑為最長邊,目前不支持自己設置。
linear-gradient(-135deg, blue 0%, rgba(18, 52, 86, 1) 20%, #987 80%)radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)復制代碼?。?!注意:顏色后面的百分比一定得寫。
畫布屬性屬性說明默認
times控制生成插件代碼的寬度大小,比如畫布寬100,times為2,生成的值為2001文字屬性屬性名稱說明默認值
text字體內容別跟我談感情,談感情傷錢
maxLines最大行數不限,根據 width 來
lineHeight行高(上下兩行文字baseline的距離)1.3
fontSize字體大小30
color字體顏色#000000
fontWeight字體粗細。僅支持 normal, boldnormal
textDecoration文本修飾,支持none  underline、 overline、 linethroughnone
textStylefill: 填充樣式,stroke:鏤空樣式fill
fontFamily字體sans-serif
textAlign文字的對齊方式,分為 left, center, rightleft備注:
圖片屬性屬性說明默認
url圖片路徑
mode圖片裁剪、縮放的模式aspectFillmode參數詳解
  • scaleToFill 縮放圖片到固定的寬高
  • aspectFill 圖片裁剪顯示對應的寬高
  • auto 自動填充 寬度全顯示 高度自適應居中顯示
Tips(一定要看哦~)
  • 本工具不考慮兼容性,如發現不兼容請使用google瀏覽器
  • painter現在只支持這幾種圖形,所以暫不支持圓,線等
  • 如果編輯過程,一個元素被擋住了,無法操作,請選擇對象并通過[ ]快捷鍵提高降低元素的層級
  • 文字暫不支持直接縮放操作,因為文字大小和元素高度不容易計算,可以通過修改激活欄目maxLines lineHeight fontSize值來動態改變元素
  • 如發現導出的代碼一個元素被另一個元素擋住了,請手動調整元素的位置,json數組中元素越往后層級顯示就越高,由于painter沒有提供層級參數,所以目前只能這樣做
  • 本工具導出代碼全是以px為單位,為什么不支持rpx, 因為painter在rpx單位下,陰影和邊框寬會出現大小計算問題,由于原例子沒有提供px生成圖片方案,可以下載我這里修改過的demo>>Painter即可解決
  • 文本寬度隨著字數不同而動態變化,想在文本后面加個圖標根據文本區域長度布局, 請參考Painter文檔這塊教程直接修改源碼
  • 由于本工具開發有些許難度,如出現bug,建議或者使用上的問題,請提issue,源碼地址>>painter-custom-poster
海報貢獻如果你設計的海報很好看,并且愿意開源貢獻,可以貢獻你的海報代碼和縮略圖,例子代碼文件在example中,按順序排列,例如現在庫里例子是example2.js,那你添加example3.js和example3.jpg圖片,事例可以參考一下文件夾中源碼,然后在index.js中導出一下
導出代碼代碼不要格式化,會報錯,請原模原樣復制到json字段里
生成縮略圖
  • 剛開始我想在此工具中直接生成圖片,但是由于瀏覽器圖片跨域問題導致報錯失敗
  • 所以請去小程序中生成保存圖片,圖片質量設置0.2,并去tinypng壓縮一下圖片
  • 找到painter.js,替換下邊這個方法,可以生成0.2質量的圖片,代碼如下
  saveImgToLocal() {      const that = this;      setTimeout(() => {        wx.canvasToTempFilePath(          {            canvasId: 'k-canvas',            fileType: 'jpg',            quality: 0.2,            success: function(res) {              that.getImageInfo(res.tempFilePath);            },            fail: function(error) {              console.error(`canvasToTempFilePath failed, ${JSON.stringify(error)}`);              that.triggerEvent('imgErr', { error: error });            }          },          this        );      }, 300);    }復制代碼TODO
  • 顏色值選擇支持調色板工具
  • 文字padding支持
  • 縮放位置彈跳問題優化
  • 假如需求大的話,支持其他幾款插件庫代碼的生成
~創作不易,如果對你有幫助,請給個星星 star?? 謝謝~


作者:成風
鏈接:https://juejin.im/post/5d8b20ba51882509615bca09



分享至 : QQ空間
0 人收藏
有問題請在本站內搜索相應關鍵詞,假如無法解決請在綜合交流區內發帖咨詢,發帖時請提供詳細的問題描述、相關圖片及代碼。
還可以加QQ交流群咨詢:536592077。
感謝分享
發新帖
您需要登錄后才可以回帖 登錄 | 立即注冊