触摸事件
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
1. touchstart：手指放在一个DOM元素上。
2. touchmove：手指拖曳一个DOM元素。
3. touchend：手指从一个DOM元素上移开。
每个触摸事件都包括了三个触摸列表：
1. touches：当前位于屏幕上的所有手指的一个列表。
2. targetTouches：位于当前DOM元素上的手指的一个列表。
3. changedTouches：涉及当前事件的手指的一个列表。【这三个列表的区别会在后面讲解，那是个老外的文章，讲的比较清楚。】
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1. identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。
2. target：DOM元素，是动作所针对的目标。
3. 客户/页面/屏幕坐标：动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形。
touchstart、touchmove和touchend事件提供了一组足够丰富的功能来支持几乎是任何类型的基于触摸的交互——其中包括常见的多点触摸手势，比如说捏缩放、旋转等待。
<!DOCTYPE>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="css/"/>
<style>
#example{
border:1px solid #797979;
background-color: #FFFFFF;
height: 376px;
width: 348px;
}
.btn{
width: 49%;
display: inline-block;
height: 51px;
font-size: 24px;
border: 1px solid #797979;
border-top: none;
background-color: #FFFFFF;
}
#btn_clear{
background-color:#E4E4E4;
}
#btn_submit{
background-color:#CBCBCB;
}
</style>
</head>
<body>
<div class="main_container">
<div style="width: 350px">
<canvas id="example"></canvas>
</div>
<button id="btn_clear" class="btn">清除</button>
<button id="btn_submit" class="btn">确定</button>
</div>
<script src="fastclick.js"></script>
<script src="js/jquery-1.12.4.js"></script>
<script language="javascript">
FastClick.attach(document.body);
var CanvasDrawr = function(options) {
// 这个是设定画布信息
var canvas = document.getElementById(options.id),
ctxt = canvas.getContext("2d");
canvas.style.width = '100%'
canvas.width = canvas.offsetWidth;
canvas.style.width = '';
// 设定来自options的属性
ctxt.lineWidth = 3;
ctxt.lineCap = options.lineCap || "round";
ctxt.pX = undefined;
ctxt.pY = undefined;
var lines = [,,];
var offset = $(canvas).offset();
var clear = document.getElementById("btn_clear");
var submit = document.getElementById("btn_submit");
clear.addEventListener("click", function(){
canvas.width = canvas.width;
});
submit.addEventListener("click", function(){
alert(canvas.toDataURL("image/png"));
});
var self = {
//初始化，绑定touchstart 和 touchmove 事件
init: function() {
canvas.addEventListener('touchstart', self.preDraw, false);
canvas.addEventListener('touchmove', self.draw, false);
},
preDraw: function(event) {//当touchstart时，获取相对canvas的x\y位置，画笔的颜色
$.each(event.touches, function(i, touch) {
var id = touch.identifier,
mycolor ="#000";
lines[id] = { x: this.pageX - offset.left,
y: this.pageY - offset.top,
color : mycolor
};
});
event.preventDefault();
},
draw: function(event) {//touchmove开始划线
var e = event, hmm = {};
$.each(event.touches, function(i, touch) {
var id = touch.identifier,
moveX = this.pageX - offset.left - lines[id].x,
moveY = this.pageY - offset.top - lines[id].y;//移动的x\y
var ret = self.move(id, moveX, moveY);//canvas的画线
lines[id].x = ret.x;
lines[id].y = ret.y;
});
event.preventDefault();
},
move: function(i, changeX, changeY) {//这个地方需要了解下canvas 的知识哦。
ctxt.strokeStyle = lines[i].color;//设定颜色
ctxt.beginPath();//开始路径
ctxt.moveTo(lines[i].x, lines[i].y);//移动到
ctxt.lineTo(lines[i].x + changeX, lines[i].y + changeY);//画线
ctxt.stroke();//填充颜色
ctxt.closePath();//结束路径
return { x: lines[i].x + changeX, y: lines[i].y + changeY };//返回最后的点坐标
}
};
return self.init();//运行init
};
$(function(){
var super_awesome_multitouch_drawing_canvas_thingy = new CanvasDrawr({id:"example", size: 15 });
});
</script>
</body>
</html>
扫一扫
3415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
