Minapp-canvas-utils NPM

minapp-canvas-utils 微信小程序绘图实用工具

封装了微信小程序绘图常用的功能，如图像裁剪、文本绘制

安装

npm i minapp-canvas-utils

示例

用微信开发工具打开 static 目录即可看到示例

API

创建

new CanvasUtils(id, component)

getContext

获取 ctx。要用到小程序原有的 API 时可以使用这个接口

const ctx = canvasUtils.getContext()

drawCoordinate

绘制参考线。在调试时可以将参考线绘制出来，帮助确认位置是否正确

canvasUtils.drawCoordinate({
        gear: 50,
        lineWidth: 1,
        dashWidth: 1,
        gapWidth: 5,
      })

参数：

gear: 格子大小
lineWidth: 参考线的粗细
dashWidth: 参考线虚线的线段长度
gapWidth: 参考线虚线的空格长度

calcBoundingRect

计算包围正方形 calcBoundingRect(rect)

通过 x, y, width, height 计算出 left, top, right, bottom

参数：

rect, 形如 {x, y, width, height} 的对象

返回结果：

boundingRect, 形如 {x, y, width, height, left, top, right, bottom} 的对象

下文用 BoundingRect 来指代 {x, y, width, height, left, top, right, bottom}

setText

绘制文本 setText(text, x, y , options)

参数：

text: 要绘制的文本
x: 横坐标
y: 纵坐标
options: 形如 {fontSize: 14, lineHeight: 18, color:"#C5C5C5", bold: false, maxWidth: 327, textAlign: 'right',lineLimit: 2，textIndent: 20, draw: true} 的对象，其中：
- fontSize: 字号
- lineHeight: 行高
- color: 颜色
- bold: 加粗，暂不支持
- maxWidth: 最大宽度，超出自动换行
- textAlign: 文本水平对齐方式，可以是left, center, right
- lineLimit: 文本的行数限制，超出自动隐藏
- textIndent: 首行缩进
- draw: 是否绘制出来

返回值：

BoundingRect

calcTextBoundingRect

测量文本的BoundingRect calcTextBoundingRect(text, x, y , options)

参数:

同 setText, 不过 options.draw 恒为 false

返回值：

BoundingRect

loadImages

加载图片 loadImages(srcs)

参数:

srcs: 图片地址列表

返回值:

BoundingRect

drawImage

绘制图片 drawImage(image, x, y, {mode:"scaleToFill",width:100, height: 100, borderRadius: 1, borderWidth: 1, borderColor:"#000", draw:true})

参数:

image: 图片对象，通过 wx.getImageInfo 得到
x: 横坐标
y: 纵坐标
options: 选项
- mode: 裁剪模式
  - scaleToFill: 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满空间
  - aspectFit: 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
  - aspectFill: 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
  - widthFix: 宽度不变，高度自动变化，保持原图宽高比不变
  - center
  - top
  - bottom
  - left
  - right
  - none: 不裁剪，安卓下会出现裁剪 gif 失败，图片完全显示白色背景的现象，此时应使用该模式
- width: 画布上绘制区域的宽度
- height: 画布上绘制区域的高度
- borderRadius: 圆角
- borderWidth: 边框
- borderColor: 边框颜色
- draw: 是否绘制出来

返回值：

BoundingRect

fillRect

填充一个矩形区域 fillRect(x, y, width, height, borderRadius, color)

参数:

x: 横坐标
y: 纵坐标
width: 画布上绘制区域的宽度
height: 画布上绘制区域的高度
borderRadius: 圆角
color: 填充颜色，支持纯色和渐变（渐变传入一个字符串，例如：linear-gradient(180deg, #FFFFFF 0%, #D7EAFF 100%)，角度不支持负值）

返回值：

BoundingRect

strokeRect

描边一个矩形区域 strokeRect(x, y, width, height, borderRadius, borderWidth, borderColor)

参数:

x: 横坐标
y: 纵坐标
width: 画布上绘制区域的宽度
height: 画布上绘制区域的高度
borderRadius: 圆角
borderWidth:
borderColor
color: 填充颜色

返回值：

BoundingRect

createRectPath

创建一个矩形路径 createRectPath(x, y, width, height, radius)

参数：

x: 横坐标
y: 纵坐标
width: 画布上绘制区域的宽度
height: 画布上绘制区域的高度
radius: 圆角

返回值：

BoundingRect

copyPixel

拷贝像素 copyPixel(rect)

参数：

rect, 形如 {x, y, width, height} 的对象

返回值：

Promise，参考微信文档

pastePixel

粘贴像素 pastePixel (data, rect)

参数：

data 像素数组，参考微信文档
rect, 形如 {x, y, width, height} 的对象

返回值：

Promise，参考微信文档

isLinearGradientString

判断一个字符串是否是符合规范的线性渐变字符串

参数：

gradientString, 例如 linear-gradient(180deg, #FFFFFF 0%, #D7EAFF 100%)

返回值：

Boolean

parseLinearGradientString

将线性渐变字符串转成对象表示

参数：

gradientString, 例如 linear-gradient(180deg, #FFFFFF 0%, #D7EAFF 100%)

返回值：

{
  type: 'linear-gradient',
  factors: [1, 1, 0, -1],
  stops: [
    [0, "#FFFFFF"],
    [1, "#D7EAFF"],
  ],
}

factors 数组用来表述渐变角度，在使用微信小程序原生接口创建渐变时可以这样用 ctx.createLinearGradient(x*factors[0], y*factors[1], x+Math.abs(width*factors[2]), y+Math.abs(height*factors[3]))

stops 数组每一项都是 gradient.addColorStop 方法的参数

createLinearGradient

创建线性渐变

参数：

x, 绘制区域的 x 坐标
y, 绘制区域的 y 坐标
width, 绘制区域的宽度
height, 绘制区域的高度
gradientString, 例如 linear-gradient(180deg, #FFFFFF 0%, #D7EAFF 100%)

CanvasGradient 对象

isCircularGradientString

判断一个字符串是否是符合规范的线性径向字符串

参数：

gradientString, 例如 circular-gradient(#FFFFFF 0%, #D7EAFF 100%)

返回值：

Boolean

parseCircularGradientString

将线性径向字符串转成对象表示

参数：

gradientString, 例如 circular-gradient(#FFFFFF 0%, #D7EAFF 100%)

返回值：

{
  type: 'linear-gradient',
  stops: [
    [0, "#FFFFFF"],
    [1, "#D7EAFF"],
  ],
}

stops 数组每一项都是 gradient.addColorStop 方法的参数

createCircularGradient

创建径向渐变

参数：

x, 绘制区域的 x 坐标
y, 绘制区域的 y 坐标
radius, 绘制区域半径
gradientString, 例如 circular-gradient(#FFFFFF 0%, #D7EAFF 100%)

CanvasGradient 对象

draw

绘制到画布中 draw(reverse)

需要注意，不调用 draw 是不会将图形绘制到画布中的

参数：

reverse 本次绘制是否接着上一次绘制

返回值

Promise

@infinitebrahmanuniverse/nolb-mina @everything-registry/sub-chunk-2171

5 years ago

5 years ago

5 years ago

5 years ago