小程序繪圖工具painter-json文件繪製保存分享圖-可點擊任意元素觸發函數

時間 2019-11-21

標籤程序繪圖工具 painter json 文件繪製保存分享點擊任意元素觸發函數欄目 JavaScript 简体版

原文原文鏈接

Painter是由酷家樂移動前端團隊打造的一款小程序繪圖組件。css

原項目地址：github.com/Kujiale-Mob…前端

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

這款交互版原來是爲了針對業務中的新需求而由我本身開發的，後來需求改動，因此並無用上。組裏大佬考慮種種緣由（主要是項目沒用上，=0=～～），讓我先在本身的github上開源。這版painter與原版的區別在於：git

添加了交互事件。Painter本質是以canvas爲基礎的，小程序的canvas有許多限制。容許canvas上元素的交互點擊事件，能夠實現更爲便捷的功能，好比原來須要在canvas上添加功能按鈕，如今能夠直接畫在canvas上
添加拖拽元素的功能。目前這個功能沒有完善好，由於它的滑動動做會與小程序的全屏滑動事件衝突，所以，拖拽功能在固定的頁面上效果纔好，如在拖拽時設置overflow: hidden等。

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

演示：

主要功能：

指原版的painter的功能。這些功能依然是本項目的主(實)要(用)功能。程序員

簡介：

原版的使用簡介請參見 juejin.im/post/5b40b1…github

簡單來說，使用過程以下圖所示，能夠結合demo來看：json

距離首次開源Painter庫已經有一段時間了，這期間獲益於各路道友的幫助和提點，Painter進行了幾波更新（原項目地址)：canvas

新增特性：

增長align屬性，可使任意元素能夠實現左中右對齊。
加入文字換行的能力。對一段文字設置width或者maxLines，都有可能觸發文字的換行。
添加文字的一些屬性：fontWeight, textDecoration, textStyel(fill, stroke), maxLines, lineHeight
圖片mode屬性，實現圖片裁剪、縮放，默認爲aspectFill
圖片不設置width, heighti屬性，使用默認寬高
left, right, top, bottom對負數的支持

修復問題：

某些機型上切邊會出現黑線。
安卓機型上圓角沒法顯示
使用文件前檢查文件是否正常
二維碼大小顯示異常

交互功能：

這一版的特點主要是具有元素的點擊事件實現以及拖拽功能，作出來之後由於項目上暫時用不上，因此感受功能上可能比較雞肋。不過還蠻好玩的😄小程序

在demo中稱之爲dancing-painter。app

**強調：**要使用交互功能，有一下兩點須要注意：

導入palette時，使用絕對路徑方法導入
palette類，以module.exports輸出。

緣由：小程序頁面向組件傳值時，會把對象參數作一個相似於JSON.parse(JSON.stringfy())的拷貝，致使對象中的函數在傳遞後丟失。所以在dancing-painter中，選擇講palette（即生成圖片的json代碼）的路徑傳遞給painter組件，在組件內require到這個文件，再合成所需的json數據。

導入代碼以下：

//直接導入數據
	// const template = new DCard().palette(); 
	//導入絕對路徑
    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;
複製代碼

實現點擊效果

Painter的元素繪製是以json的形式給出的，其交互行爲和拖拽效果也定義在相應的json文件裏。

在須要設定某一個元素的點擊事件的時候，只須要在其相應的json代碼里加入methods屬性便可。該屬性支持一下幾種點擊方式：

name	description
tap	點擊
longpress	長按
touchstart	開始觸摸
touchmove	移動
touchend	觸摸結束

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

使用拖拽功能

使用animation屬性，目前只支持拖拽能力。因爲存在與屏幕的滑動衝突（若是有大神知道怎麼截獲屏幕的滑動事件，如長頁面的滾動，請千萬不吝賜教告訴我哈），須要在使用時固定住整個頁面，如設置overflow: hidden。

使用：設置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() {
            // 調用當前頁面的function方法
            const pages = this.getCurrentPages();
            const currentPage = pages[pages.length-1];
            currentPage.function();
          },
        },
        animation: {
          drag: true,
        },
      }]
}
複製代碼