【小程序绘图解决方案】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 本身大小决定,此处通过同比例放大整个画布来实现对最后生成的图片大小的调节。

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

组件文档

属性 类型 说明 必填 默认值
customStyle string canvas 的自定义样式
palette IPalette 静态模版,具体规范下文有详细介绍
scaleRatio number 缩放比,会在传入的 palette 中统一乘以该缩放比,作用和 widthPixels 类似,所以不要同时使用 1
widthPixels number 生成的图片的像素宽度,如不传则根据模版动态生成
dirty boolean 是否启用脏检查 false
LRU boolean 是否开启 LRU 机制 false
dancePalette IPalette 动态模版,规范同静态模版
customActionStyle ICustomActionStyle 选择框、缩放图标、删除图标的自定义样式与图片
action IView 动态编辑内容,用于刷新动态模版
disableAction boolean 禁止动态编辑操作 false
clearActionBox boolean 清除动态编辑框 false
imgErr function 图片生成失败,可以从 e.detail.error 获取错误信息
imgOk function 图片生成成功,可以从 e.detail.path 获取生成的图片路径
viewUpdate function 动态模版, view 被更新,可从 e.detail.view 获取更新的 view
viewClicked function 动态模版, view 被选中, 可从 e.detail.view 获取点击的 view,如为空,则是选中背景
touchEnd function 动态模版,触碰结束。只有 view,代表触碰的对象;包含 view、type、index,代表点击了删除 icon;
didShow function 动态模版,绘制结束时触发
use2D boolean 是否使用 canvas2d 接口(注意!使用 use2D 就无法使用 dancePalette 与 action) false
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; // 删除图标图片
  };
}

评论

这篇文章目前有 一条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Sidebar