小程序模板網(wǎng)

小程序生成圖片庫(kù)

發(fā)布時(shí)間:2018-07-05 09:50 所屬欄目:小程序開(kāi)發(fā)教程

Painter

由于我們無(wú)法將小程序直接分享到朋友圈,但分享到朋友圈的需求目前又很多,業(yè)界目前的做法是利用小程序的 Canvas 功能生成一張帶有二維碼的圖片,然后引導(dǎo)用戶下載圖片到本地后再分享到朋友圈。而小程序 Canvas 功能是很難用的,往往為了繪制一張簡(jiǎn)單圖片,就得寫(xiě)上一堆 boilerplate code 。如果此時(shí)一個(gè)小程序中包含多個(gè)繪圖的需求,那絕壁要瘋。另外 Canvas 上有很多繪圖的坑,肯定會(huì)讓你瘋上加瘋。

這邊說(shuō)上幾個(gè)小程序 Canvas 的坑:

1, Canvas 繪圖是用的 px,而在小程序中我們一般使用 rpx 進(jìn)行相對(duì)布局。

2,小程序的 drawCanvas 方法,在 IDE 中可以直接設(shè)置網(wǎng)絡(luò)圖片進(jìn)行繪制,但在真機(jī)上設(shè)置網(wǎng)絡(luò)圖片無(wú)用。

3,canvasContext.clip 方法在 iOS 設(shè)備上 微信 6.6.6 版本及以下有 bug,會(huì)導(dǎo)致該 clip 下面使用的的 restore 方法失效。

畫(huà)家計(jì)劃

想到小程序中有如此大量的生成圖片需求,而 Canvas 生成方法又是如此難用和坑爹。那我們就想到可不可以做一款可以很方便生成圖片的庫(kù),而且還能屏蔽掉直接使用 Canvas 的那些坑呢。所以我們發(fā)起了 “畫(huà)家計(jì)劃— 通過(guò) json 數(shù)據(jù)形式,來(lái)進(jìn)行動(dòng)態(tài)渲染并繪制出圖片”。 Painter 庫(kù)的整體架構(gòu)如下:

首先,我們定義了一套繪圖 JSON 規(guī)范,開(kāi)發(fā)者可以根據(jù)需求構(gòu)建生成圖片的 Palette(調(diào)色板),然后在程序運(yùn)行過(guò)程中把調(diào)色板傳入給 Painter(畫(huà)家)。Painter 會(huì)調(diào)用 Pen(畫(huà)筆),根據(jù) Palette 內(nèi)容繪制出對(duì)應(yīng)的圖片后返回。

How To Use


運(yùn)行例子

因該項(xiàng)目為 submodule 管理方式。首次 clone 代碼時(shí),需加上 --recursive 參數(shù)。

git clone https://github.com/Kujiale-Mobile/Painter.git --recursive

代碼下載后,用小程序 IDE 打開(kāi)后即可使用。
使用 Painter

  1. 引入代碼

    可以在主項(xiàng)目下執(zhí)行以下命令,通過(guò) submodule 的方式引入 painter 組件。建議是在 components 目錄下。

    git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter
    
  2. 作為自定義組件引入,注意目錄為第一步引入的代碼所在目錄

    "usingComponents":{
      "painter":"/components/painter/painter"
    }
    
  3. 組件接收 palette 字段作為畫(huà)圖數(shù)據(jù)的數(shù)據(jù)源, 圖案數(shù)據(jù)以json形式存在,推薦使用“皮膚模板”的方法進(jìn)行傳遞,示例代碼如下:

    
    
  4. 數(shù)據(jù)傳入后,則會(huì)自動(dòng)進(jìn)行繪圖。繪圖完成后,你可以通過(guò)綁定 imgOK 或 onImgErr 事件來(lái)獲得成功后的圖片 或失敗的原因。

    bind:imgOK="onImgOK"
    bind:imgErr="onImgErr"Palette 規(guī)范

如你使用 wxss + wxml 規(guī)范進(jìn)行繪制一樣,Painter 需要根據(jù)一定的規(guī)范來(lái)進(jìn)行圖片繪制。當(dāng)然 Painter 的繪制規(guī)范要比 wxml 簡(jiǎn)單很多。調(diào)色板屬性

一個(gè)調(diào)色板首先需要給予一些整體屬性

background: 可以是顏色值,也可以為網(wǎng)絡(luò)圖片的鏈接,默認(rèn)為白色
width: 寬度
height: 高度
borderRadius: 邊框的圓角(該屬性也同樣適用于子 view)
views: 里面承載子 view子 View 屬性

當(dāng)我們把整體的調(diào)色板屬性構(gòu)建起來(lái)后,里面就可以添加子 View 來(lái)進(jìn)行繪制了。

type content description 自有css
image url 表示圖片資源的地址,本地或網(wǎng)絡(luò)  
text text 文本的內(nèi)容 fontSize: 文字大小,color: 字體顏色(默認(rèn)為黑色)
rect 無(wú) 矩形 color: 顏色
qrcode content 畫(huà)二維碼 background: 背景顏色(默認(rèn)為透明色),

布局屬性

以上 View ,除去自己擁有的特別屬性外,還有以下的通用布局屬性

屬性 意義
rotate 旋轉(zhuǎn),按照順時(shí)針旋轉(zhuǎn)的度數(shù),默認(rèn)不旋轉(zhuǎn)
borderRadius 邊界圓角程度,如果是正方形布局,該屬性為一半寬或高時(shí),則為圓形
top、right、bottom、left 如 css 中為 absolute 布局時(shí)的作用,默認(rèn) top 和 left 為 0

尺寸即其他

1,目前 Painter 中支持兩種尺寸單位,px 和 rpx,代表的意思和小程序中一致,此處就不多說(shuō)。

2,目前子 view 的 css 屬性支持 object 或 array。所以意味著,你可以把幾個(gè)子 view 共用的 css 屬性提取出來(lái)。做到讓 Palette 更加簡(jiǎn)潔。

3,因?yàn)槲覀兊?palette 是以 js 承載的 json,所以意味著你可以在每一個(gè)屬性中很方便的加上自己的邏輯。也可以把某些屬性單獨(dú)提取出來(lái),讓多個(gè) palette 共用,做到模塊化。

舉個(gè)栗子

{
  background: '#eee',
  width: '654rpx',
  height: '400rpx',
  borderRadius: '20rpx',
  views: [
  {
    type: 'image',
    url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
    css: {
      top: '48rpx',
      right: '48rpx',
      width: '192rpx',
      height: '192rpx',
    },
  }
  ],
}

繪制效果如下



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24622.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢