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

成風發表於2019-09-25
視覺化

開門見山

工具地址 點我直達>>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

備註:

圖片屬性

屬性 說明 預設
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✨✨ 謝謝 ~

相關文章