signature.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396
  1. class Handwriting {
  2. // 内置数据
  3. ctx = '';
  4. canvasWidth = 300;
  5. canvasHeight = 900;
  6. linePrack = []; //划线轨迹 ; 生成线条的实际点
  7. currentLine = [];
  8. transparent = 1; // 透明度
  9. pressure = 0.5; // 默认压力
  10. smoothness = 100; //顺滑度,用60的距离来计算速度
  11. lineSize = 1.5; // 笔记倍数
  12. lineMin = 0.5; // 最小笔画半径
  13. lineMax = 2; // 最大笔画半径
  14. currentPoint = {};
  15. firstTouch = true; // 第一次触发
  16. radius = 1; //画圆的半径
  17. cutArea = {
  18. top: 0,
  19. right: 0,
  20. bottom: 0,
  21. left: 0
  22. }; //裁剪区域
  23. lastPoint = 0;
  24. chirography = []; //笔迹
  25. startY = 0;
  26. deltaY = 0;
  27. startValue = 0;
  28. constructor(opts) {
  29. console.log(opts);
  30. this.lineColor = opts.lineColor || '#1A1A1A' // 颜色
  31. this.slideValue = opts.slideValue || 50
  32. this.canvasName = opts.canvasName || 'handWriting'
  33. this.init()
  34. }
  35. init() {
  36. this.ctx = uni.createCanvasContext(this.canvasName)
  37. var query = uni.createSelectorQuery();
  38. query.select('.handCenter').boundingClientRect(rect => {
  39. console.log(rect)
  40. this.canvasWidth = rect.width;
  41. this.canvasHeight = rect.height;
  42. }).exec();
  43. this.selectSlideValue(this.slideValue);
  44. }
  45. // 笔迹开始
  46. uploadScaleStart(event) {
  47. console.log('start');
  48. let e = event.mp
  49. console.log(e.touches[0])
  50. if (e.type != 'touchstart') return false;
  51. this.ctx.setFillStyle(this.lineColor); // 初始线条设置颜色
  52. this.ctx.setGlobalAlpha(this.transparent); // 设置半透明
  53. this.currentPoint = {
  54. x: e.touches[0].x,
  55. y: e.touches[0].y
  56. }
  57. this.currentLine.unshift({
  58. time: new Date().getTime(),
  59. dis: 0,
  60. x: this.currentPoint.x,
  61. y: this.currentPoint.y
  62. })
  63. if (this.firstTouch) {
  64. this.cutArea = {
  65. top: this.currentPoint.y,
  66. right: this.currentPoint.x,
  67. bottom: this.currentPoint.y,
  68. left: this.currentPoint.x
  69. }
  70. this.firstTouch = false
  71. }
  72. this.pointToLine(this.currentLine);
  73. }
  74. // 笔迹移动
  75. uploadScaleMove(event) {
  76. console.log('move');
  77. let e = event.mp
  78. if (e.type != 'touchmove') return false;
  79. if (e.cancelable) {
  80. // 判断默认行为是否已经被禁用
  81. if (!e.defaultPrevented) {
  82. e.preventDefault();
  83. }
  84. }
  85. let point = {
  86. x: e.touches[0].x,
  87. y: e.touches[0].y
  88. }
  89. //测试裁剪
  90. if (point.y < this.cutArea.top) {
  91. this.cutArea.top = point.y;
  92. }
  93. if (point.y < 0) this.cutArea.top = 0;
  94. if (point.x > this.cutArea.right) {
  95. this.cutArea.right = point.x;
  96. }
  97. if (this.canvasWidth - point.x <= 0) {
  98. this.cutArea.right = this.canvasWidth;
  99. }
  100. if (point.y > this.cutArea.bottom) {
  101. this.cutArea.bottom = point.y;
  102. }
  103. if (this.canvasHeight - point.y <= 0) {
  104. this.cutArea.bottom = this.canvasHeight;
  105. }
  106. if (point.x < this.cutArea.left) {
  107. this.cutArea.left = point.x;
  108. }
  109. if (point.x < 0) this.cutArea.left = 0;
  110. this.lastPoint = this.currentPoint;
  111. this.currentPoint = point
  112. this.currentLine.unshift({
  113. time: new Date().getTime(),
  114. dis: this.distance(this.currentPoint, this.lastPoint, 'move'),
  115. x: point.x,
  116. y: point.y
  117. })
  118. this.pointToLine(this.currentLine);
  119. }
  120. // 笔迹结束
  121. uploadScaleEnd(event) {
  122. let e = event.mp
  123. if (e.type != 'touchend') return 0;
  124. console.log(e);
  125. let point = {
  126. x: e.changedTouches[0].x,
  127. y: e.changedTouches[0].y
  128. }
  129. this.lastPoint = this.currentPoint;
  130. this.currentPoint = point
  131. this.currentLine.unshift({
  132. time: new Date().getTime(),
  133. dis: this.distance(this.currentPoint, this.lastPoint, 'end'),
  134. x: point.x,
  135. y: point.y
  136. })
  137. if (this.currentLine.length > 2) {
  138. var info = (this.currentLine[0].time - this.currentLine[this.currentLine.length - 1].time) / this.currentLine.length;
  139. //$("#info").text(info.toFixed(2));
  140. }
  141. //一笔结束,保存笔迹的坐标点,清空,当前笔迹
  142. //增加判断是否在手写区域;
  143. this.pointToLine(this.currentLine);
  144. var currentChirography = {
  145. lineSize: this.lineSize,
  146. lineColor: this.lineColor
  147. };
  148. this.chirography.unshift(currentChirography);
  149. this.linePrack.unshift(this.currentLine);
  150. this.currentLine = []
  151. }
  152. retDraw() {
  153. this.ctx.clearRect(0, 0, 700, 730)
  154. this.ctx.draw()
  155. }
  156. //画两点之间的线条;参数为:line,会绘制最近的开始的两个点;
  157. pointToLine(line) {
  158. this.calcBethelLine(line);
  159. // this.calcBethelLine1(line);
  160. return;
  161. }
  162. //计算插值的方式;
  163. calcBethelLine(line) {
  164. if (line.length <= 1) {
  165. line[0].r = this.radius;
  166. return;
  167. }
  168. let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0,
  169. time = 0,
  170. curveValue = 0.5;
  171. if (line.length <= 2) {
  172. x0 = line[1].x
  173. y0 = line[1].y
  174. x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
  175. y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
  176. //x2 = line[1].x;
  177. //y2 = line[1].y;
  178. x1 = x0 + (x2 - x0) * curveValue;
  179. y1 = y0 + (y2 - y0) * curveValue;;
  180. } else {
  181. x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
  182. y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
  183. x1 = line[1].x;
  184. y1 = line[1].y;
  185. x2 = x1 + (line[0].x - x1) * curveValue;
  186. y2 = y1 + (line[0].y - y1) * curveValue;
  187. }
  188. //从计算公式看,三个点分别是(x0,y0),(x1,y1),(x2,y2) ;(x1,y1)这个是控制点,控制点不会落在曲线上;实际上,这个点还会手写获取的实际点,却落在曲线上
  189. len = this.distance({
  190. x: x2,
  191. y: y2
  192. }, {
  193. x: x0,
  194. y: y0
  195. }, 'calc');
  196. lastRadius = this.radius;
  197. for (let n = 0; n < line.length - 1; n++) {
  198. dis += line[n].dis;
  199. time += line[n].time - line[n + 1].time;
  200. if (dis > this.smoothness) break;
  201. }
  202. this.radius = Math.min(time / len * this.pressure + this.lineMin, this.lineMax) * this.lineSize
  203. line[0].r = this.radius;
  204. //计算笔迹半径;
  205. if (line.length <= 2) {
  206. r0 = (lastRadius + this.radius) / 2;
  207. r1 = r0;
  208. r2 = r1;
  209. //return;
  210. } else {
  211. r0 = (line[2].r + line[1].r) / 2;
  212. r1 = line[1].r;
  213. r2 = (line[1].r + line[0].r) / 2;
  214. }
  215. let n = 5;
  216. let point = [];
  217. for (let i = 0; i < n; i++) {
  218. let t = i / (n - 1);
  219. let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
  220. let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
  221. let r = lastRadius + (this.radius - lastRadius) / n * i;
  222. point.push({
  223. x: x,
  224. y: y,
  225. r: r
  226. });
  227. if (point.length == 3) {
  228. let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r);
  229. a[0].color = this.lineColor;
  230. this.bethelDraw(a, 1);
  231. point = [{
  232. x: x,
  233. y: y,
  234. r: r
  235. }];
  236. }
  237. }
  238. }
  239. //求两点之间距离
  240. distance(a, b, type) {
  241. let x = b.x - a.x;
  242. let y = b.y - a.y;
  243. return Math.sqrt(x * x + y * y) * 5;
  244. }
  245. ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
  246. let a = [],
  247. vx01, vy01, norm, n_x0, n_y0, vx21, vy21, n_x2, n_y2;
  248. vx01 = x1 - x0;
  249. vy01 = y1 - y0;
  250. norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
  251. vx01 = vx01 / norm * r0;
  252. vy01 = vy01 / norm * r0;
  253. n_x0 = vy01;
  254. n_y0 = -vx01;
  255. vx21 = x1 - x2;
  256. vy21 = y1 - y2;
  257. norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
  258. vx21 = vx21 / norm * r2;
  259. vy21 = vy21 / norm * r2;
  260. n_x2 = -vy21;
  261. n_y2 = vx21;
  262. a.push({
  263. mx: x0 + n_x0,
  264. my: y0 + n_y0,
  265. color: "#1A1A1A"
  266. });
  267. a.push({
  268. c1x: x1 + n_x0,
  269. c1y: y1 + n_y0,
  270. c2x: x1 + n_x2,
  271. c2y: y1 + n_y2,
  272. ex: x2 + n_x2,
  273. ey: y2 + n_y2
  274. });
  275. a.push({
  276. c1x: x2 + n_x2 - vx21,
  277. c1y: y2 + n_y2 - vy21,
  278. c2x: x2 - n_x2 - vx21,
  279. c2y: y2 - n_y2 - vy21,
  280. ex: x2 - n_x2,
  281. ey: y2 - n_y2
  282. });
  283. a.push({
  284. c1x: x1 - n_x2,
  285. c1y: y1 - n_y2,
  286. c2x: x1 - n_x0,
  287. c2y: y1 - n_y0,
  288. ex: x0 - n_x0,
  289. ey: y0 - n_y0
  290. });
  291. a.push({
  292. c1x: x0 - n_x0 - vx01,
  293. c1y: y0 - n_y0 - vy01,
  294. c2x: x0 + n_x0 - vx01,
  295. c2y: y0 + n_y0 - vy01,
  296. ex: x0 + n_x0,
  297. ey: y0 + n_y0
  298. });
  299. a[0].mx = a[0].mx.toFixed(1);
  300. a[0].mx = parseFloat(a[0].mx);
  301. a[0].my = a[0].my.toFixed(1);
  302. a[0].my = parseFloat(a[0].my);
  303. for (let i = 1; i < a.length; i++) {
  304. a[i].c1x = a[i].c1x.toFixed(1);
  305. a[i].c1x = parseFloat(a[i].c1x);
  306. a[i].c1y = a[i].c1y.toFixed(1);
  307. a[i].c1y = parseFloat(a[i].c1y);
  308. a[i].c2x = a[i].c2x.toFixed(1);
  309. a[i].c2x = parseFloat(a[i].c2x);
  310. a[i].c2y = a[i].c2y.toFixed(1);
  311. a[i].c2y = parseFloat(a[i].c2y);
  312. a[i].ex = a[i].ex.toFixed(1);
  313. a[i].ex = parseFloat(a[i].ex);
  314. a[i].ey = a[i].ey.toFixed(1);
  315. a[i].ey = parseFloat(a[i].ey);
  316. }
  317. return a;
  318. }
  319. bethelDraw(point, is_fill, color) {
  320. this.ctx.beginPath();
  321. this.ctx.moveTo(point[0].mx, point[0].my);
  322. if (undefined != color) {
  323. this.ctx.setFillStyle(color);
  324. this.ctx.setStrokeStyle(color);
  325. } else {
  326. this.ctx.setFillStyle(point[0].color);
  327. this.ctx.setStrokeStyle(point[0].color);
  328. }
  329. for (let i = 1; i < point.length; i++) {
  330. this.ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey);
  331. }
  332. this.ctx.stroke();
  333. if (undefined != is_fill) {
  334. this.ctx.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
  335. }
  336. this.ctx.draw(true)
  337. }
  338. selectColorEvent(lineColor) {
  339. this.lineColor = lineColor;
  340. }
  341. selectSlideValue(slideValue) {
  342. switch (slideValue) {
  343. case 0:
  344. this.lineSize = 0.1;
  345. this.lineMin = 0.1;
  346. this.lineMax = 0.1;
  347. break;
  348. case 25:
  349. this.lineSize = 1;
  350. this.lineMin = 0.5;
  351. this.lineMax = 2;
  352. break;
  353. case 50:
  354. this.lineSize = 1.5;
  355. this.lineMin = 1;
  356. this.lineMax = 3;
  357. break;
  358. case 75:
  359. this.lineSize = 1.5;
  360. this.lineMin = 2;
  361. this.lineMax = 3.5;
  362. break;
  363. case 100:
  364. this.lineSize = 3;
  365. this.lineMin = 2;
  366. this.lineMax = 3.5;
  367. break;
  368. }
  369. }
  370. saveCanvas(){
  371. return new Promise((resolve,rej) => {
  372. uni.canvasToTempFilePath({
  373. canvasId: this.canvasName,
  374. success: function(res) {
  375. console.log(res, res.tempFilePath)
  376. resolve(res.tempFilePath);
  377. },
  378. fail:function(err){
  379. console.log('图片生成失败:'+err)
  380. rej(err);
  381. }
  382. })
  383. })
  384. }
  385. }
  386. export default Handwriting;