1.0.2 • Published 6 years ago
mp-canvas v1.0.2
概述
微信小程序 canvas 绘图封装方法
安装
clone 本项目，将 mp-canvas.js 放到你的小程序项目里。
在小程序中使用 mp-canvas
import { drawTextarea } from "path/to/mp-canvas";
const ctx = wx.createCanvasContext("myCanvas");
drawTextarea(ctx, "测试", {
x: 270,
y: 70,
fontSize: 24,
lineHeight: 33
});
ctx.draw();方法
drawTextarea(context, text, options)
文本绘制，支持超出...，删除线和下划线
用法
import { drawTextarea } from "path/to/mp-canvas";
const ctx = wx.createCanvasContext("myCanvas");
drawTextarea(ctx, "测试", {
x: 20,
y: 20,
textDecoration: "line-through"
});
ctx.draw();参数
- context：canvas 上下文，通过
wx.createCanvasContext获得 - text：文本内容
- options：配置项，见下表
配置
| 配置名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| x | number | 0 | 文字在画布 x 轴上的位置，px |
| y | number | 0 | 文字在画布 y 轴上的位置，px |
| fontSize | number | 20 | 文字大小，px |
| lineHeight | number | 20 | 行高，px |
| fontWeight | String | normal | 文字粗细，支持 css 里font-weight的配置 |
| color | string | #333333 | 文字颜色 |
| textDecoration | string/boolean | false | 文本修饰，支持line-through，underline |
| maxWidth | number/boolean | false | 最大宽度，超过此宽度会换行显示，px |
| column | number/boolean | false | 最大行数，超过此行数会以...显示 |
drawRoundRect(context, options)
绘制圆角矩形
用法
import { drawRoundRect } from "path/to/mp-canvas";
const ctx = wx.createCanvasContext("myCanvas");
drawRoundRect(ctx, {
x: 310,
y: 391,
width: 110,
height: 40,
borderRadius: 4,
borderColor: "#F21A21",
borderWidth: 2
});
ctx.draw();参数
- context：canvas 上下文，通过
wx.createCanvasContext获得 - options：配置项，见下表
配置
| 配置名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| x | number | 0 | 矩形在画布 x 轴上的位置，px |
| y | number | 0 | 矩形在画布 y 轴上的位置，px |
| width | number | 0 | 矩形宽度，px |
| height | number | 0 | 矩形高度，px |
| borderRadius | number | 4 | 矩形圆角，px |
| borderWidth | number | 0 | 边框宽度，px |
| borderColor | string | #333 | 边框颜色 |
| backgroundColor | string | #fff | 背景颜色 |
circleImg(context, imgUrl, x, y, d)
绘制圆框图片
用法
import { circleImg } from "path/to/mp-canvas";
const ctx = wx.createCanvasContext("myCanvas");
circleImg(ctx, localImageUrl, 20, 493, 20)
ctx.draw();参数
- context：canvas 上下文，通过
wx.createCanvasContext获得 - imgUrl：本地图片地址
- x：圆框图片在x轴上位置，px
- y：圆框图片在y轴上位置，px
- d：圆框图片直径，px