One simple way to draw canvas, wxml2canvas

guoyang134340發表於2018-12-08
CanvasXML

Why

小程式中的某些場景需要通過 canvas 繪製一些圖片， 其中包含一些文字、可能的二維碼等等。 然後實現時如果完全手動的去定位元素在 canvas 中的位置，結果就會產生大量不能複用和難以維護的程式碼。

How to use

引入 utils 目錄下 utils/wxml2canvas.js 檔案， 這個 repo 本身就是一個簡單的示例， 調整一些配置項可以在開發者工具中開啟。

wxml
<!-- 
  1. wrapper id
  2. 需要繪製的元素 className
  3. 如果是文字，需要給元素新增加 data-text 屬性 
 -->
<view class="container" id="wrapper">
  <text class="title draw" data-text="Hello there">Hello there</text>
  <text class="info draw" data-text="小程式是一種新的開放能力，開發者可以快速地開發一個小程式。">
   小程式是一種新的開放能力，開發者可以快速地開發一個小程式。
  </text>
  <view class="image-wrapper draw">
    <image class="draw" src="../../assets/demo.jpg"/>
  </view>
  
  <button class="generate-btn" bindtap="drawCanvas">generate</button>
</view>
<canvas canvas-id="canvas-map" class="share-canvas"></canvas>

複製程式碼
wxss

.container {
  height: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
 
} 
.container .title {
  font-size:36px;
  text-align: left;
  margin-bottom: 10px;

}
.container .info {
  font-size: 14px;
  line-height: 18px;
  color: grey;
  text-align: left;
  margin-bottom: 40px;
}
.container .image-wrapper image {
  width: 100%;
}
複製程式碼
js
Page({
  drawCanvas: function() {
    const wrapperId = '#wrapper'
    const drawClassName = '.draw'
    const canvasId = 'canvas-map'
    
    wxml2canvas(wrapperId, drawClassName, canvasId).then(() => {
      // canvas has been drawn here, you can save the canvas image with wx.canvasToTempFilePath 
    })
  }
})
複製程式碼

Demo

One simple way to draw canvas, wxml2canvas

實現

方式主要是使用小程式提供的介面 wx.createSelectorQuery() 來獲取節點資訊， 然後進一步處理繪製到 canvas 上。目前僅覆蓋一些簡單的使用場景，支援基礎的 position，font-size, color, image, border-radius, background-color 等， ??

至於複雜的情況，Maybe you can get some inspiration from github.com/niklasvh/ht…

Todo

  • 區分中英文文字的換行

地址：github.com/gy134340/wx…

相關文章