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

原項(xiàng)目地址：github.com/Kujiale-Mob…

新版地址：github.com/shesw/Paint…

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

1. 添加了交互事件。Painter本質(zhì)是以canvas為基礎(chǔ)的，小程序的canvas有許多限制。允許canvas上元素的交互點(diǎn)擊事件，可以實(shí)現(xiàn)更為便捷的功能，比如原來(lái)需要在canvas上添加功能按鈕，現(xiàn)在可以直接畫(huà)在canvas上
2. 添加拖拽元素的功能。目前這個(gè)功能沒(méi)有完善好，因?yàn)樗幕瑒?dòng)動(dòng)作會(huì)與小程序的全屏滑動(dòng)事件沖突，因此，拖拽功能在固定的頁(yè)面上效果才好，如在拖拽時(shí)設(shè)置overflow: hidden等。

這里將新版的Painter稱(chēng)為dancing-painter。引入方式請(qǐng)參考readme和demo。

演示：

主要功能：

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

簡(jiǎn)介：

原版的使用簡(jiǎn)介請(qǐng)參見(jiàn) juejin.im/post/5b40b1…

簡(jiǎn)單來(lái)講，使用過(guò)程如下圖所示，可以結(jié)合demo來(lái)看：

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

新增特性：

1. 增加align屬性，可以使任意元素可以實(shí)現(xiàn)左中右對(duì)齊。
2. 加入文字換行的能力。對(duì)一段文字設(shè)置width或者maxLines，都有可能觸發(fā)文字的換行。
3. 添加文字的一些屬性：fontWeight, textDecoration, textStyel(fill, stroke), maxLines, lineHeight
4. 圖片mode屬性，實(shí)現(xiàn)圖片裁剪、縮放，默認(rèn)為aspectFill
5. 圖片不設(shè)置width, heighti屬性，使用默認(rèn)寬高
6. left, right, top, bottom對(duì)負(fù)數(shù)的支持

修復(fù)問(wèn)題：

1. 某些機(jī)型上切邊會(huì)出現(xiàn)黑線。
2. 安卓機(jī)型上圓角無(wú)法顯示
3. 使用文件前檢查文件是否正常
4. 二維碼大小顯示異常

交互功能：

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