canvas drawer
做微信小程序中最好用的 canvas 绘图组件之一。
当前环境下,大家都非常需要分享到朋友圈这个功能,但是实现起来各有心酸(坑比较多),所以才有了如下的 canvas 绘图工具。
具有如下特性:
- 简单易用 —— 一个 json 搞定绘制图片
- 功能全 —— 满足 90% 的使用场景
- 绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗)
- 绘制图片
- 绘制矩形
- 保存图片
- 多图绘制
- 代码量小
体验
git clone https://github.com/kuckboy1994/mp_canvas_drawer
想在手机上使用配置自己的 appid 即可。
编译模式中已经为你配置好比较常用的两种模式:
- 普通绘制,绘制单张分享图。
- 多图绘制,连续绘制分享图
演示
左侧是 canvasdrawer 绘制的,右侧是UI给的图
API
对象结构一览
数据对象的第一层需要三个参数: width、height、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image标签中即可。
当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称,还是比较好理解的。
image(图片)
属性含义默认值可选值url绘制的图片地址,可以是本地图片,如:/images/1.jpegtop左上角距离画板顶部的距离left左上角距离画板左侧的距离width要画多宽0height要画多高0
text(文本)
属性含义默认值可选值content绘制文本''(空字符串)color颜色blackfontSize字体大小16textAlign文字对齐方式leftcenter、rightlineHeight行高,只有在多行文本中才有用20top文本左上角距离画板顶部的距离0left文本左上角距离画板左侧的距离0breakWord是否需要换行falsetrueMaxLineNumber最大行数,只有设置 breakWord: true ,当前属性才有效,超出行数内容的显示为...2width和 MaxLineNumber 属性配套使用,width 就是达到换行的宽度bolder是否加粗falsetruetextDecoration显示中划线、下划线效果noneunderline(下划线)、line-through(中划线)
rect (矩形,线条)
属性含义默认值可选值background背景颜色blacktop左上角距离画板顶部的距离left左上角距离画板左侧的距离width要画多宽0height要画多高0
TIPS
- 如果有什么疑问,欢迎 issues。 如果觉得不错,能不能送我小 ✨ ✨ ,然我有更多的动力更新。
- 当前的例子中没有放置网络图片,并不代表不支持,你可以把 url 替换成网络地址。
更新计划
- [ ] 图片缓存机制 - 加快相同图片绘制的速度
閱讀更多 前端圈 的文章