微信小程序 滑动验证 组件

Component({ /** * 组件的属性列表 */ properties: { imgSrc: {//图片 type: String, value: './defaultImg.jpg' }, blockWidth: {//拼块大小 单位 rpx type: Number, value: 100 }, themeColor: {//主题色 type: String, value: '#f75a57' }, whiteSpace: {//canvas 图像 的间隙留白 单位 rpx type: Number, value: 8 }, }, /** * 组件的初始数据 */ data: { whileBlockX: 100,//PX whileBlockY: 50,//PX containerWidth: 0, containerHeight: 0, moveX: 0,//PX isShowBackUp: false, validationResult: '',//验证结果 }, lifetimes: { ready() { var result = wx.getSystemInfoSync() this.windowWidth = result.windowWidth const query = wx.createSelectorQuery() query.in(this).select('#container').boundingClientRect((result) => { console.log(result) this.setData({ containerWidth: result.width, containerHeight: result.height, }) this.validationInit() }).exec() }, }, /** * 组件的方法列表 */ methods: { // 操作方法 handleTouchmove(e) { var change = e.changedTouches[0].pageX - this.startPageX var moveX = this.data.moveX + change var maxMoveX = this.data.containerWidth - this.rpxToPx(this.data.blockWidth * 6 / 5) if (moveX < 0) moveX = 0 if (moveX > maxMoveX) moveX = maxMoveX this.setData({ moveX }) this.startPageX = e.changedTouches[0].pageX }, handleTouchstart(e) { this.startPageX = e.changedTouches[0].pageX }, handleTouchend() { if (Math.abs(this.data.moveX - this.data.whileBlockX) < 10) { this.setData({ isShowBackUp: true, validationResult: true },()=>{ this.triggerEvent("getValidationResult",this.data.validationResult) }) } else { this.setData({ isShowBackUp: true, validationResult: false },()=>{ this.triggerEvent("getValidationResult",this.data.validationResult) }) } }, rpxToPx(v_rpx) { var onePxToRpx = 750 / this.windowWidth; var v_px = v_rpx / onePxToRpx; return v_px }, // 初始化 validationInit() { var blockMargin = 20;//随机拼块与container最小边距 var blockWidth = this.rpxToPx(this.data.blockWidth) var maxX = this.data.containerWidth - (blockWidth * 6 / 5 + this.data.whiteSpace + blockMargin) var minX = blockWidth * 6 / 5 + blockMargin console.log(maxX, minX) var randomX = Math.floor(Math.random() * (maxX - minX) + minX)//x值 var bgImageHeight = this.data.containerHeight - this.rpxToPx(84) var maxY = bgImageHeight - (blockWidth + this.data.whiteSpace + blockMargin) var minY = 0 + blockMargin var randomY = Math.floor(Math.random() * (maxY - minY) + minY)//y值 this.setData({ validationResult: false, isShowBackUp: false, moveX: 0, whileBlockX: randomX, whileBlockY: randomY }, () => { this.createWhileBlock() this.createMoveBlock() }) }, // 白色拼块生成 createWhileBlock() { const query = wx.createSelectorQuery() query.in(this).select('#whileBlockCanvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) var blockWidth = this.rpxToPx(this.data.blockWidth) var whiteSpace = this.rpxToPx(this.data.whiteSpace) var pi = Math.PI // 绘图 ctx.moveTo(whiteSpace, whiteSpace) ctx.lineTo(blockWidth + whiteSpace, whiteSpace) ctx.lineTo(blockWidth + whiteSpace, blockWidth * 3 / 10 + whiteSpace) ctx.arc(blockWidth + whiteSpace, blockWidth / 2 + whiteSpace, blockWidth / 5, 3 / 2 * pi, pi / 2, false) ctx.lineTo(blockWidth + whiteSpace, blockWidth + whiteSpace) ctx.lineTo(whiteSpace, blockWidth + whiteSpace) ctx.lineTo(whiteSpace, blockWidth * 7 / 10 + whiteSpace) ctx.arc(whiteSpace, blockWidth / 2 + whiteSpace, blockWidth / 5, pi / 2, 3 / 2 * pi, true) ctx.lineTo(whiteSpace, whiteSpace) ctx.fillStyle = "#ffffff" ctx.shadowBlur = 3 ctx.shadowColor = "#555555"; ctx.fill() // wx.canvasToTempFilePath({ // canvas, // success: res => { // // 生成的图片临时文件路径 // const tempFilePath = res.tempFilePath // console.log(tempFilePath) // }, // }) }) }, // 图片拼块生成 createMoveBlock() { const query = wx.createSelectorQuery() query.in(this).select('#moveBlockCanvas').fields({ node: true, size: true }).exec((res) => { const canvas = res[0].node console.log(canvas) const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr ctx.scale(dpr, dpr) var blockWidth = this.rpxToPx(this.data.blockWidth) var whiteSpace = this.rpxToPx(this.data.whiteSpace) var pi = Math.PI // 绘图 ctx.moveTo(whiteSpace, whiteSpace) ctx.lineTo(blockWidth + whiteSpace, whiteSpace) ctx.lineTo(blockWidth + whiteSpace, blockWidth * 3 / 10 + whiteSpace) ctx.arc(blockWidth + whiteSpace, blockWidth / 2 + whiteSpace, blockWidth / 5, 3 / 2 * pi, pi / 2, false) ctx.lineTo(blockWidth + whiteSpace, blockWidth + whiteSpace) ctx.lineTo(whiteSpace, blockWidth + whiteSpace) ctx.lineTo(whiteSpace, blockWidth * 7 / 10 + whiteSpace) ctx.arc(whiteSpace, blockWidth / 2 + whiteSpace, blockWidth / 5, pi / 2, 3 / 2 * pi, true) ctx.lineTo(whiteSpace, whiteSpace) ctx.shadowColor = "#555555"; ctx.shadowBlur = 6 ctx.fillStyle = "#ffffff" ctx.fill() var img = canvas.createImage() img.src = this.data.imgSrc img.onload = () => { var proportion = img.width / img.height var width = this.data.containerWidth var height = width / proportion ctx.clip() ctx.drawImage(img, -this.data.whileBlockX, -this.data.whileBlockY, width, height) } }) }, } }) /* author：chenmingxuan url：https://download.csdn.net/download/weixin_44646763/86726978 */