signature.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544
  1. const app = getApp();
  2. const util = require("../../../util/util.js")
  3. Page({
  4. /**
  5. * 页面的初始数据
  6. */
  7. data: {
  8. canvasName: 'handWriting',
  9. ctx: '',
  10. canvasWidth: 0,
  11. canvasHeight: 0,
  12. transparent: 1, // 透明度
  13. selectColor: 'black',
  14. lineColor: '#1A1A1A', // 颜色
  15. lineSize: 1.5, // 笔记倍数
  16. lineMin: 0.5, // 最小笔画半径
  17. lineMax: 4, // 最大笔画半径
  18. pressure: 1, // 默认压力
  19. smoothness: 60, //顺滑度,用60的距离来计算速度
  20. currentPoint: {},
  21. currentLine: [], // 当前线条
  22. firstTouch: true, // 第一次触发
  23. radius: 1, //画圆的半径
  24. cutArea: {
  25. top: 0,
  26. right: 0,
  27. bottom: 0,
  28. left: 0
  29. }, //裁剪区域
  30. bethelPoint: [], //保存所有线条 生成的贝塞尔点;
  31. lastPoint: 0,
  32. chirography: [], //笔迹
  33. currentChirography: {}, //当前笔迹
  34. linePrack: [] //划线轨迹 , 生成线条的实际点
  35. },
  36. /*======所有自定义函数======*/
  37. // 笔迹开始
  38. uploadScaleStart(e) {
  39. if (e.type != 'touchstart') return false;
  40. let ctx = this.data.ctx;
  41. ctx.setFillStyle(this.data.lineColor); // 初始线条设置颜色
  42. ctx.setGlobalAlpha(this.data.transparent); // 设置半透明
  43. let currentPoint = {
  44. x: e.touches[0].x,
  45. y: e.touches[0].y
  46. }
  47. let currentLine = this.data.currentLine;
  48. currentLine.unshift({
  49. time: new Date().getTime(),
  50. dis: 0,
  51. x: currentPoint.x,
  52. y: currentPoint.y
  53. })
  54. this.setData({
  55. currentPoint,
  56. // currentLine
  57. })
  58. if (this.data.firstTouch) {
  59. this.setData({
  60. cutArea: {
  61. top: currentPoint.y,
  62. right: currentPoint.x,
  63. bottom: currentPoint.y,
  64. left: currentPoint.x
  65. },
  66. firstTouch: false
  67. })
  68. }
  69. this.pointToLine(currentLine);
  70. },
  71. // 笔迹移动
  72. uploadScaleMove(e) {
  73. if (e.type != 'touchmove') return false;
  74. if (e.cancelable) {
  75. // 判断默认行为是否已经被禁用
  76. if (!e.defaultPrevented) {
  77. e.preventDefault();
  78. }
  79. }
  80. let point = {
  81. x: e.touches[0].x,
  82. y: e.touches[0].y
  83. }
  84. //测试裁剪
  85. if (point.y < this.data.cutArea.top) {
  86. this.data.cutArea.top = point.y;
  87. }
  88. if (point.y < 0) this.data.cutArea.top = 0;
  89. if (point.x > this.data.cutArea.right) {
  90. this.data.cutArea.right = point.x;
  91. }
  92. if (this.data.canvasWidth - point.x <= 0) {
  93. this.data.cutArea.right = this.data.canvasWidth;
  94. }
  95. if (point.y > this.data.cutArea.bottom) {
  96. this.data.cutArea.bottom = point.y;
  97. }
  98. if (this.data.canvasHeight - point.y <= 0) {
  99. this.data.cutArea.bottom = this.data.canvasHeight;
  100. }
  101. if (point.x < this.data.cutArea.left) {
  102. this.data.cutArea.left = point.x;
  103. }
  104. if (point.x < 0) this.data.cutArea.left = 0;
  105. this.setData({
  106. lastPoint: this.data.currentPoint,
  107. currentPoint: point
  108. })
  109. let currentLine = this.data.currentLine
  110. currentLine.unshift({
  111. time: new Date().getTime(),
  112. dis: this.distance(this.data.currentPoint, this.data.lastPoint),
  113. x: point.x,
  114. y: point.y
  115. })
  116. // this.setData({
  117. // currentLine
  118. // })
  119. this.pointToLine(currentLine);
  120. },
  121. // 笔迹结束
  122. uploadScaleEnd(e) {
  123. if (e.type != 'touchend') return 0;
  124. let point = {
  125. x: e.changedTouches[0].x,
  126. y: e.changedTouches[0].y
  127. }
  128. this.setData({
  129. lastPoint: this.data.currentPoint,
  130. currentPoint: point
  131. })
  132. let currentLine = this.data.currentLine
  133. currentLine.unshift({
  134. time: new Date().getTime(),
  135. dis: this.distance(this.data.currentPoint, this.data.lastPoint),
  136. x: point.x,
  137. y: point.y
  138. })
  139. if (currentLine.length > 2) {
  140. var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length;
  141. //$("#info").text(info.toFixed(2));
  142. }
  143. //一笔结束,保存笔迹的坐标点,清空,当前笔迹
  144. //增加判断是否在手写区域;
  145. this.pointToLine(currentLine);
  146. var currentChirography = {
  147. lineSize: this.data.lineSize,
  148. lineColor: this.data.lineColor
  149. };
  150. var chirography = this.data.chirography
  151. chirography.unshift(currentChirography);
  152. this.setData({
  153. chirography
  154. })
  155. var linePrack = this.data.linePrack
  156. linePrack.unshift(this.data.currentLine);
  157. this.setData({
  158. linePrack,
  159. currentLine: []
  160. })
  161. },
  162. retDraw() {
  163. this.data.ctx.clearRect(0, 0, 700, 730)
  164. this.data.ctx.draw();
  165. //设置canvas背景
  166. this.setCanvasBg("#fff");
  167. },
  168. //画两点之间的线条;参数为:line,会绘制最近的开始的两个点;
  169. pointToLine(line) {
  170. this.calcBethelLine(line);
  171. return;
  172. },
  173. //计算插值的方式;
  174. calcBethelLine(line) {
  175. if (line.length <= 1) {
  176. line[0].r = this.data.radius;
  177. return;
  178. }
  179. let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0,
  180. time = 0,
  181. curveValue = 0.5;
  182. if (line.length <= 2) {
  183. x0 = line[1].x
  184. y0 = line[1].y
  185. x2 = line[1].x + (line[0].x - line[1].x) * curveValue;
  186. y2 = line[1].y + (line[0].y - line[1].y) * curveValue;
  187. //x2 = line[1].x;
  188. //y2 = line[1].y;
  189. x1 = x0 + (x2 - x0) * curveValue;
  190. y1 = y0 + (y2 - y0) * curveValue;;
  191. } else {
  192. x0 = line[2].x + (line[1].x - line[2].x) * curveValue;
  193. y0 = line[2].y + (line[1].y - line[2].y) * curveValue;
  194. x1 = line[1].x;
  195. y1 = line[1].y;
  196. x2 = x1 + (line[0].x - x1) * curveValue;
  197. y2 = y1 + (line[0].y - y1) * curveValue;
  198. }
  199. //从计算公式看,三个点分别是(x0,y0),(x1,y1),(x2,y2) ;(x1,y1)这个是控制点,控制点不会落在曲线上;实际上,这个点还会手写获取的实际点,却落在曲线上
  200. len = this.distance({
  201. x: x2,
  202. y: y2
  203. }, {
  204. x: x0,
  205. y: y0
  206. });
  207. lastRadius = this.data.radius;
  208. for (let n = 0; n < line.length - 1; n++) {
  209. dis += line[n].dis;
  210. time += line[n].time - line[n + 1].time;
  211. if (dis > this.data.smoothness) break;
  212. }
  213. this.setData({
  214. radius: Math.min(time / len * this.data.pressure + this.data.lineMin, this.data.lineMax) * this.data.lineSize
  215. });
  216. line[0].r = this.data.radius;
  217. //计算笔迹半径;
  218. if (line.length <= 2) {
  219. r0 = (lastRadius + this.data.radius) / 2;
  220. r1 = r0;
  221. r2 = r1;
  222. //return;
  223. } else {
  224. r0 = (line[2].r + line[1].r) / 2;
  225. r1 = line[1].r;
  226. r2 = (line[1].r + line[0].r) / 2;
  227. }
  228. let n = 5;
  229. let point = [];
  230. for (let i = 0; i < n; i++) {
  231. let t = i / (n - 1);
  232. let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2;
  233. let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2;
  234. let r = lastRadius + (this.data.radius - lastRadius) / n * i;
  235. point.push({
  236. x: x,
  237. y: y,
  238. r: r
  239. });
  240. if (point.length == 3) {
  241. 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);
  242. a[0].color = this.data.lineColor;
  243. // let bethelPoint = this.data.bethelPoint;
  244. // console.log(a)
  245. // console.log(this.data.bethelPoint)
  246. // bethelPoint = bethelPoint.push(a);
  247. this.bethelDraw(a, 1);
  248. point = [{
  249. x: x,
  250. y: y,
  251. r: r
  252. }];
  253. }
  254. }
  255. this.setData({
  256. currentLine: line
  257. })
  258. },
  259. //求两点之间距离
  260. distance(a, b) {
  261. let x = b.x - a.x;
  262. let y = b.y - a.y;
  263. return Math.sqrt(x * x + y * y);
  264. },
  265. ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
  266. let a = [],
  267. vx01, vy01, norm, n_x0, n_y0, vx21, vy21, n_x2, n_y2;
  268. vx01 = x1 - x0;
  269. vy01 = y1 - y0;
  270. norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2;
  271. vx01 = vx01 / norm * r0;
  272. vy01 = vy01 / norm * r0;
  273. n_x0 = vy01;
  274. n_y0 = -vx01;
  275. vx21 = x1 - x2;
  276. vy21 = y1 - y2;
  277. norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2;
  278. vx21 = vx21 / norm * r2;
  279. vy21 = vy21 / norm * r2;
  280. n_x2 = -vy21;
  281. n_y2 = vx21;
  282. a.push({
  283. mx: x0 + n_x0,
  284. my: y0 + n_y0,
  285. color: "#1A1A1A"
  286. });
  287. a.push({
  288. c1x: x1 + n_x0,
  289. c1y: y1 + n_y0,
  290. c2x: x1 + n_x2,
  291. c2y: y1 + n_y2,
  292. ex: x2 + n_x2,
  293. ey: y2 + n_y2
  294. });
  295. a.push({
  296. c1x: x2 + n_x2 - vx21,
  297. c1y: y2 + n_y2 - vy21,
  298. c2x: x2 - n_x2 - vx21,
  299. c2y: y2 - n_y2 - vy21,
  300. ex: x2 - n_x2,
  301. ey: y2 - n_y2
  302. });
  303. a.push({
  304. c1x: x1 - n_x2,
  305. c1y: y1 - n_y2,
  306. c2x: x1 - n_x0,
  307. c2y: y1 - n_y0,
  308. ex: x0 - n_x0,
  309. ey: y0 - n_y0
  310. });
  311. a.push({
  312. c1x: x0 - n_x0 - vx01,
  313. c1y: y0 - n_y0 - vy01,
  314. c2x: x0 + n_x0 - vx01,
  315. c2y: y0 + n_y0 - vy01,
  316. ex: x0 + n_x0,
  317. ey: y0 + n_y0
  318. });
  319. a[0].mx = a[0].mx.toFixed(1);
  320. a[0].mx = parseFloat(a[0].mx);
  321. a[0].my = a[0].my.toFixed(1);
  322. a[0].my = parseFloat(a[0].my);
  323. for (let i = 1; i < a.length; i++) {
  324. a[i].c1x = a[i].c1x.toFixed(1);
  325. a[i].c1x = parseFloat(a[i].c1x);
  326. a[i].c1y = a[i].c1y.toFixed(1);
  327. a[i].c1y = parseFloat(a[i].c1y);
  328. a[i].c2x = a[i].c2x.toFixed(1);
  329. a[i].c2x = parseFloat(a[i].c2x);
  330. a[i].c2y = a[i].c2y.toFixed(1);
  331. a[i].c2y = parseFloat(a[i].c2y);
  332. a[i].ex = a[i].ex.toFixed(1);
  333. a[i].ex = parseFloat(a[i].ex);
  334. a[i].ey = a[i].ey.toFixed(1);
  335. a[i].ey = parseFloat(a[i].ey);
  336. }
  337. return a;
  338. },
  339. bethelDraw(point, is_fill, color) {
  340. let ctx = this.data.ctx;
  341. ctx.beginPath();
  342. ctx.moveTo(point[0].mx, point[0].my);
  343. if (undefined != color) {
  344. ctx.setFillStyle(color);
  345. ctx.setStrokeStyle(color);
  346. } else {
  347. ctx.setFillStyle(point[0].color);
  348. ctx.setStrokeStyle(point[0].color);
  349. }
  350. for (let i = 1; i < point.length; i++) {
  351. ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey);
  352. }
  353. ctx.stroke();
  354. if (undefined != is_fill) {
  355. ctx.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
  356. }
  357. ctx.draw(true)
  358. },
  359. selectColorEvent(event) {
  360. console.log(event)
  361. var color = event.currentTarget.dataset.colorValue;
  362. var colorSelected = event.currentTarget.dataset.color;
  363. this.setData({
  364. selectColor: colorSelected,
  365. lineColor: color
  366. })
  367. },
  368. //将Canvas内容转成 临时图片 --> cb 为回调函数 形参 tempImgPath 为 生成的图片临时路径
  369. canvasToImg(cb) { //这种写法移动端 出不来
  370. this.data.ctx.draw(true, () => {
  371. wx.canvasToTempFilePath({
  372. canvasId: 'handWriting',
  373. fileType: 'png',
  374. quality: 1, //图片质量
  375. success(res) {
  376. // console.log(res.tempFilePath, 'canvas生成图片地址');
  377. wx.showToast({
  378. title: '执行了吗?',
  379. })
  380. cb(res.tempFilePath);
  381. }
  382. })
  383. });
  384. },
  385. doSaveServer( err, {url} ){
  386. let method='/maker/addContractImg';
  387. util.http( method, {url}, (err,res)=>{
  388. if( err!= 0 ) return;
  389. util.showSuccess("合同签约成功")
  390. })
  391. },
  392. //完成
  393. subCanvas() {
  394. wx.canvasToTempFilePath({
  395. canvasId: 'handWriting',
  396. fileType: 'jpg',
  397. quality: 1, //图片质量
  398. success: (res)=> {
  399. util.uploadFile(res.tempFilePath, this.doSaveServer)
  400. }
  401. })
  402. },
  403. //保存到相册
  404. saveCanvasAsImg() {
  405. wx.canvasToTempFilePath({
  406. canvasId: 'handWriting',
  407. fileType: 'png',
  408. quality: 1, //图片质量
  409. success(res) {
  410. wx.saveImageToPhotosAlbum({
  411. filePath: res.tempFilePath,
  412. success(res) {
  413. wx.showToast({
  414. title: '已保存到相册',
  415. duration: 2000
  416. });
  417. }
  418. })
  419. }
  420. })
  421. },
  422. //预览
  423. previewCanvasImg() {
  424. wx.canvasToTempFilePath({
  425. canvasId: 'handWriting',
  426. fileType: 'jpg',
  427. quality: 1, //图片质量
  428. success(res) {
  429. wx.previewImage({
  430. urls: [res.tempFilePath], //预览图片 数组
  431. })
  432. }
  433. })
  434. },
  435. //设置canvas背景色 不设置 导出的canvas的背景为透明
  436. //@params:字符串 color
  437. setCanvasBg(color) {
  438. /* 将canvas背景设置为 白底,不设置 导出的canvas的背景为透明 */
  439. //rect() 参数说明 矩形路径左上角的横坐标,左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
  440. //这里是 canvasHeight - 4 是因为下边盖住边框了,所以手动减了写
  441. this.data.ctx.rect(0, 0, this.data.canvasWidth, this.data.canvasHeight - 4);
  442. // ctx.setFillStyle('red')
  443. this.data.ctx.setFillStyle(color)
  444. this.data.ctx.fill() //设置填充
  445. this.data.ctx.draw() //开画
  446. },
  447. /*======所有自定义函数=END=====*/
  448. /**
  449. * 生命周期函数--监听页面加载
  450. */
  451. onLoad: function (options) {
  452. let canvasName = this.data.canvasName
  453. let ctx = wx.createCanvasContext(canvasName)
  454. this.setData({
  455. ctx: ctx
  456. })
  457. var query = wx.createSelectorQuery();
  458. query.select('.handCenter').boundingClientRect(rect => {
  459. this.setData({
  460. canvasWidth: rect.width,
  461. canvasHeight: rect.height
  462. })
  463. /* 将canvas背景设置为 白底,不设置 导出的canvas的背景为透明 */
  464. this.setCanvasBg('#fff');
  465. }).exec();
  466. },
  467. goBack(){
  468. wx.navigateBack({
  469. delta: 1,
  470. })
  471. },
  472. /**
  473. * 生命周期函数--监听页面初次渲染完成
  474. */
  475. onReady: function () {
  476. },
  477. /**
  478. * 生命周期函数--监听页面显示
  479. */
  480. onShow: function () {
  481. },
  482. /**
  483. * 生命周期函数--监听页面隐藏
  484. */
  485. onHide: function () {
  486. },
  487. /**
  488. * 生命周期函数--监听页面卸载
  489. */
  490. onUnload: function () {
  491. },
  492. /**
  493. * 页面相关事件处理函数--监听用户下拉动作
  494. */
  495. onPullDownRefresh: function () {
  496. },
  497. /**
  498. * 页面上拉触底事件的处理函数
  499. */
  500. onReachBottom: function () {
  501. },
  502. /**
  503. * 用户点击右上角分享
  504. */
  505. onShareAppMessage: function () {
  506. }
  507. })