小程序怎么生成圖片庫

今天小編給大家分享一下小程序怎么生成圖片庫的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

這邊說上幾個小程序 Canvas 的坑：

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

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

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

畫家計劃

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

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

How To Use

運(yùn)行例子

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

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

代碼下載后，用小程序 IDE 打開后即可使用。

使用 Painter

1. 引入代碼

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

   git submodule add https://github.com/Kujiale-Mobile/PainterCore.git painter

2. 作為自定義組件引入，注意目錄為第一步引入的代碼所在目錄

   "usingComponents":{
     "painter":"/components/painter/painter"
   }

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

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

   bind:imgOK="onImgOK"
   bind:imgErr="onImgErr"

Palette 規(guī)范

如你使用 wxss + wxml 規(guī)范進(jìn)行繪制一樣，Painter 需要根據(jù)一定的規(guī)范來進(jìn)行圖片繪制。當(dāng)然 Painter 的繪制規(guī)范要比 wxml 簡單很多。

調(diào)色板屬性

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

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

子 View 屬性

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

布局屬性

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

尺寸即其他

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

2，目前子 view 的 css 屬性支持 object 或 array。所以意味著，你可以把幾個子 view 共用的 css 屬性提取出來。做到讓 Palette 更加簡潔。

3，因為我們的 palette 是以 js 承載的 json，所以意味著你可以在每一個屬性中很方便的加上自己的邏輯。也可以把某些屬性單獨(dú)提取出來，讓多個 palette 共用，做到模塊化。

舉個栗子

{
  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',
    },
  }
  ],
}

以上就是“小程序怎么生成圖片庫”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。