開門見山
工具地址 點我直達>>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現在只支持這幾種圖形，所以暫不支持圓，線等
- 如果編輯過程，一個元素被擋住了，無法操作，請選擇對象並通過[ ]快捷鍵提高降低元素的層級
- 文字暫不支持直接縮放操作，因為文字大小和元素高度不容易計算，可以通過修改激活欄目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✨✨ 謝謝
~