開門見山
工具地址 點我直達>>painter-custom-poster
由於掛載在github page上，開啟速度會慢一些，請耐心等待或自行解決git網速問題
背景
在做小程式時候，我們經常會有一個需求，需要將小程式分享到朋友圈，但是朋友圈是不允許直接分享小程式，那我們還有其他的辦法解決嗎?答案肯定是有的，即 canvas 生成個性化海報分享圖片到朋友圈
分析
- 小程式中有大量的生成圖片需求，但是使用過 canvas 的人，都會發現一些難以預料的問題>>有關小程式的坑
- 直接在 canvas 上繪製圖形，對於普通開發者來說程式碼會特別凌亂並且難以維護，經常會花費很久的時間去優化程式碼
- 不同的環境渲染問題，例如在開發者工具看起來好好的，一到 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值後，實時更新當前啟用物件的對應狀態，點選其他區域，此模組將隱藏
快捷鍵
- '←' 左移一畫素
- '→' 右移一畫素
- '↑' 上移一畫素
- '↓' 下移一畫素
- 'ctrl + z' 撤銷
- 'ctrl + y' 恢復
- 'delete' 刪除
- '[' 提高元素的層級
- ']' 降低元素的層級
佈局屬性
通用佈局屬性
| 屬性 | 說明 | 預設 |
|---|---|---|
| rotate | 旋轉，按照順時針旋轉的度數 | 0 |
| width、height | view 的寬度和高度 | |
| 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，生成的值為200 | 1 |
文字屬性
| 屬性名稱 | 說明 | 預設值 |
|---|---|---|
| text | 字型內容 | 別跟我談感情，談感情傷錢 |
| maxLines | 最大行數 | 不限，根據 width 來 |
| lineHeight | 行高（上下兩行文字baseline的距離） | 1.3 |
| fontSize | 字型大小 | 30 |
| color | 字型顏色 | #000000 |
| fontWeight | 字型粗細。僅支援 normal， bold | normal |
| textDecoration | 文字修飾，支援none underline、 overline、 linethrough | none |
| textStyle | fill： 填充樣式，stroke：鏤空樣式 | fill |
| fontFamily | 字型 | sans-serif |
| textAlign | 文字的對齊方式，分為 left， center， right | left |
備註:
- fontFamily，工具中的第一個例子支援文字字型，但是匯入小程式為什麼看不到呢，小程式官網載入網路字型方法>> 載入字型教程>>
- 文字高度 是maxLines lineHeight2個欄位一起計算出來的
圖片屬性
| 屬性 | 說明 | 預設 |
|---|---|---|
| url | 圖片路徑 | |
| mode | 圖片裁剪、縮放的模式 | aspectFill |
mode引數詳解
- scaleToFill 縮放圖片到固定的寬高
- aspectFill 圖片裁剪顯示對應的寬高
- auto 自動填充 寬度全顯示 高度自適應居中顯示
Tips（一定要看哦～）
- 本工具不考慮相容性，如發現不相容請使用google瀏覽器
- painter現在只支援這幾種圖形，所以暫不支援圓，線等
- 如果編輯過程，一個元素被擋住了，無法操作，請選擇物件並通過[ ]快捷鍵提高降低元素的層級
- 如果需要實現1列多行文字效果，文字寬度設定成fontsize一樣的大小，不然會出現文字顯示不全的問題，此問題是由於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✨✨ 謝謝 ~