signature.js 9.7 KB

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