更新记录

1.0.0（2021-03-24） 下载此版本

1.新增项目 2.本插件底层是基于Kujiale-Mobile/Painter（github地址：https://github.com/Kujiale-Mobile/Painter）插件生成； 3.在Kujiale-Mobile/Painter的基础上通过zhangdaren开源的uni-app转换器（github地址：https://github.com/zhangdaren/miniprogram-to-uniapp）转换成uniApp通用组件，并加以完善； 4.通过转换之后，免去Kujiale-Mobile/Painter复杂的使用过程，和非微信小程序端报错的问题； 5.使用方法参考Kujiale-Mobile/Painter（github地址：https://github.com/Kujiale-Mobile/Painter）；

平台兼容性

uni-app

vue-painter 2.0

使用简介

1. 本插件底层是基于Kujiale-Mobile/Painter（github地址：https://github.com/Kujiale-Mobile/Painter）插件生成；
2. 在Kujiale-Mobile/Painter的基础上通过zhangdaren开源的uni-app转换器（github地址：https://github.com/zhangdaren/miniprogram-to-uniapp）转换成uniApp通用组件，并加以完善；
3. 通过转换之后，免去Kujiale-Mobile/Painter复杂的使用过程，和非微信小程序端报错的问题；

画家计划

想到小程序中有如此大量的生成图片需求，而 Canvas 生成方法又是如此难用和坑爹（有关小程序的坑，可看 https://github.com/Kujiale-Mobile/MP-Keng ）。我们就想到可不可以做一款可以很方便生成图片，并且还能屏蔽掉直接使用 Canvas 的一些坑的库呢？对此我们发起了 “画家计划— 通过 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 绘图不完整。我们对此加入了对结果图片进行检测机制，如果绘图出错会进行重绘。
• 生成的图片支持分辨率调节
• 支持使用拖动等操作动态编辑绘制内容

TODO

• [x] canvas2d 接口支持
• [ ] base64 图片支持 测试版本
• [ ] node 端服务版的 painter
• [ ] line-space 属性支持
• [ ] 三角形等常用图形的支持
• [ ] painter“插件” —— 支持使用者通过少量代码传入自行拓展 painter 能力

painter 的 “canvas2d 版本”与“base64 支持”正处于测试状态，可以在上方测试版本处链接获取对应版本，欢迎各位在实际体验后向我们反馈存在的问题，并给出宝贵的改进经验。你的支持将帮助 painter 做的更好

How To Use

快速开始

1. 引入代码

   下载vue-painter插件，拷贝到项目components目录

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

   import painter from '@/components/dc_hiro-painter/painter.vue'
   export default {
    components:{painter},
   }

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

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

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

   <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 属性即可。

组件文档

interface IView {
  type: "rect" | "text" | "image" | "qrcode";
  text?: string;
  url?: string;
  id?: string;
  /** 事实上painter中view的css属性并不完全与CSSProperties一致。 */
  /** 有一些属性painter并不支持，而当你需要开启一些“高级”能力时，属性的使用方式也与css规范不一致。 */
  /** 具体的区别我们将在下方对应的view介绍中详细讲解，在这里使用CSSProperties仅仅是为了让你享受代码提示 */
  css: CSSProperties;
}

interface IPalette {
  background: string; // 整个模版的背景，支持网络图片的链接、纯色和渐变色
  width: string;
  height: string;
  borderRadius: string;
  views: Array<IView>;
}

interface ICustomActionStyle {
  border: string; // 动态编辑选择框的边框样式
  scale: {
    textIcon: string; // 文字view所使用的缩放图标图片
    imageIcon: string; // 图片view所使用的缩放图标图片
  };
  delete: {
    icon: string; // 删除图标图片
  };
}

Palette 规范

如你使用 wxss + wxml 规范进行绘制一样，Painter 需要根据一定的规范来进行图片绘制。当然 Painter 的绘制规范要比 wxml 简单很多。这部分的例子都是基于 palette 属性实现的静态模版

调色板属性

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

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

View 属性

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

image

Painter 的 image 可以设置成本地图片或者网络图片，注意本地图片请使用绝对路径。并且如果未设置 image 的长宽，则长宽的属性值会默认设为 auto。若长宽均为 auto 则会使用图片本身的长宽来布局，大小为图片的像素值除以 pixelRatio 。

scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

注：mode 属性和小程序 image 的 mode 属性功能一致，只是支持的类型只有两种，且默认值不同。 当 width 或 height 属性设置为 auto 时，mode 属性失效

text

因为 text 的特殊性，此处对 text 进行单独说明。

当文字设置 width 属性后，则文字布局的最大宽度不会超过该 width 。如果内容超过 width，则会进行换行，如果此时未设置 maxLines 属性，则会把所有内容进行换行处理，行数由内容和 width 决定。如果此时设置了 maxLines 属性，则最大展示所设置的行数，如果还有多余内容未展示出来，则后面会带上 ... 。

关于 fontFamily 属性，有一点需要澄清，最开始文档中写的可以通过 wx.loadFontFace 来加载自定义字体，是不严谨的。事实上，原版 canvas 接口不支持自定义字体。而从 2.13.0 版本基础库开始，canvas2d 版本的接口开始支持自定义字体。我们找到了如下问答作为依据： 问题链接。

• 以下用个例子说下上述几个属性的用法

布局属性

以上 View ，除去自己拥有的特别属性外，还有以下的通用布局属性

相对布局方法

很多人有获得文本宽度的需求，因为文本宽度随着字数不同而动态变化，如果想在文本后面加个图标，那么我们就需要获得文本宽度。Painter 的解决方案如下：

1，首先你需要为检测长度的文本添加一个 id。如下
{
  id: 'my-text-id',
  type: 'text',

2，然后在后面的 view 中，你可以在 left、right、top属性中使用这个id。如下
left: ['10rpx', 'my-text-id', 比例]
表示布局在距离左边（10rpx + 该text文本宽度 * 比例） 的距离，比例默认为 1，可省去，你也可以使用负数或小数来做计算，最终的 left 会加上文本宽度乘以该数的值。

注意：

• 比例一定为一个 number
• 获得的长度为 view 自身的尺寸，而非该 view 到对应边的 距离 + 自身尺寸

如果想获得高度，top 也支持上述用法，并且除文本外，你可以对任何 view 设置一个 id，然后使用上述方法进行相对布局。

注：相对布局的那个 view 代码一定需要在被相对的 view 的下面。

border 类型

align

Painter 的 align 类型与 css 中的 align 有些许不同。在 Painter 中 align 表示 view 本身的对齐方式，而不像 css 中表示对其子 view 的操作。align 可以作用在 Painter 支持的所有 view 上。它以设置的 left、top、right、bottom 的位置为基准，然后做不同的对齐操作。并且 align 在文字多行情况下，会影响多行文字的对齐方式。

注意：如果布局使用了 right 确定位置，则该 view 会默认右对齐布局，但此时文字还是从左边绘制。

CSS3 支持

shadow

Painter 中的 shadow 可以同时修饰 image、rect、text、qrcode 等 。在修饰 text 时则相当于 text-shadow；修饰 image 和 rect 时相当于 box-shadow；修饰 qrcode 时，则相当于二维码有效区域的投影。

使用方法：

shadow: 'h-shadow v-shadow blur color';
h-shadow: 必需。水平阴影的位置。允许负值。
v-shadow: 必需。垂直阴影的位置。允许负值。
blur: 必需。模糊的距离。
color: 必需。阴影的颜色。

渐变色支持

你可以在画布的 background 属性或者 rect 的 color 属性中使用以下方式实现 css 3 的渐变色，其中 radial-gradient 渐变的圆心为 view 中点，半径为最长边，目前不支持自己设置。

 {
  background: linear-gradient(
    -135deg,
    blue 0%,
    rgba(18, 52, 86, 1) 20%,
    #987 80%
  );

  color: radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%);
}

！！！注意：颜色后面的百分比一定得写。

其他技巧

文字竖行显示

因为 Painter 支持换行符，所以我们可以配合向字符之间插入换行符来达到竖排显示的效果，并且我们还能自由控制是从左到右或从右到左，如下图所示。

<painter
    customStyle='margin-left: 40rpx; height: 1000rpx;'
    palette="{{paintPallette}}"
    bind:imgOK="onImgOK"
    customActionStyle="{{customActionStyle}}"
    dancePalette="{{template}}"
    bind:touchEnd="touchEnd"
    action="{{action}}"
    />

// ···
data: {
  // ···
  customActionStyle: {
    border: {
      borderColor: "#1A7AF8",
    },
    scale: {
      textIcon: "/palette/switch.png",
      imageIcon: "/palette/scale.png",
    },
    delete: {
      icon: "/palette/close.png",
    },
  },
},
// ···

<painter style="position:fixed;top:-9999rpx" palette="{{userInfoTemplate}}" bind:imgOK="onImgOK" />

{
  background: '#eee',
  width: '654rpx',
  height: '400rpx',
  borderRadius: '20rpx',
  views: [
  {
    type: 'image',
    url: 'https://qhyxpicoss.kujiale.com/r/2017/12/04/L3D123I45VHNYULVSAEYCV3P3X6888_3200x2400.jpg@!70q',
    css: {
      top: '48rpx',
      right: '48rpx',
      width: '192rpx',
      height: '192rpx',
    },
  }
  ...
  ],
}