<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Gestures</title>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon-precomposed" href="itouch.png">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="http://depts.washington.edu/madlab/proj/dollar/dollar.js"></script>
<script type="text/javascript">
var oldX; var oldY;
var canvas;
var ctx;
var _r = new DollarRecognizer();
var _points = [];
var isMouseDown = false; // mouse only bool
var threshold = 3; // number of pixels required to be moved for a movement to count
document.addEventListener('touchstart', function(e) {
e.preventDefault();
_points = [];
var touch = e.touches[0];
ctx.beginPath();
ctx.strokeStyle = "#bae1ff";
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth = 6;
oldX = touch.pageX;
oldY = touch.pageY;
}, false);
document.addEventListener('touchmove', function(e) {
if (oldX - e.pageX < 3 && oldX - e.pageX > -3) {
return;
}
if (oldY - e.pageY < 3 && oldY - e.pageY > -3) {
return;
}
var touch = e.touches[0];
ctx.moveTo(oldX,oldY);
oldX = touch.pageX;
oldY = touch.pageY;
ctx.lineTo(oldX,oldY);
ctx.stroke();
ctx.shadowColor = 'rgba(169,236,255,0.25)';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 10;
_points[_points.length] = new Point(oldX,oldY);
}, false);
document.addEventListener('touchend', function(e) {
ctx.closePath();
if (_points.length >= 10) {
var result = _r.Recognize(_points);
$("#shapeOutput").text(result.Name);
$("#mathOutput").text(Math.round(result.Score*100) + "%");
}
_points = [];
ctx.clearRect(0,0,canvas.width,canvas.height);
}, false);
window.addEventListener("load", function(e) {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
shadowWrapper.width = window.innerWidth;
shadowWrapper.height = window.innerHeight;
}, false);
// MOUSE BINDS FOR THE HELL OF IT
document.addEventListener('mousedown', function(e) {
isMouseDown = true;
e.preventDefault();
_points = [];
ctx.beginPath();
ctx.strokeStyle = "#bae1ff";
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.lineWidth = 6;
ctx.shadowColor = 'rgba(169,236,255,0.1)';
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = 10;
oldX = e.pageX;
oldY = e.pageY;
}, false);
document.addEventListener('mousemove', function(e) {
if (!isMouseDown) {
return;
}
if (oldX - e.pageX < 3 && oldX - e.pageX > -3) {
return;
}
if (oldY - e.pageY < 3 && oldY - e.pageY > -3) {
return;
}
ctx.moveTo(oldX,oldY);
oldX = e.pageX;
oldY = e.pageY;
ctx.lineTo(oldX,oldY);
ctx.stroke();
_points[_points.length] = new Point(oldX,oldY);
}, false);
document.addEventListener('mouseup', function(e) {
isMouseDown = false;
ctx.closePath();
if (_points.length >= 10) {
var result = _r.Recognize(_points);
$("#shapeOutput").text(result.Name);
$("#mathOutput").text(Math.round(result.Score*100) + "%");
}
_points = [];
ctx.clearRect(0,0,canvas.width,canvas.height);
}, false);
</script>
<style type="text/css">
body { background: #131b1e url(tron_grid_2.png) 0 0 repeat; margin: 0; padding: 0; font-family: Helvetica; }
#output {
position: absolute;
bottom: 0;
left: 0;
padding: 1em 0;
width: 100%;
border-top: 1px solid #08090e;
background: #0e151a;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 2em rgba(255,255,255,0.15);
-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 2em rgba(255,255,255,0.15);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(31,47,59)),
color-stop(1, rgb(6,10,11))
);
background-image: -moz-linear-gradient(
center top,
rgb(31,47,59) 0%,
rgb(6,10,11) 100%
);
}
#shapeOutput {
color: #7c919e;
font-size: 1.125em;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
text-transform: capitalize;
float: left;
padding-left: 1em;
}
#mathOutput {
color: #7c919e;
font-size: 1.125em;
opacity: 0.7;
float: right;
padding-right: 1em;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="output">
<div id="shapeOutput">Gesture Recognition</div>
<div id="mathOutput">0%</div>
</div>
</body>
</html>
引入“手势”，这是iOS和Android设备上前端手势识别的概念验证。在移动Safari（iPhone、iPad等）以及.zip （3个子文件） 
Mobile-Web-based-Gesture-Recognition-master 
itouch.png 13KB tron_grid_2.png 4KB
index.html 5KB资源评论
快撑死的鱼
- 粉丝: 2w+
- 资源: 9157
最新资源
- 磁共振测试机工程图机械结构设计图纸和其它技术资料和技术方案非常好100%好用.zip
- pyqt编写界面，打开笔记本摄像头，支持缩放拖拽，并标记位置
- UI页面布局分析（5）- 评分弹窗的实现
- CentOS7与欧拉系统中达梦8数据库安装手册
- 1、C++SOCKET同步阻塞、异步非阻塞通信服务端、客户端代码，支持多个客户端连接 2、断线重连（服务端或客户端没有启动顺序要求，先开启的等待另一端连接）； 3、服务端支持同时连接多个客户端；
- VMware虚拟机安装指南：下载、配置与启动操作详解
- gamebox.h-C++头文件，1.0版本
- 使用mysql存储过程和触发器实现审计日志记录.zip
- 计算机科学教育-数据结构课程设计目标与实践
- 磁环组装自动压合平衡测试设备工程图机械结构设计图纸和其它技术资料和技术方案非常好100%好用.zip
- 医疗器械质量管理体系内审员试卷考题，GBT42061,ISO13485
- 三相交错LLC谐振仿真闭环，Y型联接(图1主回路图)，自均流(图2三相谐振电流波形)，软开关(图3是原边mos的驱动和DS和电流波形)，每相移相120度(图4驱动波形)，图5输出电压电流波形 ，送对
- VSCode下C/C++开发环境配置指南
- MATLAB语音识别 matlab语音识别，可以识别数字0-9，有gui界面，注释齐全，有报告 （本程序测试版本为Matlab 2019b，低于此版本的请安装新版，以免无法运行） 链接为电子资料
- Java开发IDE-IntelliJ IDEA的下载与安装指南
- 线控转向系统Carsim和Simulink联合仿真模型，带Carsim数据库，C级车 【正向建模，利用三环PID控制算法控制无刷直流电机获得前轮转角】 主要根据Carsim自带的转向系统，查出小齿轮
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
