<template>
<!-- <uni-popup ref="signCard" type="center" backgroundColor="#fff"> -->
<view class="page flex-row items-center" :canvas="canvas" :change:canvas="canvasSign.setCanvas" :canvasStyle="style"
:change:canvasStyle="canvasSign.setStyle">
<view class="close flex-row justify-center items-center" @click="closeSignCard">
<uni-icons type="closeempty" size="22" color="#333"></uni-icons>
</view>
<view class="flex-col clear-line" @click="clearBoard">
<view class="cancel">取消</view>
</view>
<canvas @touchstart="canvasSign.beginToDraw" @touchmove="canvasSign.processDraw"
@touchend="canvasSign.endDrawing" id="sign" canvas-id="sign" :style="style" class="canvas"></canvas>
<view @click="exportSinaature" class="done flex-row justify-center items-center">完成</view>
</view>
<!-- </uni-popup> -->
<!-- <button @click="openSignCard">我是一個打開按鈕</button> -->
</template>
<script>
import {
reactive,
onMounted,
getCurrentInstance
} from 'vue';
import {
onReady
} from '@dcloudio/uni-app';
export default {
emits: ['getSignPicture'],
data() {
return {
canvas: null,
style:{
height: 600 + 'px',
width: 400 + 'px'
}
};
},
onReady() {
// console.log('进入onReady');
this.canvas = uni.createCanvasContext('sign', this);
console.log('this.canvas', this.canvas);
},
methods: {
exportSinaature() {
uni.canvasToTempFilePath({
canvasId: 'sign',
x: 0,
y: 0,
fileType: 'png',
success(res) {
console.log('成功', res);
// thisconfirmSignCard(res.tempFilePath);
},
fail(err) {
// console.log('失敗',err);
uni.showToast({
icon: 'none',
title: err.errMsg,
duration: 2500
});
}
});
}
}
};
</script>
<script lang="renderjs" module="canvasSign">
// let canvas = null
export default {
data() {
return {
canvas: null,
startPoint: {
x: 0,
y: 0
},
style: {
height: null,
width: null
}
};
},
mounted() {
// ...
// let dom = document.getElementById('sign');
// this.canvas = dom.getContext("2d")
// this.canvas = document.getElementById('sign');
// console.log('this.canvas', this.canvas);
// this.canvas.setStrokeStyle('#333');
},
methods: {
// ...
setStyle(newV, oldV, ownerInstance, instance) {
this.style = newV;
console.log('style', newV);
},
setCanvas(newV, oldV, ownerInstance, instance) {
// canvas = document.getElementById('sign');
this.canvas = newV
// this.canvas.setStrokeStyle('#333');
console.log('canvas', this.canvas);
},
clearBoard() {
canvas.clearRect(0, 0, this.style.height, this.style.width);
canvas.draw();
},
beginToDraw(e) {
console.log('點擊', this.canvas);
this.canvas.lineWidth = 5;
this.canvas.lineCap = 'round';
this.canvas.lineJoin = 'round';
if (this.canvas) {
this.canvas.beginPath();
this.startPoint.x = e.touches[0].x || e.changedTouches[0].x;
this.startPoint.y = e.touches[0].y || e.changedTouches[0].y;
}
},
processDraw(e) {
// console.log('滑動');
// this.drawing(e.touches[0].x || e.changedTouches[0].x, e.touches[0].y || e.changedTouches[0].y);
// this.startPoint.x = e.touches[0].x || e.changedTouches[0].x;
// this.startPoint.y = e.touches[0].y || e.changedTouches[0].y;
},
drawing(x, y) {
// console.log('canvas', canvas);
canvas.moveTo(this.startPoint.x, this.startPoint.y);
canvas.lineTo(x, y);
canvas.stroke();
canvas.draw(true);
},
endDrawing(e) {
console.log('结束啦', this.canvas)
this.startPoint.x = 0;
this.startPoint.y = 0;
}
}
};
</script>
<style scoped>
.canvas {
flex: 1 1 auto;
color: #000;
}
.cancel {
color: #333;
font-size: .9rem;
font-weight: 600;
transform: rotate(90deg);
}
.page {
width: 100%;
height: 100vh;
overflow: hidden;
}
.clear-line {
height: 88%;
width: 55px;
border-right: dashed 1px #979797;
justify-content: flex-end;
padding-bottom: 1rem;
}
.done:active {
transform: scale(.9) rotate(90deg);
transition: all .3s ease;
}
.done {
position: absolute;
bottom: 8%;
right: 5%;
width: 3.2rem;
height: 1.9rem;
line-height: 1.9rem;
background-color: #3173F6;
color: #fff;
font-size: .9rem;
font-weight: 500;
border-radius: .25rem;
transform: rotate(90deg);
z-index: 999;
transition: all .3s ease;
}
.close:active {
transform: scale(.9);
transition: all .3s ease;
}
.close {
position: absolute;
right: 5%;
top: 3%;
font-weight: 600;
width: 3rem;
height: 3rem;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 0 3px #F2F3F7;
z-index: 999;
transition: all .3s ease;
}
</style>
- 发布:2023-05-09 11:37
- 更新:2023-07-24 14:38
- 阅读:382
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 22621.1413
HBuilderX类型: 正式
HBuilderX版本号: 3.7.11
手机系统: Android
手机系统版本号: Android 12
手机厂商: 华为
手机机型: 小米11 Ultra
页面类型: vue
vue版本: vue3
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
拿到实例后,用户触摸并滑动 实现写字板功能。
拿到实例后,用户触摸并滑动 实现写字板功能。
预期结果:
成功绘出路径
成功绘出路径
实际结果:
调用canvas 方法失败。
调用canvas 方法失败。
bug描述:
App 环境下,使用uni.createCanvasContext() 创建canvas 实例,传递给renderjs 模块,使用实例调用canvas方法,全部报错this.canvas.beginPath is not a function。 官方说renderjs可以实现更加流畅的canvas 动画,却没有例子。 用普通VUE实现写字板非常的卡顿, 所以尝试renderjs。试了一天都没有成功,求解啊 是我用的方式不对吗?急急急急急急急急!!!!!!!!! 上传的代码我注释了滑动 @touchmove的部分的回调 processDraw, @touchstart @touchend 只开了这两个事件做方法调用测试。