canvasKit - Documentation

canvas工具集

Source:

canvasKit.js, line 1

Methods

(static) aspectFill(ctx, picFile, picInfo, x, y, w, h, bgColoropt)

Source:

canvasKit.js, line 23

绘制图片，保持宽高比居中裁剪，短边完全展示，长边居中截取
说明：
1.应先绘制图片，后填充图片周边内容，否则图片周边长边方向的现有内容会被擦除
2.在开发者工具上图片多余部分无法被清除，但在真机上正常
3.早期小程序canvas不支持clip，所以采用先绘制再擦除的方式实现，导致绘制顺序比较受限，后续考虑改用clip方式实现，待优化

Parameters:

Name	Type	Attributes	Default	Description
`ctx`				wx.createCanvasContext返回的canvas绘图上下文
`picFile`	string			图片临时文件路径
`picInfo`	object			wx.getImageInfo返回的图片原始信息
`x`	number			左上角横坐标
`y`	number			左上角纵坐标
`w`	number			宽度
`h`	number			高度
`bgColor`	string	<optional>	`"#ffffff"`	背景色，裁剪后多余部分用背景色擦除

(static) aspectFit(ctx, picFile, x, y, w, h, bgColor)

Source:

canvasKit.js, line 71

绘制图片，保持图片纵横比，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。

Parameters:

Name	Type	Description
`ctx`		wx.createCanvasContext返回的canvas绘图上下文
`picFile`	string	图片临时文件路径
`x`	number	左上角横坐标
`y`	number	左上角纵坐标
`w`	number	宽度
`h`	number	高度
`bgColor`	string	背景色，裁剪后多余部分用背景色填充

(static) borderRadius(ctx, x, y, w, h, radius, bgColoropt)

Source:

canvasKit.js, line 138

将矩形切成圆角矩形
说明：
1.方形区域四角会被填充成指定的背景色，只保留中央圆角矩形区域不变
2.早期小程序canvas不支持clip，所以采用先绘制再擦除的方式实现圆角矩形，只能在纯色背景上使用，现推荐改用 canvasKit.createBorderRadiusPath + ctx.clip 生成圆角矩形/图片/边框式实现，待优化

Parameters:

Name	Type	Attributes	Default	Description
`ctx`				wx.createCanvasContext返回的canvas绘图上下文
`x`	number			矩形左上角横坐标
`y`	number			矩形左上角纵坐标
`w`	number			矩形宽度
`h`	number			矩形高度
`radius`	number			圆角半径
`bgColor`	string	<optional>	`"#ffffff"`	背景色，擦除部分以背景色填充

(static) createBorderRadiusPath(ctx, x, y, w, h, radius)

Source:

canvasKit.js, line 188

生成圆角边框路径，后续可使用该路径绘制圆角矩形、圆角图片、圆角边框等

Parameters:

Name	Type	Description
`ctx`		wx.createCanvasContext返回的canvas绘图上下文
`x`	number	矩形左上角横坐标
`y`	number	矩形左上角纵坐标
`w`	number	矩形宽度
`h`	number	矩形高度
`radius`	number	圆角半径

(static) ellipsisStr(str, len, ellipsis) → {string}

Source:

canvasKit.js, line 242

字符串过长截断，1个字母长度计为1,1个汉字长度计为2
更新：

早期小程序canvas不支持测量文本实际尺寸，所以采用手动粗略计算的方式实现过长处理
后来小程序canvas提供了measureText接口，支持测量文本实际尺寸信息，本方法待优化

Parameters:

Name	Type	Description
`str`	string	原字符串
`len`	number	最大长度
`ellipsis`	boolean	过长时截断后是否加'...'

Returns:

截断后字符串

Type: string

(static) fillText(ctx, text, x, y, fontSize, color, lineHeight, textAlign)

Source:

canvasKit.js, line 215

绘制文本，支持\n换行

Parameters:

Name	Type	Description
`ctx`		wx.createCanvasContext返回的canvas绘图上下文
`text`	string	文本内容，支持\n换行
`x`	number	文本区域（含行高）左上角横坐标；居中对齐时，改取中点横坐标
`y`	number	文本区域（含行高）左上角纵坐标
`fontSize`	number	字号，单位：px
`color`	string	颜色
`lineHeight`	number	行高
`textAlign`	string	水平对齐方式，支持'left'、'center'，其它值没试过

(static) rounded(ctx, x, y, w, bgColoropt)

Source:

canvasKit.js, line 109

将方形区域切成圆形，场景示例：将头像切成圆形展示
说明：
1.方形区域四角会被填充成指定的背景色，只保留中央圆形区域不变
2.早期小程序canvas不支持clip，所以采用先绘制再擦除的方式实现圆形头像，只能在纯色背景上使用，后续考虑改用clip方式实现，待优化

Parameters:

Name	Type	Attributes	Default	Description
`ctx`				wx.createCanvasContext返回的canvas绘图上下文
`x`	number			左上角横坐标
`y`	number			左上角纵坐标
`w`	number			宽度/高度/圆的直径
`bgColor`	string	<optional>	`"#ffffff"`	背景色，擦除部分以背景色填充

(static) strLenGraphic(str) → {number}

Source:

canvasKit.js, line 274

字符串长度，1个字母长度计为1,1个汉字长度计为2
canvas目前似乎不支持获取文本绘制后所占宽度，只能根据字数粗略计算了
更新：

后来小程序canvas提供了measureText接口，支持测量文本实际尺寸信息，本方法待优化

Parameters:

Name	Type	Description
`str`	string	字符串

Returns:

总长度

Type: number