uniapp canvas 手写毛笔字效果 根据触屏时长改变笔画粗细

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<template>
<view @touchmove.stop.prevent="moveHandle">
<view class="signature" v-show="showCanvas">
<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" ref="canvas"></canvas>
<view class="footer">
<view class="left" @click="finish">确认上传</view>
<view class="right" @click="clear">清除笔迹</view>
</view>
</view>
</view>
</template>
<script>
// import Util from "@/utils/httpUtil.js";
// import Local from "@/utils/local.js";
var x = 20;
var y = 20;
export default {
data() {
return {
showCanvas: false,
ctx: '', //绘图图像
points: [], //路径点集合
signature: '',
lasloc: { x: 0, y: 0 },
lasTimeStamp: 0,
laslinewidth: -1,
ResultLineWidth: 1
};
},
mounted() {},
onShow() {
this.createCanvas();
let that = this;
// setTimeout(function() {
//
// 笔迹反显
//
if (Local.local.getItem("canvasPath")) {
//
let imgPath = Local.local.getItem("canvasPath");
//
const sInfo = uni.getSystemInfoSync();
//
that.ctx.drawImage(
//
imgPath,
//
0,
//
0,
//
sInfo.windowWidth,
//
sInfo.windowHeight
//
);
//
that.ctx.draw(true);
//
}
// }, 500);
},
methods: {
moveHandle() {},
//关闭并清空画布
close: function() {
this.showCanvas = false;
this.clear();
},
//创建并显示画布
createCanvas: function() {
this.showCanvas = true;
this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
//设置画笔样式
this.ctx.lineWidth = 8;
this.ctx.strokeStyle = 'rgb(230,11,9)';
this.ctx.lineCap = 'round';
this.ctx.lineJoin = 'round';
},
//触摸开始，获取到起点
touchstart: function(e) {
let startX = e.changedTouches[0].x;
let startY = e.changedTouches[0].y;
let startPoint = { X: startX, Y: startY };
this.points.push(startPoint);
this.lasloc = this.windowToCanvas(startX, startY);
this.lasTimeStamp = new Date().getTime();
//每次触摸开始，开启新的路径
this.ctx.beginPath();
},
//触摸移动，获取到路径点
touchmove: function(e) {
let moveX = e.changedTouches[0].x;
let moveY = e.changedTouches[0].y;
var curloc = this.windowToCanvas(moveX, moveY);
var curTimeStamp = new Date().getTime();
var s = this.calDistangce(curloc, this.lasloc);
var t = curTimeStamp - this.lasTimeStamp;
var lineWidth = this.CalClientWidth(t, s);
this.ctx.lineWidth = lineWidth;
this.lasloc = curloc;
this.lasTimeStamp = curTimeStamp;
this.laslinewidth = this.ResultLineWidth;
let movePoint = { X: moveX, Y: moveY };
this.points.push(movePoint); //存点
let len = this.points.length;
if (len >= 2) {
this.draw(); //绘制路径
}
},
// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
touchend: function() {
this.points = [];
},
/* ***********************************************
#
绘制笔迹
#
1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
#
2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
#
3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
************************************************ */
draw: function() {
let point1 = this.points[0];
let point2 = this.points[1];
this.points.shift();
this.ctx.moveTo(point1.X, point1.Y);
this.ctx.lineTo(point2.X, point2.Y);
this.ctx.stroke();
this.ctx.draw(true);
},
//清空画布
clear: function() {
let that = this;
uni.getSystemInfo({
success: function(res) {
let canvasw = res.windowWidth;
let canvash = res.windowHeight;
that.ctx.clearRect(0, 0, canvasw, canvash);
that.ctx.draw(true);
}
});
},
//完成绘画并保存到本地
finish: function() {
let that = this;
uni.canvasToTempFilePath({
canvasId: 'mycanvas',
success: function(res) {
console.log(res);
Local.local.setItem('canvasPath', res.tempFilePath);
uni.uploadFile({
url: Util.fileUrl + '/file/objects', //仅为示例，非真实的接口地址
filePath: res.tempFilePath,
name: 'file',
header: {
authorization: Local.local.getItem('token')
},
success: uploadFileRes => {
let data = JSON.parse(uploadFileRes.data).data;
console.log(data);
Local.local.setItem('signImg', data.uri);
that.clear();
that.$Common.user.linkBack(1);
}
});
}
});
},
//屏幕坐标点转化为canvas画布坐标	,定位canvas画布上的坐标
windowToCanvas: function(x, y) {
//包含canvas距离画布的上和左边距
var bbox = this.$refs.canvas.$el.getBoundingClientRect();
return { x: Math.round(x - bbox.left), y: Math.round(y - bbox.top) };
},
//通过两点计算出两点之间距离
calDistangce: function(loc1, loc2) {
return Math.sqrt((loc1.x - loc2.x) * (loc1.x - loc2.x) + (loc1.y - loc2.y) * (loc1.y - loc2.y));
},
//笔画速度越快，笔越细，反之越粗！
CalClientWidth: function(t, s) {
var maxlinewidth = 28;
var minlinewidth = 1;
var maxlinespeed = 10;
var minlinespeed = 0.1;
var v = s / t;
var ResultLineWidth;
//处理速度很慢和很快的情况
if (v <= minlinespeed) ResultLineWidth = maxlinewidth;
else if (v >= maxlinespeed) ResultLineWidth = minlinewidth;
else ResultLineWidth = maxlinewidth - ((v - minlinespeed) / (maxlinespeed - minlinespeed)) * (maxlinewidth - minlinewidth);
if (this.laslinewidth == -1) return ResultLineWidth;
return (this.laslinewidth * 2) / 3 + (ResultLineWidth * 1) / 3;
}
}
};
</script>
<style>
.signature {
position: fixed;
top: 10px;
left: 2%;
z-index: 999;
width: 96%;
}
page {
background: #fff;
}
.container {
padding: 20rpx 0 120rpx 0;
box-sizing: border-box;
}
.title {
height: 50upx;
line-height: 50upx;
font-size: 16px;
}
.mycanvas {
width: 100%;
height: calc(100vh - 220upx);
background-color: #ececec;
}
.footer {
font-size: 14px;
height: 150upx;
display: flex;
justify-content: space-around;
align-items: center;
}
.left,
.right {
line-height: 100upx;
height: 100upx;
width: 300upx;
text-align: center;
font-weight: bold;
color: white;
border-radius: 5upx;
}
.left {
background: #007aff;
}
.right {
background: orange;
}
</style>