Painter是由酷家樂移動前端團(tuán)隊(duì)打造的一款小程序繪圖組件。

原項(xiàng)目地址：https://github.com/Kujiale-Mobile/Painter

新版地址：https://github.com/shesw/Painter

這款交互版原來是為了針對業(yè)務(wù)中的新需求而由我自己開發(fā)的，后來需求改動，所以并沒有用上。組里大佬考慮種種原因（主要是項(xiàng)目沒用上，=0=～～），讓我先在自己的github上開源。這版painter與原版的區(qū)別在于：

添加了交互事件。Painter本質(zhì)是以canvas為基礎(chǔ)的，小程序的canvas有許多限制。允許canvas上元素的交互點(diǎn)擊事件，可以實(shí)現(xiàn)更為便捷的功能，比如原來需要在canvas上添加功能按鈕，現(xiàn)在可以直接畫在canvas上

添加拖拽元素的功能。目前這個功能沒有完善好，因?yàn)樗幕瑒觿幼鲿c小程序的全屏滑動事件沖突，因此，拖拽功能在固定的頁面上效果才好，如在拖拽時設(shè)置overflow: hidden等。

這里將新版的Painter稱為dancing-painter。引入方式請參考readme和demo。

演示：

主要功能：

指原版的painter的功能。這些功能依然是本項(xiàng)目的主(實(shí))要(用)功能。

簡介：

原版的使用簡介請參見 https://juejin.im/post/5b40b158e51d4518f543c7b0

簡單來講，使用過程如下圖所示，可以結(jié)合demo來看：

距離首次開源Painter庫已經(jīng)有一段時間了，這期間獲益于各路道友的幫助和提點(diǎn)，Painter進(jìn)行了幾波更新（原項(xiàng)目地址)：

新增特性：

增加align屬性，可以使任意元素可以實(shí)現(xiàn)左中右對齊。

加入文字換行的能力。對一段文字設(shè)置width或者maxLines，都有可能觸發(fā)文字的換行。

添加文字的一些屬性：fontWeight, textDecoration, textStyel(fill, stroke), maxLines, lineHeight

圖片mode屬性，實(shí)現(xiàn)圖片裁剪、縮放，默認(rèn)為aspectFill

圖片不設(shè)置width, heighti屬性，使用默認(rèn)寬高

left, right, top, bottom對負(fù)數(shù)的支持

修復(fù)問題：

某些機(jī)型上切邊會出現(xiàn)黑線。

安卓機(jī)型上圓角無法顯示

使用文件前檢查文件是否正常

二維碼大小顯示異常

交互功能：

這一版的特色主要是具備元素的點(diǎn)擊事件實(shí)現(xiàn)以及拖拽功能，做出來以后因?yàn)轫?xiàng)目上暫時用不上，所以感覺功能上可能比較雞肋。不過還蠻好玩的?

在demo中稱之為dancing-painter。

**強(qiáng)調(diào)：**要使用交互功能，有一下兩點(diǎn)需要注意：

導(dǎo)入palette時，使用絕對路徑方法導(dǎo)入

palette類，以module.exports輸出。

原因：小程序頁面向組件傳值時，會把對象參數(shù)做一個類似于JSON.parse(JSON.stringfy())的拷貝，導(dǎo)致對象中的函數(shù)在傳遞后丟失。因此在dancing-painter中，選擇講palette（即生成圖片的json代碼）的路徑傳遞給painter組件，在組件內(nèi)require到這個文件，再合成所需的json數(shù)據(jù)。

導(dǎo)入代碼如下：

//直接導(dǎo)入數(shù)據(jù)// const template = new DCard().palette(); //導(dǎo)入絕對路徑const template = {path: '/palette/dancing-card.js',data: {},};this.setData({template: template,});

palette：

//位于/palette/dancing-card.js class PaletteCard {context = {}constructor(data) {this.data = data;}palette() {return{...}} } module.exports = PaletteCard;

實(shí)現(xiàn)點(diǎn)擊效果

Painter的元素繪制是以json的形式給出的，其交互行為和拖拽效果也定義在相應(yīng)的json文件里。

在需要設(shè)定某一個元素的點(diǎn)擊事件的時候，只需要在其相應(yīng)的json代碼里加入methods屬性即可。該屬性支持一下幾種點(diǎn)擊方式：

namedescription

tap	點(diǎn)擊
longpress	長按
touchstart	開始觸摸
touchmove	移動
touchend	觸摸結(jié)束

每一個方法可以返回一個boolean值，以表示是否攔截該事件。在dancing-painter中，如果在頁面上元素有重疊，則方法的傳遞默認(rèn)是由下而上的；在任意一個元素的methods方法中，可以返回true來攔截該事件。

使用拖拽功能

使用animation屬性，目前只支持拖拽能力。由于存在與屏幕的滑動沖突（如果有大神知道怎么截獲屏幕的滑動事件，如長頁面的滾動，請千萬不吝賜教告訴我哈），需要在使用時固定住整個頁面，如設(shè)置overflow: hidden。

使用：設(shè)置animation:{drag:true}

示例：

{width: '700rpx',height: '1000rpx',background: '#eee',views: [{type: 'qrcode',content: 'https://github.com/Kujiale-Mobile/Painter',css: {top: '40rpx',left: '180rpx',color: 'red',borderWidth: '10rpx',borderColor: 'blue',width: '120rpx',height: '120rpx',align: 'center',},methods: {tap() {console.log('qrcode');},}},{type: 'rect',css: {top: '40rpx',left: '180rpx',color: 'green',borderRadius: '20rpx',borderWidth: '10rpx',width: '120rpx',height: '120rpx',},methods: {tap() {// 調(diào)用當(dāng)前頁面的function方法const pages = this.getCurrentPages();const currentPage = pages[pages.length-1];currentPage.function();},},animation: {drag: true,},}] }

事件冒泡

事件默認(rèn)是冒泡傳遞的。示例如下：

上面的代碼中是兩個部分重疊的二維碼和方形：

點(diǎn)擊二者的重合部分，控制臺輸出：

性能

拖拽功能是一種動畫現(xiàn)象，涉及到canvas的重繪。經(jīng)過測試，在IDE上重繪速度很快，在真機(jī)上有數(shù)量級的差別。

動畫效果的連貫性主要是由canvas.draw()的速度決定的。

下圖展示了在demo主頁上，canvas.draw()方法在ide和真機(jī)上運(yùn)行的時間差別（單位：ms）：

IDE: 真機(jī)（華為榮耀8）：

結(jié)語

感謝大佬在開發(fā)中對我的無限幫助。

感謝?demi520?的?wxapp-qrcode?庫，Painter 中二維碼繪制部分使用了該庫的部分代碼，并做了些修改。

另外這里有一篇wiki簡單介紹了怎樣在mpvue中使用Painter。

坑：：mpvue在更新某一個頁面元素的值的時候，會同時把所有data中存在的元素都更新一遍。

這就造成了這個問題：Painter繪制完成后，會觸發(fā)onImgOK函數(shù)，傳出圖片的url。這時將該url傳入某image的src中去，同時就會觸發(fā)Painter的template的再賦值，從而導(dǎo)致無限重繪。

最后，作為程序員屆的新手和菜鳥，誠邀各路大神用issue和建議砸死我?

最后，作為程序員屆的新手和菜鳥，誠邀各路大神用issue和建議砸死我?

最后，作為程序員屆的新手和菜鳥，誠邀各路大神用issue和建議砸死我?

demo傳送門：https://github.com/shesw/Painter

使用參考（原版）： https://juejin.im/post/5b40b158e51d4518f543c7b0

---

總結(jié)

以上是生活随笔為你收集整理的小程序绘图工具painter-json文件绘制保存分享图-可点击任意元素触发函数的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。