# mp_canvas_drawer
**Repository Path**: chenzhengyang/mp_canvas_drawer
## Basic Information
- **Project Name**: mp_canvas_drawer
- **Description**: :rocket: 微信小程序上canvas绘制图片助手，一个json就制作分享朋友圈图片
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-15
- **Last Updated**: 2021-12-14
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
## canvas drawer
新增 [mpvue_canvas_drawer](https://github.com/kuckboy1994/mpvue_canvas_drawer)。之后同步更新。
新增由[simmzl](https://github.com/simmzl)开发移植的[wepy_canvas_drawer](https://github.com/simmzl/wepy_canvas_drawer)。之后同步更新。
做微信小程序中最好用的 `canvas` 绘图组件之一。
当前环境下，大家都非常需要分享到朋友圈这个功能，但是实现起来各有心酸（坑比较多），所以才有了如下的 `canvas` 绘图工具。
具有如下特性：
- 简单易用 —— 一个 `json` 搞定绘制图片
- 功能全 —— 满足 `90%` 的使用场景
- 绘制文本（换行、超出内容省略号、中划线、下划线、文本加粗）
- 绘制图片
- 绘制矩形
- 保存图片
- 多图绘制
- ...
- 代码量小
## 体验
```
git clone https://github.com/kuckboy1994/mp_canvas_drawer
```
想在手机上使用配置自己的 `appid` 即可。
编译模式中已经为你配置好比较常用的两种模式：
- 普通绘制，绘制单张分享图。
- 多图绘制，连续绘制分享图
## 演示
左侧是 `canvasdrawer` 绘制的，右侧是UI给的图
## 使用
- `git clone https://github.com/kuckboy1994/mp_canvas_drawer` 到本地
- 把 `components` 中的 `canvasdrawer` 拷贝到自己项目下。
- 在使用页面注册组件
```json
{
"usingComponents": {
"canvasdrawer": "/components/canvasdrawer/canvasdrawer"
}
}
```
- 在页面 `**.wxml` 文件中加入如下代码
```html
```
`painting` 是需要传入的 `json`。 `getImage` 方法是绘图完成之后的回调函数，在 `event.detail` 中返回绘制完成的图片地址。
- 当前栗子中的 `painting` 简单展示一下。详细配置请看 [API](https://github.com/kuckboy1994/mp_canvas_drawer#api)
painting（点击展开）
```js
{
width: 375,
height: 555,
views: [
{
type: 'image',
url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg',
top: 0,
left: 0,
width: 375,
height: 555
},
{
type: 'image',
url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h4A/132',
top: 27.5,
left: 29,
width: 55,
height: 55
},
{
type: 'image',
url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg',
top: 27.5,
left: 29,
width: 55,
height: 55
},
{
type: 'text',
content: '您的好友【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.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',
top: 136,
left: 42.5,
width: 290,
height: 186
},
{
type: 'image',
url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385433625.jpeg',
top: 443,
left: 85,
width: 68,
height: 68
},
{
type: 'text',
content: '正品MAC魅可口红礼盒生日唇膏小辣椒Chili西柚情人',
fontSize: 16,
lineHeight: 21,
color: '#383549',
textAlign: 'left',
top: 336,
left: 44,
width: 287,
MaxLineNumber: 2,
breakWord: true,
bolder: true
},
{
type: 'text',
content: '￥0.00',
fontSize: 19,
color: '#E62004',
textAlign: 'left',
top: 387,
left: 44.5,
bolder: true
},
{
type: 'text',
content: '原价:￥138.00',
fontSize: 13,
color: '#7E7E8B',
textAlign: 'left',
top: 391,
left: 110,
textDecoration: 'line-through'
},
{
type: 'text',
content: '长按识别图中二维码帮我砍个价呗~',
fontSize: 14,
color: '#383549',
textAlign: 'left',
top: 460,
left: 165.5,
lineHeight: 20,
MaxLineNumber: 2,
breakWord: true,
width: 125
}
]
}
```
对象结构一览
```js
{
width: 375,
height: 555,
views: [
{
type: 'image',
url: 'url',
top: 0,
left: 0,
width: 375,
height: 555
},
{
type: 'text',
content: 'content',
fontSize: 16,
color: '#402D16',
textAlign: 'left',
top: 33,
left: 96,
bolder: true
},
{
type: 'rect',
background: 'color',
top: 0,
left: 0,
width: 375,
height: 555
}
]
}
```