Skip to content

chunnallu/minapp-canvas-utils

Repository files navigation

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

About

微信小程序 canvas 绘制实用工具

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published