|
<script>
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
//获取系统信息
uni.getSystemInfo({
success: function(res) {
canvasw = res.windowWidth;
canvash = canvasw * 9 / 16;
},
})
export default {
data() {
return {
signImage: ''
}
},
methods: {
// 画布的触摸移动开始手势响应
start: function(event) {
console.log(event)
// console.log("触摸开始" + event.changedTouches[0].x)
// console.log("触摸开始" + event.changedTouches[0].y)
//获取触摸开始的 x,y
let point = {
x: event.x,
y: event.y
}
// console.log(touchs)
touchs.push(point);
},
// 画布的触摸移动手势响应
move: function(e) {
let point = {
x: e.touches[0].x,
y: e.touches[0].y
}
touchs.push(point)
if (touchs.length >= 2) {
this.draw(touchs)
}
},
// 画布的触摸移动结束手势响应
end: function(e) {
console.log("触摸结束" + e)
//清空轨迹数组
for (let i = 0; i < touchs.length; i++) {
touchs.pop()
}
},
// 画布的触摸取消响应
cancel: function(e) {
console.log("触摸取消" + e)
},
// 画布的长按手势响应
tap: function(e) {
console.log("长按手势" + e)
},
error: function(e) {
console.log("画布触摸错误" + e)
},
//绘制
draw: function(touchs) {
let point1 = touchs[0]
let point2 = touchs[1]
touchs.shift()
content.moveTo(point1.x, point1.y)
content.lineTo(point2.x, point2.y)
content.stroke()
content.draw(true)
},
//清除操作
clearClick: function() {
//清除画布
content.clearRect(0, 0, canvasw, canvash)
content.draw(true)
},
//保存图片
saveClick: function() {
var that = this
uni.canvasToTempFilePath({
canvasId: 'firstCanvas',
success: function(res) {
//打印图片路径
console.log(res.tempFilePath)
//设置保存的图片
that.signImage= res.tempFilePath
}
})
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
//获得Canvas的上下文
content = wx.createCanvasContext('firstCanvas')
//设置线的颜色
content.setStrokeStyle("#000")
//设置线的宽度
content.setLineWidth(5)
//设置线两端端点样式更加圆润
content.setLineCap('round')
//设置两条线连接处更加圆润
content.setLineJoin('round')
},
}
</script>
|
2019-03-17
2020-06-20
