小程序绘图工具painter-json文件绘制保存分享图-可点击任意元素触发函数

最新推荐文章于 2024-08-17 11:22:35 发布

前端老码农

最新推荐文章于 2024-08-17 11:22:35 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： GitHub 前端 Canvas JSON 微信小程序

原文链接：https://www.mk2048.com/blog/blog.php?id=ibakabi2ib&title=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%98%E5%9B%BE%E5%B7%A5%E5%85%B7painter-json%E6%96%87%E4%BB%B6%E7%BB%98%E5%88%B6%E4%BF%9D%E5%AD%98%E5%88%86%E4%BA%AB%E5%9B%BE-%E5%8F%AF%E7%82%B9%E5%87%BB%E4%BB%BB%E6%8

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

Painter是由酷家乐移动前端团队打造的一款小程序绘图组件。

原项目地址：https://github.com/Kujiale-Mobile/Painter

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

这款交互版原来是为了针对业务中的新需求而由我自己开发的，后来需求改动，所以并没有用上。组里大佬考虑种种原因（主要是项目没用上，=0=～～），让我先在自己的github上开源。这版painter与原版的区别在于：

添加了交互事件。Painter本质是以canvas为基础的，小程序的canvas有许多限制。允许canvas上元素的交互点击事件，可以实现更为便捷的功能，比如原来需要在canvas上添加功能按钮，现在可以直接画在canvas上
添加拖拽元素的功能。目前这个功能没有完善好，因为它的滑动动作会与小程序的全屏滑动事件冲突，因此，拖拽功能在固定的页面上效果才好，如在拖拽时设置overflow: hidden等。

这里将新版的Painter称为dancing-painter。引入方式请参考readme和demo。

演示：

主要功能：

指原版的painter的功能。这些功能依然是本项目的主(实)要(用)功能。

简介：

原版的使用简介请参见 https://juejin.im/post/5b40b158e51d4518f543c7b0

简单来讲，使用过程如下图所示，可以结合demo来看：

距离首次开源Painter库已经有一段时间了，这期间获益于各路道友的帮助和提点，Painter进行了几波更新（原项目地址)：

新增特性：

增加align属性，可以使任意元素可以实现左中右对齐。
加入文字换行的能力。对一段文字设置width或者maxLines，都有可能触发文字的换行。
添加文字的一些属性：fontWeight, textDecoration, textStyel(fill, stroke), maxLines, lineHeight
图片mode属性，实现图片裁剪、缩放，默认为aspectFill
图片不设置width, heighti属性，使用默认宽高
left, right, top, bottom对负数的支持

修复问题：

某些机型上切边会出现黑线。
安卓机型上圆角无法显示
使用文件前检查文件是否正常
二维码大小显示异常

交互功能：

这一版的特色主要是具备元素的点击事件实现以及拖拽功能，做出来以后因为项目上暂时用不上，所以感觉功能上可能比较鸡肋。不过还蛮好玩的?

在demo中称之为dancing-painter。

**强调：**要使用交互功能，有一下两点需要注意：

导入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,
        },
      }]
}