Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
zrd
/
app
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Мод: cff33ad7d1
Салаанууд Тагууд
app
/
node_modules
/
qs-canvas
落日晚风 cff33ad7d1 清空 1 жил өмнө
..
LICENSE cff33ad7d1 清空 1 жил өмнө
README.md cff33ad7d1 清空 1 жил өмнө
index.js cff33ad7d1 清空 1 жил өмнө
package.json cff33ad7d1 清空 1 жил өмнө
view.png cff33ad7d1 清空 1 жил өмнө

README.md

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')

  • web

    <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()