27 changed files with 1409 additions and 1004 deletions
|
Before Width: | Height: | Size: 107 KiB After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 685 B |
|
After Width: | Height: | Size: 972 B |
@ -0,0 +1,270 @@ |
|||||
|
<template> |
||||
|
<view class="tf-Box-Bg"> |
||||
|
<view class="tf-Box"> |
||||
|
<view class="tf-Box-title"> |
||||
|
<text class="text">{{$t('homeNewText.dd3')}}</text> |
||||
|
<image class="tf-close" src="./img/tf-close.png" mode="aspectFit" @click.stop="close_"></image> |
||||
|
</view> |
||||
|
<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" |
||||
|
class="tf-Box-center" canvas-id="tf-verify-canvas" id="tf-verify-canvas"></canvas> |
||||
|
<movable-area class="tf-Box-BtnBox"> |
||||
|
<view class="tf-Box-BtnBox-text">{{$t('homeNewText.dd4')}}</view> |
||||
|
<movable-view class="tf-Box-BtnNei" direction="all" :x="canvasX2" @change="changePath" @touchend="endTouch" @mouseup="endTouch"> |
||||
|
<view class="tf-Box-BtnNei-leftBox" :style="{backgroundColor:verifyImgs[verifyIndex].color}"></view> |
||||
|
</movable-view> |
||||
|
</movable-area> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name:"tf-verify-img", |
||||
|
props:{ |
||||
|
verifyImgs:{ |
||||
|
type:Array, |
||||
|
default: function(){ |
||||
|
return [] |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
verifyIndex:0, |
||||
|
canvasW:"", |
||||
|
canvasH:"", |
||||
|
canvasX2:0,//归为用的 |
||||
|
canvasX:0,//实时移动X |
||||
|
ctx:false, |
||||
|
jgX:0,//结果X |
||||
|
dqImgPath:'',//本地临时图片路径 |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
// this.canvasW = uni.upx2px(580); |
||||
|
this.canvasW = uni.upx2px(605); |
||||
|
this.canvasH = uni.upx2px(290); |
||||
|
console.log("created"); |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.$nextTick(()=>{ |
||||
|
this.init() |
||||
|
}) |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 生成从minNum到maxNum的随机数 |
||||
|
randomNum(minNum,maxNum){ |
||||
|
switch(arguments.length){ |
||||
|
case 1: |
||||
|
return parseInt(Math.random()*minNum+1,10); |
||||
|
break; |
||||
|
case 2: |
||||
|
return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); |
||||
|
break; |
||||
|
default: |
||||
|
return 0; |
||||
|
break; |
||||
|
} |
||||
|
}, |
||||
|
close_(){ |
||||
|
this.$emit('close'); |
||||
|
}, |
||||
|
init(){ |
||||
|
if(this.verifyImgs.length==0){ |
||||
|
uni.showToast({ |
||||
|
title: 'verifyImgs不能为空', |
||||
|
icon:"none" |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
console.log("init"); |
||||
|
this.canvasX2--; |
||||
|
this.canvasX = 0; |
||||
|
this.verifyIndex = this.randomNum(0,this.verifyImgs.length-1); |
||||
|
this.ctx = uni.createCanvasContext('tf-verify-canvas',this); |
||||
|
console.log(this.ctx); |
||||
|
this.jgX = this.randomNum(uni.upx2px(150),uni.upx2px(450)); |
||||
|
this.dqImgPath = this.verifyImgs[this.verifyIndex].src; |
||||
|
this.huatu(); |
||||
|
}, |
||||
|
endTouch(){ |
||||
|
if(Math.abs(this.canvasX-this.jgX)<=5){ |
||||
|
this.$emit('succeed') |
||||
|
}else{ |
||||
|
uni.showToast({ |
||||
|
title: this.$t('homeNewText.dd2'), |
||||
|
icon:"error" |
||||
|
}); |
||||
|
this.init(); |
||||
|
} |
||||
|
}, |
||||
|
huatu(){ |
||||
|
let this_ = this; |
||||
|
let r = uni.upx2px(10); |
||||
|
let XX = this.canvasX; |
||||
|
let YY = uni.upx2px(100); |
||||
|
let cs = uni.upx2px(20); |
||||
|
// this_.ctx.drawImage(this_.dqImgPath,0,0,this_.canvasW,this_.canvasH); |
||||
|
// this_.ctx.drawImage(this_.dqImgPath,16,0,this_.canvasW,this_.canvasH); |
||||
|
this_.ctx.drawImage(this_.dqImgPath,9,0,this_.canvasW,this_.canvasH); |
||||
|
|
||||
|
//画不可移动的拼图块 |
||||
|
this_.ctx.beginPath(); |
||||
|
this_.ctx.moveTo(-2*r+this_.jgX+cs+2*r, YY-2*r+2*r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+5.5*r, YY-2*r+2*r); |
||||
|
this_.ctx.arcTo(-2*r+this_.jgX+cs+5.5*r, YY-2*r+3*r, XX-2+this_.jgX*r+cs+6.5*r, YY-2*r+3*r, r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+7.5*r, YY-2*r+3*r); |
||||
|
this_.ctx.arcTo(-2*r+this_.jgX+cs+8.5*r, YY-2*r+3*r, -2*r+this_.jgX+cs+8.5*r, YY-2*r+2*r, r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+12*r, YY-2*r+2*r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+12*r, YY-2*r+11*r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+8.5*r, YY-2*r+11*r); |
||||
|
this_.ctx.arcTo(-2*r+this_.jgX+cs+8.5*r, YY-2*r+12*r, -2*r+this_.jgX+cs+7.5*r, YY-2*r+12*r, r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+6.5*r, YY-2*r+12*r); |
||||
|
this_.ctx.arcTo(-2*r+this_.jgX+cs+5.5*r, YY-2*r+12*r, -2*r+this_.jgX+cs+5.5*r, YY-2*r+11*r, r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+2*r, YY-2*r+11*r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+2*r, YY-2*r+8*r); |
||||
|
this_.ctx.arcTo(-2*r+this_.jgX+cs+3*r, YY-2*r+8*r, -2*r+this_.jgX+cs+3*r, YY-2*r+7*r, r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+3*r, YY-2*r+6*r); |
||||
|
this_.ctx.arcTo(-2*r+this_.jgX+cs+3*r, YY-2*r+5*r, -2*r+this_.jgX+cs+2*r, YY-2*r+5*r, r); |
||||
|
this_.ctx.lineTo(-2*r+this_.jgX+cs+2*r, YY-2*r+2*r); |
||||
|
this_.ctx.shadowBlur=10; |
||||
|
this_.ctx.shadowColor="#ffffff"; |
||||
|
this_.ctx.fillStyle = "rgba(0,0,0,0.5)"; |
||||
|
this_.ctx.fill(); |
||||
|
this_.ctx.restore(); |
||||
|
//画可移动的拼图块 |
||||
|
this_.ctx.beginPath(); |
||||
|
this_.ctx.save(); |
||||
|
this_.ctx.moveTo(XX-2*r+cs+2*r, YY-2*r+2*r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+5.5*r, YY-2*r+2*r); |
||||
|
this_.ctx.arcTo(XX-2*r+cs+5.5*r, YY-2*r+3*r, XX-2*r+cs+6.5*r, YY-2*r+3*r, r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+7.5*r, YY-2*r+3*r); |
||||
|
this_.ctx.arcTo(XX-2*r+cs+8.5*r, YY-2*r+3*r, XX-2*r+cs+8.5*r, YY-2*r+2*r, r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+12*r, YY-2*r+2*r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+12*r, YY-2*r+11*r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+8.5*r, YY-2*r+11*r); |
||||
|
this_.ctx.arcTo(XX-2*r+cs+8.5*r, YY-2*r+12*r, XX-2*r+cs+7.5*r, YY-2*r+12*r, r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+6.5*r, YY-2*r+12*r); |
||||
|
this_.ctx.arcTo(XX-2*r+cs+5.5*r, YY-2*r+12*r, XX-2*r+cs+5.5*r, YY-2*r+11*r, r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+2*r, YY-2*r+11*r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+2*r, YY-2*r+8*r); |
||||
|
this_.ctx.arcTo(XX-2*r+cs+3*r, YY-2*r+8*r, XX-2*r+cs+3*r, YY-2*r+7*r, r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+3*r, YY-2*r+6*r); |
||||
|
this_.ctx.arcTo(XX-2*r+cs+3*r, YY-2*r+5*r, XX-2*r+cs+2*r, YY-2*r+5*r, r); |
||||
|
this_.ctx.lineTo(XX-2*r+cs+2*r, YY-2*r+2*r); |
||||
|
this_.ctx.shadowBlur=10; |
||||
|
this_.ctx.shadowColor="#ffffff"; |
||||
|
this_.ctx.fill(); |
||||
|
this_.ctx.clip(); |
||||
|
// this_.ctx.drawImage(this_.dqImgPath,this_.canvasX-this_.jgX,0,this_.canvasW,this_.canvasH); |
||||
|
this_.ctx.drawImage(this_.dqImgPath,this_.canvasX-this_.jgX+16,0,this_.canvasW,this_.canvasH); |
||||
|
this_.ctx.restore(); |
||||
|
//绘图 |
||||
|
this_.ctx.draw(); |
||||
|
}, |
||||
|
changePath(e){ |
||||
|
// #ifdef APP-NVUE |
||||
|
this.canvasX = e.detail.x; |
||||
|
// #endif |
||||
|
// #ifndef APP-NVUE |
||||
|
this.canvasX = e.target.x; |
||||
|
// #endif |
||||
|
this.huatu(); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="less"> |
||||
|
.tf-Box-Bg{ |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
z-index: 100; |
||||
|
background-color: rgba(0,0,0,.3); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: #000; |
||||
|
.tf-Box{ |
||||
|
width: 640upx; |
||||
|
height: 584upx; |
||||
|
background-color: #fff; |
||||
|
border-radius: 6upx; |
||||
|
box-shadow: 0 0 50upx 0upx rgba(0,0,0,.2); |
||||
|
.tf-Box-title{ |
||||
|
height: 100upx; |
||||
|
line-height: 100upx; |
||||
|
// padding: 0 32upx; |
||||
|
padding: 0 16px; |
||||
|
border-bottom: 1px solid #E1E3E9; |
||||
|
flex-direction: row; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.text{ |
||||
|
font-size: 32upx; |
||||
|
flex: 1; |
||||
|
} |
||||
|
.tf-close{ |
||||
|
width: 28upx; |
||||
|
height: 28upx; |
||||
|
} |
||||
|
} |
||||
|
.tf-Box-center{ |
||||
|
margin-top: 30upx; |
||||
|
margin-bottom: 30upx; |
||||
|
align-self: center; |
||||
|
// padding: 0 32upx; |
||||
|
padding: 0 16px; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
.tf-Box-BtnBox{ |
||||
|
margin-top: 30upx; |
||||
|
margin-bottom: 30upx; |
||||
|
align-self: center; |
||||
|
width: 580upx; |
||||
|
height: 75upx; |
||||
|
line-height: 75upx; |
||||
|
text-align: center; |
||||
|
font-size: 28upx; |
||||
|
border-radius: 6upx; |
||||
|
border: 1px solid #E1E3E9; |
||||
|
background-color: #F7F8F9; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
margin: 30upx auto; |
||||
|
|
||||
|
.tf-Box-BtnBox-text{ |
||||
|
width: 100%; |
||||
|
height: 75upx; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
color: #424649; |
||||
|
text-align: center; |
||||
|
} |
||||
|
.tf-Box-BtnNei{ |
||||
|
height: 75upx; |
||||
|
width: 75upx; |
||||
|
background-color: #fff; |
||||
|
box-shadow: 0 0 10upx 0upx rgba(0,0,0,.2); |
||||
|
background-image: url(img/tf-arrows.png); |
||||
|
background-size: 34upx; |
||||
|
background-position: center; |
||||
|
background-repeat: no-repeat; |
||||
|
.tf-Box-BtnNei-leftBox{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: -580upx; |
||||
|
width: 580upx; |
||||
|
height: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh-CN"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
|
<link rel="icon" href="/static/favicon.ico"> |
||||
|
<title> |
||||
|
<%= htmlWebpackPlugin.options.title %> |
||||
|
</title> |
||||
|
<!-- Open Graph data --> |
||||
|
<!-- <meta property="og:title" content="Title Here" /> --> |
||||
|
<!-- <meta property="og:url" content="http://www.example.com/" /> --> |
||||
|
<!-- <meta property="og:image" content="http://example.com/image.jpg" /> --> |
||||
|
<!-- <meta property="og:description" content="Description Here" /> --> |
||||
|
<script> |
||||
|
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)')) |
||||
|
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />') |
||||
|
</script> |
||||
|
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> |
||||
|
</head> |
||||
|
<body> |
||||
|
<noscript> |
||||
|
<strong>Please enable JavaScript to continue.</strong> |
||||
|
</noscript> |
||||
|
<div id="app"></div> |
||||
|
<!-- built files will be auto injected --> |
||||
|
</body> |
||||
|
</html> |
||||
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 195 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 8.2 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
Loading…
Reference in new issue