- 双层for循环data-属性获取不到内层循环的值?
双层for循环的时候内层循环添加data-属性,属性值是内层的索引值,但是取值的时候dataset中没有这个属性 [图片][图片]
03-06 - input框输入内容错乱?
在网上copy了一个验证码输入框,就是那种输入一个自动跳转下一个的输入框,在开发者工具上有的时候会出现我输入我输入123,但是显示出来是321,打印输入框内容也是321,但是输入的顺序是123,不理解
01-19 - 荣耀MagicOS 7.0 系统图标消失?
在荣耀MagicOS 7.0系统打开微信小程序后图标不显示,但是其他系统打开都正常
2023-08-29 - pc端微信小程序picker无法自动关闭?
pc端的微信小程序点开picker后再点返回键picker并没有自动消失,请问是什么原因?
2022-01-18 - 苹果12真机调试调用相机人脸识别报错?
start:fail onCameraFrame is not supported on your device 请问是什么原因导致的呢? var that = this; wx.initFaceDetect(); const context = wx.createCameraContext(); this.context = context let listener = context.onCameraFrame((frame) => { wx.faceDetect({ frameBuffer: frame.data, width: frame.width, height: frame.height, enablePoint: true, enableConf: true, enableAngle: true, enableMultiFace: true, success: function (faceData) { let face = faceData.faceInfo[0] if (face.angleArray.pitch >= 0.1 || face.angleArray.roll >= 0.1 || face.angleArray.yaw >= 0.1) { wx.showToast({ title: '请平视摄像头', }) } else if (face.confArray.global <= 0.8 || face.confArray.leftEye <= 0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 || face.confArray.rightEye <= 0.8) { wx.showToast({ title: '请勿遮挡五官', }) } else { // listener = null listener.stop() wx.showLoading({ title: '识别中', }) // listener = null setTimeout(() => { wx.showToast({ title: '延迟', }) wx.hideLoading(); // wx.showLoading({ // title: '识别中', // }) // that.tapTakePhoto() }, 3*1000); } }, fail: function (err) { if (err.x == -1 || err.y == -1) { wx.showLoading({ title: '识别不到人脸', }) } else { wx.showToast({ title: '网络错误', }) } }, }) }) listener.start()
2022-01-13 - getPhoneNumber:fail no permission?
微信小程序已认证,但是还是提示这个 getPhoneNumber:fail no permission? 小程序id: wxe529890a067aa700
2022-01-11 - 苹果手机时间转换null?
苹果手机在将拼接时间转换为时间戳的时候会转换为null,之前没有出现过,最近频繁出现,请问是小程序更新的原因吗?苹果系统是最新的系统
2021-10-07 - getPhoneNumber获取的数据进行解密解密失败的原因?
getPhoneNumber在获取到数据进行解密的时候可能会出现解密失败,会有哪些原因导致的呢?
2021-07-21 - 部分微信小程序授权失败,无法获取微信id?
甲方反应部分人员小程序授权失败,机型普遍都有,微信版本也是新版,请问会是什么原因导致的呢?小程序删除重新扫码也没用
2021-07-20 - 两个canvas画图只显示部分图片?
需要用两个canvas实现类似微信聊天手写文字的功能,屏幕上面两个canvas,在下面的canvas上写文字,写完一个字生成一个图片,放到上面的canvas上,但是每次写完前面的文字都会消失,什么原因呢? html <view class="handCenter"> <canvas class="handWriting" canvas-id="handWriting" style="height:300px;width:100%"> </canvas> </view> <view style="border:1rpx solid black"> <canvas class="handWritingValue" disable-scroll="true" canvas-id="handWritingValue" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove" bindtouchend="uploadScaleEnd" style="height:150px"> </canvas> <text style="color:blue" catchtap="subCanvas">确定</text> <!-- <textarea value="{{Instructions}}" bindinput="inputInstructions" maxlength="90"></textarea> --> </view> <view class="handBtn"> <!-- <image src='{{img}}' wx:if="{{img}}"></image> --> <button catchtap="subCanvas1" class="subBtn font-loaded">完成</button> </view> <!-- <image src="{{img}}"></image> --> js const app = getApp() Page({ data: { canvasName: 'handWriting', ctx: '', canvasWidth: 0, canvasHeight: 0, transparent: 1, // 透明度 selectColor: 'black', lineColor: '#1A1A1A', // 颜色 lineSize: 1.5, // 笔记倍数 lineMin: 0.5, // 最小笔画半径 lineMax: 4, // 最大笔画半径 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: [], //划线轨迹 , 生成线条的实际点 tmpPath: '', Instructions: '', fontFamily: '手写字体', textcount: 0, canvasName1: 'handWritingValue', imageList: [] }, // 笔迹开始 uploadScaleStart(e) { if (e.type != 'touchstart') return false; let ctx1 = this.data.ctx1; ctx1.setFillStyle(this.data.lineColor); // 初始线条设置颜色 ctx1.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, ctx1 // currentLine }) 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) { 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 < this.data.cutArea.top) { this.data.cutArea.top = point.y; } if (point.y < 0) this.data.cutArea.top = 0; if (point.x > this.data.cutArea.right) { this.data.cutArea.right = point.x; } if (this.data.canvasWidth - point.x <= 0) { this.data.cutArea.right = this.data.canvasWidth; } if (point.y > this.data.cutArea.bottom) { this.data.cutArea.bottom = point.y; } if (this.data.canvasHeight - point.y <= 0) { this.data.cutArea.bottom = this.data.canvasHeight; } if (point.x < this.data.cutArea.left) { this.data.cutArea.left = point.x; } if (point.x < 0) this.data.cutArea.left = 0; this.setData({ lastPoint: this.data.currentPoint, currentPoint: point }) let currentLine = this.data.currentLine currentLine.unshift({ time: new Date().getTime(), dis: this.distance(this.data.currentPoint, this.data.lastPoint), x: point.x, y: point.y }) // this.setData({ // currentLine // }) this.pointToLine(currentLine); }, // 笔迹结束 uploadScaleEnd(e) { if (e.type != 'touchend') return 0; let point = { x: e.changedTouches[0].x, y: e.changedTouches[0].y } this.setData({ lastPoint: this.data.currentPoint, currentPoint: point }) let currentLine = this.data.currentLine currentLine.unshift({ time: new Date().getTime(), dis: this.distance(this.data.currentPoint, this.data.lastPoint), x: point.x, y: point.y }) if (currentLine.length > 2) { var info = (currentLine[0].time - currentLine[currentLine.length - 1].time) / currentLine.length; //$("#info").text(info.toFixed(2)); } //一笔结束,保存笔迹的坐标点,清空,当前笔迹 //增加判断是否在手写区域; this.pointToLine(currentLine); var currentChirography = { lineSize: this.data.lineSize, lineColor: this.data.lineColor }; var chirography = this.data.chirography chirography.unshift(currentChirography); this.setData({ chirography }) var linePrack = this.data.linePrack linePrack.unshift(this.data.currentLine); this.setData({ linePrack, currentLine: [] }) }, onLoad() { let that = this let img = wx.getStorageSync('nameImg') let canvasName = this.data.canvasName let canvasName1 = this.data.canvasName1 let ctx = wx.createCanvasContext(canvasName) let ctx1 = wx.createCanvasContext(canvasName1) // ctx1.drawImage(img,100, 0, 50, 50) // 宽 高 // ctx1.draw() this.setData({ ctx: ctx, img: img, ctx1: ctx1 }) wx.loadFontFace({ family: this.data.fontFamily, source: 'url("https://cdn.myxh.kimnxcx.com/public/sxzt.TTF")', success(res) { that.setData({ loaded: true }) } }); var query = wx.createSelectorQuery(); query.select('.handCenter').boundingClientRect(rect => { this.setData({ canvasWidth: rect.width, canvasHeight: rect.height }) }).exec(); }, inputInstructions: function (e) { let ctx = this.data.ctx ctx.setFontSize(1) ctx.setFillStyle('black') ctx.lineWidth = 0.5 ctx.font = '30px 手写字体' let arr = [] arr = this.canvasWorkBreak(e.detail.value) for (let i in arr) { let ym = (parseInt(i) + 1) * 30 ctx.fillText(arr[i], 0, ym) } let height = (arr.length) * 30 ctx.drawImage(this.data.img, 200, height, 100, 50) // 宽 高 ctx.draw() this.setData({ ctx: ctx, Instructions: e.detail.value }) }, canvasWorkBreak(text) { const textLength = text.length let textRowArr = [] let tmp = 0 let leng = Math.ceil(this.data.canvasWidth / 30) while (1) { textRowArr.push(text.substr(tmp, leng)) tmp += parseInt(leng) if (tmp >= textLength) { return textRowArr } } }, drawText(t, x, y, w) { var chr = t.split(""); var temp = ""; var row = []; context.font = "20px Arial"; context.fillStyle = "black"; context.textBaseline = "middle"; for (var a = 0; a < chr.length; a++) { if (context.measureText(temp).width < w) { ; } else { row.push(temp); temp = ""; } temp += chr[a]; } row.push(temp); for (var b = 0; b < row.length; b++) { context.fillText(row[b], x, y + (b + 1) * 20); } }, subCanvas() { // 新增我的 let that = this let canvasDown = this.data.ctx1; let canvasUp = this.data.ctx let numx = Math.floor(this.data.canvasWidth / 60) let numy = Math.floor(this.data.canvasHeight / 60) let count = this.data.textcount canvasDown.draw(true, setTimeout(function () { //我的新增定时器及回调 wx.canvasToTempFilePath({ x: 0, y: 0, width: that.data.canvasWidth, height: that.data.canvasHeight, canvasId: 'handWritingValue', fileType: 'png', success: function (res) { that.setData({ tmpPath: res.tempFilePath }) that.data.imageList.push(res.tempFilePath) count += 1 let width = 0 let height = 0 if (count < numx) { width = 60 * (count - 1) height = 0 } let arr = that.split_array(that.data.imageList,numx) for(let i in arr){ for(let j in arr[i]){ that.data.ctx.drawImage(arr[i][j], 60*j, 60*i, 60, 60) // 宽 高 that.data.ctx.draw() } } // canvasUp.drawImage(res.tempFilePath, width, height, 60, 60) // 宽 高 // canvasUp.draw() canvasDown.clearRect(0, 0, 700, 730) canvasDown.draw() that.setData({ // ctx: canvasUp, // ctx1: canvasDown, textcount: count, imageList:that.data.imageList }) } }, canvasDown) }, 1000)) }, subCanvas1(){ let that = this let pages = getCurrentPages(); let prevPage = pages[pages.length - 2]; prevPage.setData({ imageList:that.data.imageList }) // wx.setStorageSync('nameImg', that.data.tmpPath) wx.navigateBack({ delta: 1, }) }, split_array(arr, len) { var a_len = arr.length; var result = []; for (var i = 0; i < a_len; i += len) { result.push(arr.slice(i, i + len)); } return result; }, // 新增将保存的图片路径上传到文件服务器 upImgs: function (imgurl, index) { console.log(imgurl, '看下路径是多少') var that = this; wx.uploadFile({ url: apiEev.api + 'xxxx', //后台上传路径 filePath: imgurl, name: 'file', header: { 'content-type': 'multipart/form-data' }, formData: null, success: function (res) { console.log(res) //接口返回网络路径 var data = JSON.parse(res.data) console.log(data, '看下data是个啥') if (data.code == "success") { console.log('成功') } } }) }, retDraw() { this.data.ctx.clearRect(0, 0, 700, 730) this.data.ctx.draw() this.setData({ tmpPath: '' }) }, //画两点之间的线条;参数为:line,会绘制最近的开始的两个点; pointToLine(line) { this.calcBethelLine(line); return; }, //计算插值的方式; calcBethelLine(line) { if (line.length <= 1) { line[0].r = this.data.radius; return; } let x0, x1, x2, y0, y1, y2, r0, r1, r2, len, lastRadius, dis = 0, time = 0, curveValue = 0.5; if (line.length <= 2) { x0 = line[1].x y0 = line[1].y x2 = line[1].x + (line[0].x - line[1].x) * curveValue; y2 = line[1].y + (line[0].y - line[1].y) * curveValue; //x2 = line[1].x; //y2 = line[1].y; x1 = x0 + (x2 - x0) * curveValue; y1 = y0 + (y2 - y0) * curveValue;; } else { x0 = line[2].x + (line[1].x - line[2].x) * curveValue; y0 = line[2].y + (line[1].y - line[2].y) * curveValue; x1 = line[1].x; y1 = line[1].y; x2 = x1 + (line[0].x - x1) * curveValue; y2 = y1 + (line[0].y - y1) * curveValue; } //从计算公式看,三个点分别是(x0,y0),(x1,y1),(x2,y2) ;(x1,y1)这个是控制点,控制点不会落在曲线上;实际上,这个点还会手写获取的实际点,却落在曲线上 len = this.distance({ x: x2, y: y2 }, { x: x0, y: y0 }); lastRadius = this.data.radius; for (let n = 0; n < line.length - 1; n++) { dis += line[n].dis; time += line[n].time - line[n + 1].time; if (dis > this.data.smoothness) break; } this.setData({ radius: Math.min(time / len * this.data.pressure + this.data.lineMin, this.data.lineMax) * this.data.lineSize }); line[0].r = this.data.radius; //计算笔迹半径; if (line.length <= 2) { r0 = (lastRadius + this.data.radius) / 2; r1 = r0; r2 = r1; //return; } else { r0 = (line[2].r + line[1].r) / 2; r1 = line[1].r; r2 = (line[1].r + line[0].r) / 2; } let n = 5; let point = []; for (let i = 0; i < n; i++) { let t = i / (n - 1); let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2; let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2; let r = lastRadius + (this.data.radius - lastRadius) / n * i; point.push({ x: x, y: y, r: r }); if (point.length == 3) { 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); a[0].color = this.data.lineColor; // let bethelPoint = this.data.bethelPoint; // console.log(a) // console.log(this.data.bethelPoint) // bethelPoint = bethelPoint.push(a); this.bethelDraw(a, 1); point = [{ x: x, y: y, r: r }]; } } this.setData({ currentLine: line }) }, //求两点之间距离 distance(a, b) { let x = b.x - a.x; let y = b.y - a.y; return Math.sqrt(x * x + y * y); }, ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) { let a = [], vx01, vy01, norm, n_x0, n_y0, vx21, vy21, n_x2, n_y2; vx01 = x1 - x0; vy01 = y1 - y0; norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2; vx01 = vx01 / norm * r0; vy01 = vy01 / norm * r0; n_x0 = vy01; n_y0 = -vx01; vx21 = x1 - x2; vy21 = y1 - y2; norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2; vx21 = vx21 / norm * r2; vy21 = vy21 / norm * r2; n_x2 = -vy21; n_y2 = vx21; a.push({ mx: x0 + n_x0, my: y0 + n_y0, color: "#1A1A1A" }); a.push({ c1x: x1 + n_x0, c1y: y1 + n_y0, c2x: x1 + n_x2, c2y: y1 + n_y2, ex: x2 + n_x2, ey: y2 + n_y2 }); a.push({ c1x: x2 + n_x2 - vx21, c1y: y2 + n_y2 - vy21, c2x: x2 - n_x2 - vx21, c2y: y2 - n_y2 - vy21, ex: x2 - n_x2, ey: y2 - n_y2 }); a.push({ c1x: x1 - n_x2, c1y: y1 - n_y2, c2x: x1 - n_x0, c2y: y1 - n_y0, ex: x0 - n_x0, ey: y0 - n_y0 }); a.push({ c1x: x0 - n_x0 - vx01, c1y: y0 - n_y0 - vy01, c2x: x0 + n_x0 - vx01, c2y: y0 + n_y0 - vy01, ex: x0 + n_x0, ey: y0 + n_y0 }); a[0].mx = a[0].mx.toFixed(1); a[0].mx = parseFloat(a[0].mx); a[0].my = a[0].my.toFixed(1); a[0].my = parseFloat(a[0].my); for (let i = 1; i < a.length; i++) { a[i].c1x = a[i].c1x.toFixed(1); a[i].c1x = parseFloat(a[i].c1x); a[i].c1y = a[i].c1y.toFixed(1); a[i].c1y = parseFloat(a[i].c1y); a[i].c2x = a[i].c2x.toFixed(1); a[i].c2x = parseFloat(a[i].c2x); a[i].c2y = a[i].c2y.toFixed(1); a[i].c2y = parseFloat(a[i].c2y); a[i].ex = a[i].ex.toFixed(1); a[i].ex = parseFloat(a[i].ex); a[i].ey = a[i].ey.toFixed(1); a[i].ey = parseFloat(a[i].ey); } return a; }, bethelDraw(point, is_fill, color) { // 新增我的 let that = this let ctx = this.data.ctx1; ctx.beginPath(); ctx.moveTo(point[0].mx, point[0].my); if (undefined != color) { ctx.setFillStyle(color); ctx.setStrokeStyle(color); } else { ctx.setFillStyle(point[0].color); ctx.setStrokeStyle(point[0].color); } for (let i = 1; i < point.length; i++) { ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey); } ctx.stroke(); if (undefined != is_fill) { ctx.fill(); //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 ) } ctx.draw(true) }, selectColorEvent(event) { var color = event.currentTarget.dataset.colorValue; var colorSelected = event.currentTarget.dataset.color; this.setData({ selectColor: colorSelected, lineColor: color }) } })
2021-07-14