<template>
<view class='contents'>
<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'
@touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
</canvas>
<button @click='clearClick'>清除</button>
<button @click='saveClick'>保存图片</button>
<image id='signatureImg' :src='signImage'></image>
</view>
</template>
<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(e) {
console.log(e)
// console.log("触摸开始" + event.changedTouches[0].x)
// console.log("触摸开始" + event.changedTouches[0].y)
//获取触摸开始的 x,y
let point = {
x: e.touches[0].x,
y: e.touches[0].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 = uni.createCanvasContext('firstCanvas')
//设置线的颜色
content.setStrokeStyle("#000")
//设置线的宽度
content.setLineWidth(5)
//设置线两端端点样式更加圆润
content.setLineCap('round')
//设置两条线连接处更加圆润
content.setLineJoin('round')
},
}
</script>
<style>
content {
width: 100%;
height: 500px;
}
.firstCanvas {
background-color: #ddd;
width: 100%;
height: 200px;
}
.contents image {
width: 100%;
height: 200px;
background-color: orange;
}
#signatureImg {
background-color: #ddd;
}
</style>
- 发布:2020-08-28 11:32
- 更新:2020-10-15 08:57
- 阅读:1200
产品分类: uniapp/App
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 10.15.2
HBuilderX类型: 正式
HBuilderX版本号: 2.8.8
手机系统: Android
手机系统版本号: Android 5.1
手机厂商: vivo
手机机型: vivo X7
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
在打开页面的上部画板靠右边位置滑动手指
在打开页面的上部画板靠右边位置滑动手指
预期结果:
画出的线条轨迹跟随手指,位置也在画板对应的右边位置
画出的线条轨迹跟随手指,位置也在画板对应的右边位置
实际结果:
线条位置出现在了画板左上角
线条位置出现在了画板左上角
bug描述:
在开发中遇到低版本安卓,canvas画图时表现不一致问题,画出来的线条和位置明显比预期的小很多;
为方便复现演示,示例代码直接使用插件市场里 名称为“canvas的手写签名”模块的代码;
4 个回复
j***@126.com (作者)
官方看到了嘛,,
DCloud_UNI_GSQ
bug 确认,已加分,后续修复
DCloud_UNI_GSQ
HBuilderX alpha 2.9.0+ 已修复
j***@126.com (作者)
收到
2020-09-28 16:21
tomJerry - APP,小程序开发
哎~V3编译BUG 很早以前的BUG了 到现在才解决!
https://ask.dcloud.net.cn/question/97308