微信小程序 |
您所在的位置：网站首页 › 一笔一划学写字小程序 › 微信小程序 |
微信小程序
|
摘要
计算机的发明让手写受到毁灭性打击，但手写的经典不能埋没，这是一款手写签名工具，根据手写速度计算笔宽，很有毛笔的风韵，请拿去使用。 效果
体验途径：画布系列>写字板 js Page({ data: { canvasName: 'handWriting', ctx: '', canvasWidth: 0, canvasHeight: 0, transparent: 1, // 透明度 selectColor: 'black', lineColor: '#1a1a1a', // 颜色 lineSize: 1.5, // 笔迹倍数 lineMin: 0.5, // 最小笔画半径 lineMax: 8, // 最大笔画半径 pressure: 1, // 默认压力 smoothness: 60, //顺滑度，用60的距离来计算速度 currentPoint: {}, currentLine: [], // 当前线条 firstTouch: true, // 第一次触发 radius: 1, //画圆的半径 cutArea: { top: 0, right: 0, bottom: 0, left: 0 }, //裁剪区域 bethelPoint: [], //保存所有线条 生成的贝塞尔点； lastPoint: 0, chirography: [], //笔迹 currentChirography: {}, //当前笔迹 linePrack: [],//划线轨迹 , 生成线条的实际点 half: 0 //绘制一半点 }, onLoad() { let canvasName = this.data.canvasName let ctx = wx.createCanvasContext(canvasName) this.setData({ ctx: ctx }) var query = wx.createSelectorQuery(); query.select('.handCenter').boundingClientRect(rect => { this.setData({ canvasWidth: rect.width, canvasHeight: rect.height }) /* 将canvas背景设置为 白底，不设置 导出的canvas的背景为透明 */ this.setCanvasBg('#fff'); }).exec(); }, // 笔迹开始 uploadScaleStart(e) { if (e.type != 'touchstart') return false; let ctx = this.data.ctx; ctx.setFillStyle(this.data.lineColor); // 初始线条设置颜色 ctx.setGlobalAlpha(this.data.transparent); // 设置半透明 let currentPoint = { x: e.touches[0].x, y: e.touches[0].y } let currentLine = this.data.currentLine; currentLine.unshift({ time: new Date().getTime(), dis: 0, x: currentPoint.x, y: currentPoint.y }) this.setData({ currentPoint, }) if (this.data.firstTouch) { this.setData({ cutArea: { top: currentPoint.y, right: currentPoint.x, bottom: currentPoint.y, left: currentPoint.x }, firstTouch: false }) } this.pointToLine(currentLine); }, // 笔迹移动 uploadScaleMove(e) { this.data.half++; if ((this.data.half % 3) != 0) { return false } if (e.type != 'touchmove') return false; if (e.cancelable) { // 判断默认行为是否已经被禁用 if (!e.defaultPrevented) { e.preventDefault(); } } let point = { x: e.touches[0].x, y: e.touches[0].y } //测试裁剪 if (point.y |
【本文地址】
今日新闻 |
推荐新闻 |