Painter這個(gè)小程序畫布組件應(yīng)該很多人在用此熬，github上超3K的star就已經(jīng)說明這個(gè)組件的強(qiáng)大了甜刻。這里我們用這個(gè)組件實(shí)現(xiàn)短訊（如24小時(shí)動態(tài)）的分享和海報(bào)生成呻袭。
效果
圖二生成的圖片，也是分享出去的效果堂氯，可以點(diǎn)擊分享跳轉(zhuǎn)到短訊的詳情即可蔑担，分享到群如下：
介紹
Painter組件地址：https://github.com/Kujiale-Mobile/Painter
可以通過源代碼看一下組件的實(shí)現(xiàn)方式，其實(shí)Painter的readMe里面已經(jīng)把組件的實(shí)現(xiàn)方式描述的很詳細(xì)了咽白，組件接收json格式啤握，然后通過pen.js（畫筆）畫出json格式不同類型（文本、圖片晶框、矩形排抬、qrcode ）的view繪制，這種方式設(shè)計(jì)巧妙授段，對于很多復(fù)雜的情況需求都能滿足蹲蒲。而且代碼完善，優(yōu)化調(diào)整也很方便侵贵。
Painter提供的工具能夠?qū)son數(shù)據(jù)直接轉(zhuǎn)換效果届搁，方便調(diào)試，鏈接地址：
鏈接1：https://painterjs.github.io/
鏈接2：https://lingxiaoyi.github.io/painter-custom-poster/
我們上面短訊的效果窍育，只需利用Painter封裝兩個(gè)組件卡睦，一個(gè)用于分享，一個(gè)用于生成海報(bào)漱抓，控制兩個(gè)組件顯示隱藏即可表锻。通過按鈕傳遞標(biāo)題、時(shí)間乞娄、標(biāo)簽瞬逊、內(nèi)容等信息，并通過組件接收仪或，然后拼裝json文件傳遞給Painter組件码耐。
<!-- 分享繪圖組件 -->
<share-box wx:if="{{isCanDraw}}" isCanDraw="{{isCanDraw}}" time="{{timeShare}}" source="{{sourceShare}}" id="{{idShare}}" title="{{titleShare}}" content="{{contentShare}}" bind:close="handleClose" bind:initData="initData" bind:createPoster="createPoster"/>
<!-- 海報(bào)組件 -->
<poster-box isPoster="{{isPoster}}" time="{{timeShare}}" source="{{sourceShare}}" id="{{idShare}}" title="{{titleShare}}" content="{{contentShare}}" bind:closePoster="handleClosePoster"/>
此外，我們利用lin-ui實(shí)現(xiàn)了日期的吸頂效果（備：lin-ui對于吸頂效果的封裝很易用溶其，可以嘗試一下）、內(nèi)容展示的卡片效果敦间，不再贅述瓶逃，詳細(xì)實(shí)現(xiàn)可直接查看下面的代碼地址。
