1.0.11 更新说明

修复 uni.canvasToTempFilePath中组件实例导致输出失败问题

一款支持 Node、web、uni-app 的canvas绘图工具

有使用ES6语法有需要需自行转ES5

目前uni-app环境 H5、APP 会存在clip裁剪失效的情况 hbx 3.4.8+ 已修复

Node环境注意：需要安装canvas `npm i canvas`, 并且切换Node版本后需要重新安装canvas

npm

npm i qs-canvas

Step1 引入

node

const QSCanvas = require('qs-canvas')

<script src="xxx.js"></script>

uni-app

import QSCanvas from 'xxx.js'

Step2 QSCanvas对象

const qsc = new QSCanvas(options, vm)
options<Object>: {
	width<Number>: 10, //canvas的宽
	height<Number>: 10, //canvas的高
	canvasId<String>: '', //canvasId, uni-app必传、web可不传
	setCanvasWH<Function>: undefined, //动态设置canvas宽高方法, uni-app需传
	asyncDrawMode<Boolean>: true, //异步绘制模式, web、node支持, 控制是否像uni-app一样只有在调用draw时才绘制内容
}

vm<Object>: undefined //uni-app, 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/> ，如果省略，则不在任何自定义组件内查找

Attribute

qsc._data<Object>: {
	oldPaintbrushProps: paintbrushProps<Object>, //当前画笔设置
	width<Number>: 10, //画布宽度
	height<Number>: 10, //画布高度
}

API

支持原生canvas上下文所有方法(如: fill、save、clip...)
setPaintbrush

设置画笔属性, 原生canvas上下文除所有方法外的属性均在此设置

// 展示的是默认值， 不用都传
qsc.setPaintbrush(paintbrushProps<Object>)
paintbrushProps<Object>: {
		fillStyle<String>?: '#000000',
		strokeStyle<String>?: '#000000',
		shadowColor<String>?: '#000000',
		shadowBlur<Number>?: 0,
		shadowOffsetX<Number>?: 0,
		shadowOffsetY<Number>?: 0,
		lineCap<String>?: 'butt',
		lineJoin<String>?: 'miter',
		lineWidth<Number>?: 1,
		miterLimit<Number>?: 10,
		font: { // 头条小程序只支持fontSize
			fontStyle<String>?: 'normal', 
			fontVariant<String>?: 'normal', 
			fontWeight<String>?: 'normal', 
			fontSize<Number>?: 10, 
			fontFamily<String>?: 'sans-serif' 
		},
		textAlign<String>?: 'start',
		textBaseline<String>?: 'top',
		globalAlpha<Number>?: 1.0,
		globalCompositeOperation<String>?: 'source-over',
	}

resetPaintbrush

重置画笔属性

// 若不传参则重置为setPaintbrush中展示的默认值, 若传可覆盖
qsc.resetPaintbrush(paintbrushProps<Object>?)

savePaintbrush

保存画笔属性, 推入栈(先入后出)中保存, 可调用restorePaintbrush恢复

qsc.savePaintbrush()

restorePaintbrush

恢复最近一次保存的画笔属性

qsc.restorePaintbrush()

saveAndSetPaintbrush

先保存一次画笔属性, 再设置

qsc.saveAndSetPaintbrush(paintbrushProps<Object>)

updateCanvasWH promise

更新画布宽高

// 该方法会在结束时自动调用一次resetPaintbrush(this._data.oldPaintbrushProps)
await qsc.updateCanvasWH(options<Object>?)
options<Object>: {
	width<Number>?: this.width, // 若不传则使用初始化时的width
	height<Number>?: this.height, // 若不传则使用初始化时的height
	delay<Number>?: 50, // uni-app更新画布宽高后延时操作
}

draw promise

执行绘制, web、node在异步绘制模式下同uni-app一样需调用, uni-app必须调用才能绘制

await qsc.draw(options<Object>?)
options<Obeject>: {
	reserve<Boolean>?: false, // 是否接着上一次绘制
}

toImage promise

canvas转图片

await qsc.toImage(options<Object>?)
options<Obeject>: {
	// web、node、uni-app 支持
	fileType<String>: 'png', // 图片格式
	quality<Number>: 1, // 图片质量，jpg格式有效
	
	// uni-app 支持
	x<Number>?: 0, // 画布x轴起点（默认0）
	y<Number>?: 0, // 画布y轴起点（默认0）
	width<Number>?: canvas宽度-x, // 画布宽度（默认为canvas宽度-x）
	height<Number>?: canvas高度-y, // 画布高度（默认为canvas高度-y）
	destWidth<Number>?: width * 屏幕像素密度, // 输出图片宽度（默认为 width * 屏幕像素密度）
	destHeight<Number>?: height * 屏幕像素密度, // 输出图片高度（默认为 height * 屏幕像素密度）
}

drawText promise

绘制文字, 调用calcText后进行绘制

const calcR<Object> = await qsc.drawText(options<Object>?)
options<Obeject>: {
	val<String>?: '', // 文字内容
	x<Number>?: 0, // x轴位置
	y<Number>?: 0, // y轴位置
	maxWidth<Number>?: null, // 达到此最大宽度后换行
	line<Number>?: -1, // 换行时行数, 小于零则无限, 为0时会赋值为1
	lineHeight<Number>?: 0, // 行高, 行与行之间的距离, 不计文字本身高度
	paintbrushProps<Object>?: paintbrushProps, // 设置画笔属性，可以传 fillStyle 控制颜色、font.fontSize控制字体大小等
	textDecoration<Object>?: {
		line<String>?: 'line-through', // 线条类型, 支持 ['line-through','underline','overline']
		color<String>?: oldProps.fillStyle || '#000000', // 线条颜色
		thickness<Number>|width<Number>?: fontSize * 0.1 || 1, // 线条宽度
		style<String>?: 'solide', // 线条样式, 支持 ['solide', 'double', 'dotted']
		offset<Number>?: 0, // 线条偏移
		gap<Number>?: 1, // 间隔，double、dotted时的间隔
	}
}
calcR<Object>: {
	calcTexts<Array>, // 计算后的文字数组
	x<Number>, // x轴位置
	y<Number>, // y轴位置
	height<Number>, // 高度
	width<Number>, // 宽度
	top<Number>, // 上边界
	left<Number>, // 左边界
	right<Number>, // 右边界
	bottom<Number>, // 下边界
}

calcText promise

计算需绘制的文字

// calcR可直接传给drawText绘制
const calcR<Object> = await qsc.calcText(options<Object>)
options<Object>: 同drawText的options

drawImg promise

绘制图片, 调用calcImg后进行绘制

const calcR<Object> = await qsc.drawImg(options<Object>?)
options<Obeject>: {
	val<String>?: '', // 图片路径, 支持 网络图片、1.0.10+ 本地图片(字节小程序只支持相对路径)、base64图片(某些小程序无法获取图片信息)
	x<Number>?: 0, // x轴位置
	y<Number>?: 0, // y轴位置
	mode<String>?: 'scaleToFill', // 绘制模式 同uni-app image mode, 支持 ['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'heightFix']
	width<Number>?: 0, // 图片宽度
	height<Number>?: 0, // 图片高度
}
calcR<Object>: {
	drawImageArgs<Array>, // 计算后的绘制参数
	x<Number>, // x轴位置
	y<Number>, // y轴位置
	height<Number>, // 高度
	width<Number>, // 宽度
	top<Number>, // 上边界
	left<Number>, // 左边界
	right<Number>, // 右边界
	bottom<Number>, // 下边界
}

calcImg promise

计算需绘制的图片

// calcR可直接传给drawImg绘制
const calcR<Object> = await qsc.calcText(options<Object>)
options<Object>: 同drawImg的options

loadImage promise

加载图片

// img可直接传给 drawImg 或者 calcImg 当做 val 值
const img<Object> = await qsc.loadImage(url<String>)
url<String>: 图片路径

drawQrCode promise

绘制二维码，参考诗小柒的二维码生成器代码

await qsc.drawQrCode(options<Object>?)
options<Obeject>: {
	val<String>?: '', // 二维码内容
	x<Number>, // x轴位置
	y<Number>, // y轴位置
	size<Number>?: 200, // 二维码大小
	background<String>?: '#ffffff', // 背景色
	foreground<String>?: '#000000', // 前景色
	pdground<String>?: '#000000', // 定位角点颜色
	correctLevel<Number>?: 3, // 容错级别
}

setCircle

设置圆形

qsc.setCircle(options<Object>?)
options<Obeject>: {
	x<Number>, // x轴位置
	y<Number>, // y轴位置
	d<Number>, // 直径
	mode<String>?: 'leftTop', // 圆心模式, 支持 ['leftTop', 'center']
	clip<Boolean>?: false, // 是否裁剪, 设置true后 需手动 qsc.restore()
}

setRect

设置矩形

qsc.setRect(options<Object>?)
options<Obeject>: {
	x<Number>, // x轴位置
	y<Number>, // y轴位置
	r<Number>, // 圆角值
	width<Number>, // 宽度
	height<Number>, // 高度
	clip<Boolean>?: false, // 是否裁剪, 设置true后 需手动 qsc.restore()
}

drawArray promise

Array形式绘制

const drawR<Array> = await qsc.drawArray(options<[]<Object|Function>>?)
options<[]<Object|Function>>: [
	<Function>, //直接执行函数, 支持返回Promise
	<Object>:{
		type<String>: '', // 类型, 支持 ['text','image','qrcode','method', 'function']
		zIndex<Number>: 0, //1.0.10+ 层级， 越大越往后绘制
		//type 为 'text'、'image'、'qrcode'传原本方法需要传的参数
		...options<Object>,
		
		// type 为 method 时
		name<String>: '', // 需要执行qsc下的方法名称
		data<Array|Object>, //传给执行方法的参数, Array时以...arguments传给执行方法, Obejct时以[data<Object>]传给执行方法

		//1.0.10+ type 为 function 时
		val<Function>: '', // 需要执行qsc下的方法名称
	}
]

initAsyncDrawMode

转为异步绘制模式 uni-app无效

qsc.initAsyncDrawMode()

restoreAsyncDrawMode

取消异步绘制模式 uni-app无效

qsc.restoreAsyncDrawMode()

qs-canvas

1.0.11 更新说明

修复 uni.canvasToTempFilePath中组件实例导致输出失败问题

一款支持 Node、web、uni-app 的canvas绘图工具

有使用ES6语法 有需要需自行转ES5

目前uni-app环境 H5、APP 会存在clip裁剪失效的情况 hbx 3.4.8+ 已修复

Node环境注意：需要安装canvas npm i canvas, 并且切换Node版本后需要重新安装canvas

npm

Step1 引入

node

web

uni-app

Step2 QSCanvas对象

Attribute

API

支持原生canvas上下文所有方法(如: fill、save、clip...)

setPaintbrush

设置画笔属性, 原生canvas上下文除所有方法外的属性均在此设置

resetPaintbrush

重置画笔属性

savePaintbrush

保存画笔属性, 推入栈(先入后出)中保存, 可调用restorePaintbrush恢复

restorePaintbrush

恢复最近一次保存的画笔属性

saveAndSetPaintbrush

先保存一次画笔属性, 再设置

updateCanvasWH promise

更新画布宽高

draw promise

执行绘制, web、node在异步绘制模式下同uni-app一样需调用, uni-app必须调用才能绘制

toImage promise

canvas转图片

drawText promise

绘制文字, 调用calcText后进行绘制

calcText promise

计算需绘制的文字

drawImg promise

绘制图片, 调用calcImg后进行绘制

calcImg promise

计算需绘制的图片

loadImage promise

加载图片

drawQrCode promise

绘制二维码， 参考诗小柒的二维码生成器代码

setCircle

设置圆形

setRect

设置矩形

drawArray promise

Array形式绘制

initAsyncDrawMode

转为异步绘制模式 uni-app无效

restoreAsyncDrawMode

取消异步绘制模式 uni-app无效

Readme

Keywords

Package Sidebar

Install

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

有使用ES6语法有需要需自行转ES5

Node环境注意：需要安装canvas `npm i canvas`, 并且切换Node版本后需要重新安装canvas

updateCanvasWH `promise`

draw `promise`

toImage `promise`

drawText `promise`

calcText `promise`

drawImg `promise`

calcImg `promise`

loadImage `promise`

drawQrCode `promise`

绘制二维码，参考诗小柒的二维码生成器代码

drawArray `promise`

Weekly Downloads