用painter-json生成分享图，并支持点击事件

前言

Painter是由酷家乐移动前端团队打造的一款小程序绘图组件。它能让我们用json来进行绘图，既简单又高效。

一、使用painter-json生成分享图

1. 首先，我们需要在小程序中引入painter-json。

import painter from 'painter-json';

2. 然后，我们需要创建一个painter实例。

const painterInstance = painter.createPainter({
  width: 300,
  height: 300
});

3. 接下来，我们需要将json数据传递给painter实例。

painterInstance.setRenderData({
  views: [
    {
      type: 'rect',
      background: '#ffffff',
      top: 0,
      left: 0,
      width: 300,
      height: 300
    },
    {
      type: 'text',
      text: '你好，世界！',
      fontSize: 20,
      color: '#000000',
      top: 100,
      left: 100
    }
  ]
});

4. 最后，我们需要调用painter实例的saveAsImage()方法来保存分享图。

painterInstance.saveAsImage();

二、支持点击事件

1. 首先，我们需要在json数据中添加点击事件。

{
  type: 'rect',
  background: '#ffffff',
  top: 0,
  left: 0,
  width: 300,
  height: 300,
  events: {
    tap: function() {
      console.log('你点击了矩形！');
    }
  }
}

2. 然后，我们需要在小程序中监听painter的点击事件。

painterInstance.on('click', function(e) {
  console.log(e);
});

三、结语

以上就是使用painter-json生成分享图并支持点击事件的方法。希望本文能对大家有所帮助。