h5mall_uniapp/node_modules/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

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转图片

  ```js await qsc.toImage(options