鼠标手势识别
2018-03-04 23:37
344 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>笔画相似检测</title>
<style media="screen">
*{margin: 0;padding: 0;}
#canvas1{border: 4px solid blue;}
button{position: absolute;left:500px;top:410px;
width: 100px;height: 30px;}
</style>
</head>
<body>
<canvas id="canvas1"></canvas>
<button type="button" name="button"onclick="window.location.reload()">重新测试</button>
<script type="text/javascript">
var canvas1=document.getElementById('canvas1');
var context1=canvas1.getContext('2d');
canvas1.width=600;canvas1.height=600;
var cw=canvas1.width,ch=canvas1.height;
var drawTextOver=false;
function formline(){
context1.strokeStyle="blue";
context1.lineWidth=4;
context1.beginPath();
context1.moveTo(cw/2,0);context1.lineTo(cw/2,ch*(2/3));
context1.moveTo(0,ch*(2/3));context1.lineTo(cw,ch*(2/3));
context1.moveTo(cw/4,ch*(2/3));context1.lineTo(cw/4,ch);
context1.moveTo(cw/2,ch*(2/3));context1.lineTo(cw/2,ch);
context1.moveTo(0,30);context1.lineTo(cw,30);
context1.moveTo(0,40+ch*(2/3));context1.lineTo(cw,40+ch*(2/3));
context1.stroke();
}
function formtips(){
context1.fillStye="blue"
context1.font="20px Courier New";
context1.fillText("数字绘制1",0,20);
context1.fillText("数字绘制2",cw/2,20);
context1.fillText("样本点可视1",0,30+ch*(2/3));
context1.fillText("样本点可视2",cw/4,30+ch*(2/3));
context1.font="30px Courier New";
context1.fillText("对比结果:",cw/2,ch*(2/3)+30);
}
function form(){
formtips();
formline();
}
function draw(x,y){
context1.beginPath();
context1.arc(x,y,1,0,2*Math.PI,true);
context1.stroke();
context1.fill();
}
function code(x,y,o){o.push([x,y]);}
function run(){
var o=[[]],o2=[[]]; //o是左边数组，o2是右边的
var leftend=true,rightend=true;
var changeleft=true,changeright=true;
window.addEventListener('mousedown',function(event){ //按下鼠标开始画 并且数组第一个数据获得
var px=event.offsetX,py=event.offsetY;
if(px>0&&px<cw/2&&py>30&&py<ch*(2/3)) //左边第一点
{o[0]=[event.offsetX,event.offsetY];if(changeleft)leftend=false;}
if(px>cw/2&&px<cw&&py>30&&py<ch*(2/3)) //右边第一点
{o2[0]=[event.offsetX,event.offsetY];if(changeright)rightend=false;}
}
);
window.addEventListener('mousemove',function(event){
var x=event.offsetX,y=event.offsetY;
var l=o.length,l2=o2.length;
if(x>0&&x<cw/2&&y>30&&y<ch*(2/3)&&!leftend){ //左边没有结束（leftend=false）就画左边
if(Math.sqrt((x-o[l-1][0])*(x-o[l-1][0])+(y-o[l-1][1])*(y-o[l-1][1])>=2)){
code(x,y,o); //一边画一边记录,每距离2像素记录一下
}
draw(x,y);
}
if(x>cw/2&&x<cw&&y>30&&y<ch*(2/3)&&!rightend){ //右边没有结束（rightend=false）就画左边
if(Math.sqrt((x-o2[l2-1][0])*(x-o2[l2-1][0])+(y-o2[l2-1][1])*(y-o2[l2-1][1])>=2)){
code(x,y,o2); //一边画一边记录，距离2像素记录一下
}
draw(x,y);
}
}
);
window.addEventListener('mouseup',function(event){ //那边抬起鼠标那边就画完了，就是leftend or rightend =true
if(event.offsetX>0&&event.offsetX<cw/2&&event.offsetY>30&&event.offsetY<ch*(2/3)){
leftend=true;changeleft=false;
}
if(event.offsetX>cw/2&&event.offsetX<cw&&event.offsetY>30&&event.offsetY<ch*(2/3)){
rightend=true;changeright=false;
if((!changeright)&&(!changeleft)){
drawTextOver=true;
if(drawTextOver) getdata(o,o2); //对初步数据处理
}
}
}
);
}
function getdata(o,o2){ //对初步数据处理
var stdw=cw/4-5,stdh=ch*(1/3)-40-5; //放缩的标准宽高
var l1=o[0][0],r1=o[0][0],u1=o[0][1],d1=o[0][1]; //对两边图像搞出范围
var l2=o2[0][0],r2=o2[0][0],u2=o2[0][1],d2=o2[0][1];
for (var i = 0; i < o.length-1; i++) {
l1=Math.min(o[i][0],l1);
r1=Math.max(o[i][0],r1);
u1=Math.min(o[i][1],u1);
d1=Math.max(o[i][1],d1);
}
for (var i = 0; i < o2.length-1; i++){
l2=Math.min(o2[i][0],l2);
r2=Math.max(o2[i][0],r2);
u2=Math.min(o2[i][1],u2);
d2=Math.max(o2[i][1],d2);
}
var wk2=(r2-l2)/stdw,wk1=(r1-l1)/stdw; //两边的放缩比例
var hk2=(d2-u2)/stdh,hk1=(d1-u1)/stdh;
if(wk2<1) wk2 = 1;
if(wk1<1) wk1 = 1;
for (var i = 0; i < o.length; i++) {o[i][0]-=l1;o[i][1]-=u1;} //都给平移到原点而且放缩
for (var i = 0; i < o2.length; i++) {o2[i][0]-=l2;o2[i][1]-=u2;}
for (var i = 0; i < o.length; i++) {o[i][0]/=wk1;o[i][1]/=hk1;} //放缩
for (var i = 0; i < o2.length; i++) {o2[i][0]/=wk2;o2[i][1]/=hk2;}
var T1=new Array,T2=new Array; //这才是想要的样本数组
var L;var textL=100;
if(o.length>=textL&&o2.length>=textL) L=100; //两个数组长都超过100的大概等距离抽取标准长度100个出来
if(!(o.length>=textL&&o2.length>=textL)) L=Math.min(o.length,o2.length);
for (var i = 0; i < L; i++) {T1[i]=[0,0];}
for (var i = 0; i < L; i++) {T2[i]=[0,0];}
if(o.length>=textL&&o2.length>=textL){
var k=o.length/textL,k1=o2.length/textL;
for (var i = 0; i < 100; i++) {
var n=Math.round(k*i);T1[i][0]=o
[0];T1[i][1]=o
[1];
}
for (var i = 0; i < 100; i++) {
var n=Math.round(k1*i);T2[i][0]=o2
[0];T2[i][1]=o2
[1];
}
}
if(!(o.length>=textL&&o2.length>=textL)&&o.length<o2.length){ //下面是不满足同时长超过100个的情况，把最短的看作标准长度
var k=o2.length/o.length; //一样道理抽出来
for (var i = 0; i < o.length; i++) {T1[i][0]=o[i][0];T1[i][1]=o[i][1]}
for (var i = 0; i < o.length; i++) {
var n=Math.round(k*i);
T2[i][0]=o2
[0];
T2[i][1]=o2
[1];
}
}
if(!(o.length>=textL&&o2.length>=textL)&&o2.length<o.length){
var k=o.length/o2.length;
for (var i = 0; i < o2.length; i++) {T2[i][0]=o2[i][0];T2[i][1]=o2[i][1];}
for (var i = 0; i < o2.length; i++){
var n=Math.round(k*i);
T1[i][0]=o
[0];
T1[i][1]=o
[1];
}
}
analyse(T1,T2);
} //抽出来了，可以分析或者可视处理了！
function like(){
context1.fillStyle="red"
context1.font="100px Courier New";
context1.fillText("相似",cw/2+20,ch*(2/3)+140);
}
function unlike(){
context1.fillStyle="red"
context1.font="80px Courier New";
context1.fillText("不相似",cw/2+20,ch*(2/3)+140);
}
function vision(T1,T2){
for (var i = 0; i < T1.length; i++) {draw(T1[i][0],T1[i][1]+ch*(2/3)+40+2);}
for (var i = 0; i < T2.length; i++) {draw(T2[i][0]+cw/4,T2[i][1]+ch*(2/3)+40+2);}
}
function analyse(T1,T2){
vision(T1,T2);
var de=30;
var result=delta1(T1,T2);
if(result>de) unlike();
else like();
}
function delta1(T1,T2){ //分析误差方案1
var sum=0,dertal;
for (var i = 0; i < T1.length; i++) {
sum+=Math.sqrt(
(T1[i][0]-T2[i][0])*(T1[i][0]-T2[i][0])+
(T1[i][1]-T2[i][1])*(T1[i][1]-T2[i][1]));
}
delta=sum/T1.length;
return delta;
}
window.onload = function(){
form();
run();
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于BP神经网络ANN的鼠标手势识别C#.NET实验程序
- [💯原]Javascript，我们来用js在网页中识别鼠标手势
- 基于BP神经网络ANN的鼠标手势识别C#.NET实验程序
- kinect手势识别后，利用识别效果控制鼠标
- kinect手势识别后，利用识别效果控制鼠标
- Unity鼠标点击手势识别（上、下、左、右滑动）
- 鼠标手势识别 [Flash]
- Android 触屏事件处理_手势识别 鼠标事件
- [AHK]仅识别八个方向的简版鼠标手势实现
- 神经网络进阶（连载4）鼠标手势的识别
- 简述Android触摸屏手势识别(转)
- iOS实现手势识别
- iOS 手势识别 ——长按和轻扫(swipe)
- WINCE 6.0 R3开发体验2-gesture手势识别
- 手势识别（一）--手势基本概念和ChaLearn Gesture Challenge
- 理解Android的手势识别
- 安卓学习(二) 手势识别
- 33.手势识别器
- Kinect开发教程：利用OpenNI进行手势识别
- Android-手势识别（自定义手势识别：四种自定义手势）