【小程序绘图解决方案】Painter.js 通过配置Json格式数据在Canvas上绘制图片

为了解决小程序中大量的绘图需求，而直接在 Canvas 中调用各种 API 来绘图又极其复杂，容易陷入有关的坑，可看 https://github.com/Kujiale-Mobile/MP-Keng）。于是有人借用 Painter.js 库帮助我们封装了小程序绘图组件：对此他们发起了“画家计划— 通过 json 数据形式，来进行动态渲染并绘制出图片”。Painter 库的整体架构如下：

首先，我们定义了一套绘图 JSON 规范，开发者可以根据需求构建生成图片的 Palette（调色板），然后在程序运行过程中把调色板传入给 Painter（画家）。Painter 会调用 Pen（画笔），根据 Palette 内容绘制出对应的图片后返回。

经过了一段时间的进步，painter 在大家的建议与贡献下得到了长足的成长。我们感谢各位使用者在这个过程中对 painter 的支持和帮助，这也是我们不断完善 painter 的最大动力。我们将为大家介绍 painter 的新能力，并明确下一阶段的迭代目标。

Painter 的优势

• 功能全，支持文本、图片、矩形、qrcode 类型的 view 绘制
• 布局全，支持多种布局方式，如 align（对齐方式）、rotate（旋转）
• 支持圆角，其中图片，矩形，和整个画布支持 borderRadius 来设置圆角
• 支持边框，同时支持 solid、dashed、dotted 三种类型
• 支持渐变色，包括线性渐变与径向渐变。
• 支持 box-shadow 和 text-shadow，统一使用 shadow 表示。
• 支持文字背景、获取宽度、主动换行
• 支持自定义字体
• 支持图片 mode
• 支持元素的相对定位方法
• 杠杠的性能优化，我们对网络素材图片加载实现了一套 LRU 存储机制，不用重复下载素材图片。
• 杠杠的容错，因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。
• 生成的图片支持分辨率调节
• 支持使用拖动等操作动态编辑绘制内容

快速开始

mpvue 的使用方法请移步 mpvue 接入方案

taro 的使用方法请参考 Taro 接入方案 painter 已发布 taro 版本的 npm 包mina-painter

1. 引入代码

   Painter 的核心代码在另一个 repo 中，https://github.com/Kujiale-Mobile/PainterCore.git。你可以通过 submodule 的方式进行库的引入。有关 submodule 的用法可自行 Google。

   git submodule add https://github.com/Kujiale-Mobile/PainterCore.git components/painter

2. 作为自定义组件引入，注意目录为第一步引入的代码所在目录

   "usingComponents":{"painter":"/components/painter/painter"
   }

3. 组件接收 palette 字段作为画图数据的数据源, 图案数据以 json 形式存在，推荐使用“皮肤模板”的方法进行传递，示例代码如下：

   <painter palette="{{data}}" bind:imgOK="onImgOK" />

   你可以通过设置 widthPixels 来强制指定生成的图片的像素宽度，否则，会根据你画布中设置的大小来动态调节，比如你用了 rpx，则在 iphone 6 上会生成 0.5 倍像素的图片。由于 canvas 绘制的图片像素直接由 Canvas 本身大小决定，此处通过同比例放大整个画布来实现对最后生成的图片大小的调节。

   ” readability=”33″>

   <painter customStyle='position: absolute; left: -9999rpx;' palette="{{template}}" bind:imgOK="onImgOK" widthPixels="1000"/>

4. 数据传入后，则会自动进行绘图。绘图完成后，你可以通过绑定 imgOK 或 imgErr 事件来获得成功后的图片 或失败的原因。

   bind:imgOK="onImgOK"
   bind:imgErr="onImgErr"
   
   onImgOK(e) {
     其中  e.detail.path  为生成的图片路径
   },

5. 你也可以通过使用 dancePalette、action 等字段开启 painter 的高阶用法。具体使用方式将会在下方有详细描述。在新版 painter 中，静态模版默认相对 painter 本身 left: -9999px。因此正常情况下使用 painter 时出现在页面上的都是动态模版。如果希望禁止用户的操作，可以按照使用静态模版的做法，只传 palette 属性即可。

组件文档