由于我们无法将小程序直接分享到朋侪圈，，但分享到朋侪圈的需求现在又许多，，业界现在的做法是使用小程序的 Canvas 功效天生一张带有二维码的图片，，然后指导用户下载图片到外地后再分享到朋侪圈。。而小程序 Canvas 功效是很难用的，，往往为了绘制一张简朴图片，，就得写上一堆 boilerplate code 。。若是此时一个小程序中包括多个绘图的需求，，那绝壁要疯。。另外 Canvas 上有许多绘图的坑，，肯定会让你疯上加疯。。

这边说上几个小程序 Canvas 的坑：

1，， Canvas 绘图是用的 px，，而在小程序中我们一般使用 rpx 举行相对结构。。

2，，小程序的 drawCanvas 要领，，在 IDE 中可以直接设置网络图片举行绘制，，但在真机上设置网络图片无用。。

3，，canvasContext.clip 要领在 iOS 装备上 微信 6.6.6 版本及以下有 bug，，会导致该 clip 下面使用的的 restore 要领失效。。

画家妄想

想到小程序中有云云大宗的天生图片需求，，而 Canvas 天生要领又是云云难用和坑爹。。那我们就想到可不可以做一款可以很利便天生图片的库，，并且还能屏障掉直接使用 Canvas 的那些坑呢。。以是我们提倡了 “画家妄想— 通过 json 数据形式，，来举行动态渲染并绘制出图片”。。 

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

How To Use

因该项目为 submodule 治理方式。。首次 clone 代码时，，需加上 --recursive 参数。。

git clone https://github.com/Kujiale-Mobile/Painter.git --recursive

代码下载后，，用小程序 IDE 翻开后即可使用。。

使用 Painter

1. 引入代码

   可以在主项目下执行以下下令，，通过 submodule 的方式引入 painter 组件。。建议是在 components 目录下。。

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

2. 作为自界说组件引入，，注重目录为第一步引入的代码所在目录

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

3. 组件吸收 palette 字段作为绘图数据的数据源, 图案数据以json形式保存，，推荐使用“皮肤模板”的要领举行转达，，示例代码如下：

4. 数据传入后，，则会自动举行绘图。；；；；；嫱纪瓿珊，，你可以通过绑定 imgOK 或 onImgErr 事务来获得乐成后的图片 或失败的原因。。

   bind:imgOK="onImgOK"
   bind:imgErr="onImgErr"
   

Palette 规范

如你使用 wxss + wxml 规范举行绘制一样，，Painter 需要凭证一定的规范来举行图片绘制。。虽然 Painter 的绘制规范要比 wxml 简朴许多。。

调色板属性

一个调色板首先需要给予一些整体属性

background: 可以是颜色值，，也可以为网络图片的链接，，默以为白色
width: 宽度
height: 高度
borderRadius: 边框的圆角（该属性也同样适用于子 view）
views: 内里承载子 view

子 View 属性

当我们把整体的调色板属性构建起来后，，内里就可以添加子 View 来举行绘制了。。

结构属性

以上 View ，，除去自己拥有的特殊属性外，，尚有以下的通用结构属性

尺寸即其他

1，，现在 Painter 中支持两种尺寸单位，，px 和 rpx，，代表的意思和小程序中一致，，此处就未几说。。

2，，现在子 view 的 css 属性支持 object 或 array。。以是意味着，，你可以把几个子 view 共用的 css 属性提取出来。。做到让 Palette 越发精练。。

3，，由于pp电子 palette 是以 js 承载的 json，，以是意味着你可以在每一个属性中很利便的加上自己的逻辑。。也可以把某些属性单独提取出来，，让多个 palette 共用，，做到？？？？？榛。。

举个栗子

{
  background: '#eee',
  width: '654rpx',
  height: '400rpx',
  borderRadius: '20rpx',
  views: [
  {
    type: 'image',
    url: 'http://www.kesion.com/UploadFiles/2021-7/82/b21327035748309628629P9.jpg@!70q',
    css: {
      top: '48rpx',
      right: '48rpx',
      width: '192rpx',
      height: '192rpx',
    },
  }
  ],
}

小程序工具提供多类型商城/门店小程序制作，，可视化编辑 1秒天生5步上线。。通过拖拽、拼接？？？？？榻峁剐〕绦蛏坛且趁，，所看即所得，，只需要美工就能做出细腻商城。。更多小程序市肆请审查：小程序市肆