本文共 1102 字,大约阅读时间需要 3 分钟。
components
中的 canvasdrawer
拷贝到自己项目下。{ "usingComponents": { "canvasdrawer": "/components/canvasdrawer/canvasdrawer" }}
**.wxml
文件中加入如下代码painting
是需要传入的 json
。 getImage
方法是绘图完成之后的回调函数,在 event.detail
中返回绘制完成的图片地址数据对象的第一层需要三个参数: width
、height
、mode
、views
。配置中所有的数字都是没有单位的。这就意味着 canvas
绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image
标签中即可。
mode
可选值有 same
, 默认值为空,常规下尽量不要使用。如要使用请看 Q&A的第1点。
当前可以绘制3种类型的配置: image
、text
、rect
。配置的属性基本上使用的都是 css
的驼峰名称,还是比较好理解的。
属性 | 含义 | 默认值 | 可选值 |
---|---|---|---|
url | 绘制的图片地址,可以是本地图片,如:/images/1.jpeg | ||
top | 左上角距离画板顶部的距离 | ||
left | 左上角距离画板左侧的距离 | ||
width | 要画多宽 | 0 | |
height | 要画多高 | 0 |
属性 | 含义 | 默认值 | 可选值 |
---|---|---|---|
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(中划线) |
属性 | 含义 | 默认值 | 可选值 |
---|---|---|---|
background | 背景颜色 | black | |
top | 左上角距离画板顶部的距离 | ||
left | 左上角距离画板左侧的距离 | ||
width | 要画多宽 | 0 | |
height | 要画多高 |
转载地址:http://helrb.baihongyu.com/