171 lines
3.8 KiB
JavaScript
171 lines
3.8 KiB
JavaScript
// components/autograph/index.js
|
|
Component({
|
|
lifetimes: {
|
|
attached: function () {
|
|
this.initCanvas();
|
|
},
|
|
detached: function () {
|
|
// 在组件实例被从页面节点树移除时执行
|
|
},
|
|
},
|
|
|
|
/**
|
|
* 组件的属性列表
|
|
*/
|
|
properties: {
|
|
width: {
|
|
type: String,
|
|
value: 'calc(100vw - 32rpx)'
|
|
},
|
|
height: {
|
|
type: String,
|
|
value: '100%'
|
|
},
|
|
lineWidth: {
|
|
type: Number,
|
|
value: 4
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 组件的初始数据
|
|
*/
|
|
data: {
|
|
isDraw: false, // 是否能画画
|
|
canvasElement: null,
|
|
canvasContext: null,
|
|
oldPosition: {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 组件的方法列表
|
|
*/
|
|
methods: {
|
|
// 初始化canvas
|
|
initCanvas(fn) {
|
|
const query = wx.createSelectorQuery().in(this)
|
|
query.select('.autograph-canvas').fields({
|
|
node: true,
|
|
size: true,
|
|
context: true
|
|
}).exec(res => {
|
|
const canvas = res[0].node
|
|
const context = canvas.getContext('2d')
|
|
const dpr = wx.getSystemInfoSync().pixelRatio
|
|
canvas.width = res[0].width * dpr
|
|
canvas.height = res[0].height * dpr
|
|
context.scale(dpr, dpr)
|
|
this.setData({
|
|
canvasElement: canvas,
|
|
canvasContext: context,
|
|
}, function () {
|
|
if (typeof fn == 'function') {
|
|
fn()
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 描绘canvas
|
|
drawCanvas(position) {
|
|
if (this.data.canvasContext) {
|
|
|
|
this.data.canvasContext.strokeStyle = this.properties.lineColor
|
|
this.data.canvasContext.lineWidth = this.properties.lineWidth
|
|
|
|
this.data.canvasContext.beginPath()
|
|
this.data.canvasContext.moveTo(this.data.oldPosition.x, this.data.oldPosition.y)
|
|
this.data.canvasContext.lineTo(position.x, position.y)
|
|
this.data.canvasContext.stroke()
|
|
this.data.canvasContext.closePath();
|
|
|
|
this.setData({
|
|
oldPosition: {
|
|
x: position.x,
|
|
y: position.y
|
|
}
|
|
})
|
|
}
|
|
},
|
|
// 在画布触摸开始
|
|
handleTouchStart(e) {
|
|
var self = this;
|
|
const x = e.touches[0].x;
|
|
const y = e.touches[0].y;
|
|
self.setData({
|
|
oldPosition: {
|
|
x: x,
|
|
y: y
|
|
},
|
|
}, () => {
|
|
self.setData({
|
|
isDraw: true,
|
|
})
|
|
})
|
|
|
|
|
|
},
|
|
// 在画布触摸移动
|
|
handleTouchMove(e) {
|
|
if (this.data.isDraw) {
|
|
let positionItem = e.touches[0]
|
|
if (this.data.canvasContext) {
|
|
this.drawCanvas(positionItem, true)
|
|
} else {
|
|
this.initCanvas(() => {
|
|
this.drawCanvas(positionItem, true)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
// 在画布触摸结束
|
|
handleTouchEnd() {
|
|
this.setData({
|
|
isDraw: false
|
|
})
|
|
},
|
|
// 清除画布
|
|
clearCanvas() {
|
|
if (this.data.canvasElement) {
|
|
const x = this.data.canvasElement.width
|
|
const y = this.data.canvasElement.height
|
|
this.data.canvasContext.clearRect(0, 0, x, y)
|
|
}
|
|
|
|
},
|
|
// 获取画布的base64
|
|
getCanvasBase64() {
|
|
if (this.data.canvasElement) {
|
|
const pngPic = this.data.canvasElement.toDataURL()
|
|
return pngPic
|
|
}
|
|
|
|
return false;
|
|
|
|
},
|
|
// 获取临时文件
|
|
getCavasTempFile() {
|
|
return new Promise((resolve, reject) => {
|
|
wx.canvasToTempFilePath({
|
|
x: 0,
|
|
y: 0,
|
|
// width: this.properties.width,
|
|
// height: this.properties.height,
|
|
|
|
// destWidth:this.properties.width,
|
|
// destHeight:this.properties.height,
|
|
|
|
canvas: this.data.canvasElement,
|
|
success: (res) => {
|
|
resolve(res)
|
|
},
|
|
fail: () => {
|
|
reject('图片临时文件生成失败')
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}) |