平台兼容性

小程序自定义组件的通用使用方式详见：uni-app中使用小程序自定义组件教程

canvas_drawer

做微信小程序中最好用的 canvas 绘图组件之一。

当前环境下，大家都非常需要分享到朋友圈这个功能，但是实现起来各有心酸（坑比较多），所以才有了如下的 canvas 绘图工具。

具有如下特性：

• 简单易用 —— 一个 json 搞定绘制图片
• 功能全 —— 满足 90% 的使用场景
  • 绘制文本（换行、超出内容省略号、中划线、下划线、文本加粗）
  • 绘制图片
  • 绘制矩形
  • 保存图片
  • 多图绘制
  • ...
• 代码量小

演示

左侧是 canvasdrawer 绘制的，右侧是UI给的图

使用方式

把 canvas_drawer 组件移动到 uniapp 项目的 /wxcomponents/ 目录下

在调用页面的 pages.json 文件最后加入如下代码

{
    "pages": [
        {
            "path": "canvasdrawer/canvasdrawer",
            "style": {
                "navigationBarTitleText": "canvasdrawer",
                "usingComponents": {
                    "canvasdrawer": "/wxcomponents/canvasdrawer/canvasdrawer"
                }
            }
        }
    ]
}

就可以直接在 uniapp 中使用 canvas_drawer

<img :src="shareImage" class="share-image" />
<canvasdrawer :painting="painting" class="canvasdrawer" @getImage="eventGetImage"/>

API

数据对象的第一层需要三个参数: width、height、mode、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。

mode 可选值有 same, 默认值为空，常规下尽量不要使用。如要使用请看 Q&A的第1点。

当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称，还是比较好理解的。

image（图片）

text（文本）

rect (矩形，线条)