小程序海報最佳實現思路，可視化編輯直接生成代碼使用

開門見山

工具地址 點我直達>>painter-custom-poster
因爲掛載在github page上，打開速度會慢一些，請耐心等待或自行解決git網速問題

背景

在作小程序時候，咱們常常會有一個需求，須要將小程序分享到朋友圈，可是朋友圈是不容許直接分享小程序，那咱們還有其餘的辦法解決嗎?答案確定是有的，即 canvas 生成個性化海報分享圖片到朋友圈

分析

1. 小程序中有大量的生成圖片需求，可是使用過 canvas 的人，都會發現一些難以預料的問題>>有關小程序的坑
2. 直接在 canvas 上繪製圖形，對於普通開發者來講代碼會特別凌亂而且難以維護，常常會花費好久的時間去優化代碼
3. 不一樣的環境渲染問題，例如在開發者工具看起來好好的，一到 Android 真機，就出現圖片不顯示，位置不對應等等問題

解決

那可不能夠開發一款生成海報的插件庫呢?

• 首先，只須要提供一份簡單的參數配置文件便可
• 解決掉小程序Canvas遇到的一些大大小小的坑
• 有嚴苛的測試環節，解決各類環境和各類機型遇到的問題，並提供穩定的線上版本
• 長期維護，並有專人更新迭代更新穎的功能

以上的要求固然是能夠的，曾經的我也想嘗試開發一款出來，可是後來嘗試了幾款現成的工具以後就放棄了，畢竟輪子這個東西，是須要不斷維護更新的，另外已經有這麼多優秀現成的插件了，我爲什麼還要費力去寫呢，貢獻代碼豈不更美哉，如下是我收集的幾款

• 小程序生成圖片庫，輕鬆經過 json 方式繪製一張能夠發到朋友圈的圖片>>Painter
• 小程序組件-小程序海報組件>>wxa-plugin-canvas
• 微信小程序：一個 json 幫你完成分享朋友圈圖片>>mp_canvas_drawer

我想幹什麼

嘮了這麼多，好像提供給你們插件就沒我什麼事情了...想走是不可能的 爲了可以製做出更酷炫的海報，我思考了許久 雖然有了插件後，只須要提供配置代碼就可以製做出一款海報來，可是我發現仍是有些許問題

1. 製做海報效率仍是不夠高，微調一個元素的大小和位置，就須要不斷的修改保存代碼，等待片刻，查看效果，真的煩
2. 一個小小的位置調整可能就須要來回調整無數次，這種最簡單的機械化勞動，這輩子是不可能的
3. 拿着完美的稿子，遞給設計師看，這個位置不對，這個線太粗，這個顏色過重...你信不信我打死你
4. 對於一些精美複雜的海報，實現起來真的不太現實

那我須要怎麼作呢，請點擊這個連接體驗>>painter-custom-poster 點擊左側例子展現中的任意一個例子，而後導入代碼就能看到效果圖，這下你應該能猜到了個人想法了

如何實現

• 剛開始我想用簡單的html和css加拖動功能實現，經過簡單嘗試以後就放棄了，由於這個功能真的太複雜了，簡單的工具確定是不行的
• 中間這個計劃停滯了很長時間，一度已經放棄
• 直到發現了這個庫fabric.js，真的太太優秀了，讚美之詞無以言表，惟一的缺點就是中文教程太少，必須生啃英文加谷歌翻譯
• fabric介紹，你能夠很容易地建立任何一個簡單的形狀，複雜的形狀，圖像;將它們添加到畫布中，並以任何你想要的方式進行修改：位置、尺寸、角度、顏色、筆畫、不透明度等

How To Use

目前工具一共分紅4部分

例子展現

用來將一些用戶設計的精美海報顯示出來，經過點擊對應的例子並將代碼導入畫布中

畫布區

顯示真實的海報效果，畫布裏添加的元素，均可以直接用鼠標進行拖動，旋轉，縮放操做

操做區

第一排四個按鈕

1. 複製代碼 將畫布的展現效果轉化成小程序海報插件庫所須要的json配置代碼，目前我使用的是Painter庫，默認會轉化成這個插件的配置代碼，將代碼直接複製到card.js便可
2. 查看代碼 這個功能用不用無所謂，能夠直觀的看到生成的代碼
3. 導出json 將畫布轉化成fabric所須要的json代碼，方便將本身設計的海報代碼保存下來
4. 導入json 將第3步導出的json代碼導入，會在畫布上顯示已設計的海報樣式

第二排五個按鈕

1. 畫布 畫布的屬性參數 詳解見下方
2. 文字 添加文字的屬性參數 詳解見下方
3. 矩形 添加矩形的屬性參數 詳解見下方
4. 圖片 添加圖片的屬性參數 詳解見下方
5. 二維碼 添加二維碼的屬性參數 詳解見下方

第三排

各類元素的詳細設置參數

激活區

激活對象是指鼠標點擊畫布上的元素，該對象會被藍色的邊框覆蓋，此時該對象被激活，能夠執行拖動 旋轉 縮放等操做 激活區只有對象被激活纔會出來，用來設置激活對象的各類配置參數，修改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✨✨ 謝謝 ~