写在前面

最近在做小程序，发现制作分享到朋友圈图片是每个项目必须的。遇到坑比较多，写起来也比较繁琐，也没有找到类似组件，所以就自己动手写了一个。

演示

左侧是帆布抽屉绘制的，右侧是用户界面给的图

特性

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

饭桶克隆https://github.com/kuckboy1994/mp_canvas_drawer想在手机上使用配置自己的应用编号即可。

编译模式中已经为你配置好比较常用的两种模式：

普通绘制，绘制单张分享图。多图绘制，连续绘制分享图使用

饭桶克隆https://github.com/kuckboy1994/mp_canvas_drawer到本地

把成分中的帆布抽屉拷贝到自己项目下。

在使用页面注册组件

{ ' USing ComPany ' : { ' canvasdrawer ' : '/ComPany/canvasdrawer/canvasdrawer ' } }在页面**.页面结构文件中加入如下代码

canvasdrawer painting=' { { painting } } ' bind : getimage=' eventGetImage '/painting是需要传入的json。获取图像方法是绘图完成之后的回调函数，在事件。细节中返回绘制完成的图片地址。

当前栗子中的绘画简单展示一下。详细配置请看应用程序接口

绘画

{ width: 375，height: 555，views: [ { type: 'image '，URL : ' https://hybrid。兴义。电视/迷你节目/万岁-ad/1/1531103986231。' JPEG '，top: 0，left:width 3360 375，height: 555 }，{ type 3:您的好友【kuckboy】'，fontSize: 16，color: '#402D16 '，textAlign: 'left '，top: 33，left: 96，bolder: true }，{ type: 'text '，content: '发现一件好货，邀请你一起0元免费拿！fontSize: 15，color: '#563D20 '，textAlign: 'left '，top: 59.5，left: 96 }，{ type: 'image '，URL : ' https://hybrid。兴。电视/迷你节目/万岁-ad/1/1531385366950。' JPEG '，顶部： 136，左侧3333336正品测量与控制(测量和控制)魅可口红礼盒生日唇膏小辣椒辣椒西柚情人，fontSize: 16，lineHeight: 21，color: '#383549 '，textAlign: 'left '，top: 336，left: 44，width: 287，MaxLineNumber: 2，breakWord: true，bold : true }，{ type: 'text '，content 3: '0.000 '原价：138.00 '，fontSize: 13，color: '#7E7E8B '，textAlign: 'left '，top: 391，left: 110，text decoration : ' line-through ' }，{ type: 'text '，content: '长按识别图中二维码帮我砍个价呗~ '，fontSize: 14，color: '#383549 '，textAlign: 'left '，top: 460，left: 165.5，lineHeight: 20，MaxLineNumber: 2，breakWord: true，width 3360 125 }]} API

对象结构一览

{ width: 375，height: 555，views: [ { type: 'image '，url: 'url '，top: 0，left : 0 0，width: 375，height: 555 }，{ type: 'text '，content: 'content '，fontSize: 16，color: ' # 402D16 '配置中的所有数字都没有单位。这意味着画布绘制一个比例地图。对于特定的显示大小，直接将返回的图像路径放在图像标签中。

目前可以画出三种配置：图像、文本和矩形。配置的属性基本上使用css的驼峰名称，很容易理解。

图像(图片)

属性含义默认值可选值url图片地址，可以是本地图片，如：/images/1。从jpegtop左上角到画板顶部的距离；从左上角到画板左侧的距离；宽度；宽度；0高度；0文本。

属性含义默认值可选值内容图片地址' '(空字符串)颜色黑色fontSize字号16 textAlign文本对齐左居中，右行高行高，仅在多行文本中有用，20个顶部文本的左上角与画板顶部的距离，0个左侧文本的左上角与画板左侧的距离，0个breakWord，是否需要换行，false true MaxLineNumber，最大行数，仅当breakWord: true设置时，当前属性有效。超过行数的内容显示为.2.宽度与MaxLineNumber属性一起使用，也就是说，无论粗体与否，false true装饰显示中间一行，下划线效果，无下划线，直通矩形(矩形，直线)

属性含义默认值可选值背景颜色黑色左上角到画板顶部的距离左上角到画板左侧的距离宽度画多宽0高度画多高0 QA

最佳实践

最好在绘图时锁定屏幕，例如，单击“绘图”时

Wx.showLoading({ title: '在绘制共享图片时'，mask: true})完成

Wx.hideLoading()可以参考项目下的/page/multiple获取详细信息

1.二维码和小程序码怎么画？

二维码和小程序码可以通过调用微信官方界面生成，需要后端配合。然后用type:图像类型绘制。2.绘图过程是相关的

视图数组中的顺序表示绘画的顺序，这可能会被覆盖。请关注所有用户。3.如何实现圆形头像？

没有办法在画布上画圆形图，所以用hack实现。当前效果可以通过在头像上覆盖一个空心的图片来实现。4.画布抽屉组件为什么不直接显示画布画板及其内容？

考虑到大多数场景，我们习惯于在本地保存图片或显示图片。在本地保存并向调用者返回一个临时文件一定是最好的解决方案。显示并转换成图片后，可以使用图像基本组件的所有显示模式，并设置宽度和高度。技巧

如果你有任何问题，欢迎提问。感觉好的话可以给我吗，不过我更新的动力比较大。

github.com/kuckboy1994…

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。