微信小程序生成分享海报

• 把 components 中的 canvasdrawer 拷贝到自己项目下。
• 在使用页面注册组件

{
  "usingComponents": {
    "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
  }
}

• 在页面 **.wxml 文件中加入如下代码

<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>

• painting 是需要传入的 json。 getImage 方法是绘图完成之后的回调函数，在 event.detail 中返回绘制完成的图片地址

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

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

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

image（图片）

属性	含义	默认值	可选值
url	绘制的图片地址，可以是本地图片，如：/images/1.jpeg
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高	0

text（文本）

属性	含义	默认值	可选值
content	绘制文本	''（空字符串）
color	颜色	black
fontSize	字体大小	16
textAlign	文字对齐方式	left	center、right
lineHeight	行高，只有在多行文本中才有用	20
top	文本左上角距离画板顶部的距离	0
left	文本左上角距离画板左侧的距离	0
breakWord	是否需要换行	false	true
MaxLineNumber	最大行数，只有设置 breakWord: true ，当前属性才有效，超出行数内容的显示为...	2
width	和 MaxLineNumber 属性配套使用，width 就是达到换行的宽度
bolder	是否加粗	false	true
textDecoration	显示中划线、下划线效果	none	underline（下划线）、line-through（中划线）

rect (矩形，线条)

属性	含义	默认值	可选值
background	背景颜色	black
top	左上角距离画板顶部的距离
left	左上角距离画板左侧的距离
width	要画多宽	0
height	要画多高