H5移动交互---触摸操作

青春..荒唐

浏览: 979277 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端积累

HTML

在移动设备中，几乎所有的操作都和触摸有关，而基于这一特性，近年来在移动端中也兴起了一些较为特别的交互方式。用手指在屏幕上“刮奖”就是其中的一个非常典型的例子，它不仅需要前端设计师能够熟悉触摸手势的控制方法，还需要设计师掌握一定的图像处理技巧。接下来我们就将通过制作一个简单的刮奖案例，来了解HTML5中触摸操作的相关知识。

1. 触摸交互操作基础——Touch与Click的区别

在移动设备上，人们的交互方式不再是键盘和鼠标，而是手指。因此，对应的移动端页面的交互方式也会与桌面端有所不同。

在桌面端，为某个提交按钮制作点击功能，可以使用如下的JavaScript代码：

var submit = document.getElementById("submit");
submit.onclick = function(){
	// 功能代码
};

以上代码使用了onclick事件来对应鼠标的点击行为。然而，在iPhone这样的移动端测试时，我们会发现onclick事件有大约半秒的延迟，这是因为iOS系统需要等待一段时间来判断用户是点击还是拖动。要使得用户在移动端的交互更为流畅，则需要使用到Touch事件，使页面得知用户的交互行为不是一次点击，而是一次“触摸”。代码如下：

submit.addEventListener("touchstart", submitForm);
function submitForm(){
	// 功能代码
}

以上代码使用了addEventListener方法为submit元素注册了事件侦听，侦听的事件为touchstart，触发的函数为submitForm()。也就是说，当用户在移动设备中触摸这个submit按钮时，就会触发按钮的touchstart事件，并执行submitForm函数。

在触发touchstart事件时，也会同时产生一个event对象，在这个对象中包括了触摸行为的各种信息，如我们可以用以下代码输出触摸点的个数：

function submitForm(event){
	submit.innerHTML = "触摸点个数为" + event.touches.length;
}

我们也可以获取到触摸点的x、y位置属性，其属性名分别为pageX和pageY。以下代码将输出第一个触摸点的x坐标：

function submitForm(event){
	submit.innerHTML = "第一个触摸点的X位置" + event.touches[0].pageX;
}

除touchstart外，在HTML5中与触摸相关的事件还包括touchmove和touchend，前者是在手指拖曳页面元素的过程中不断触发，而后者是手指从一个页面元素上移开时触发。

除touch事件外，在iOS设备中还提供了gesture事件，即多指操作。可以这么理解，当用户将一根手指放到按钮上时，此时触发了touch，而此时将第二根手指也放到按钮上时，就触发了gesture（手势）事件。我们将在随后的教程中对手势操作进行详细讲解。

在了解了触摸事件基础知识后，接下来，我们将使用touch时间来制作“刮奖”效果。

2. HTML素材准备——准备好HTML代码、必要的CSS样式和素材文件

首先，我们在页面中创建一个Canvas元素，并将其放入一个div容器中

3. 利用触摸事件实现刮奖效果——编写JavaScript代码

我们希望刮奖的结果默认被一个颜色涂层所覆盖，用户直接是看不到这一结果的，只有当用手指在屏幕中“刮一刮”以后，才能够通过擦除涂层看到下方的奖项。这一操作需要在JavaScript中完成，代码如下：

<script type="text/javascript">
var canvas=document.getElementById("mask");
var context=canvas.getContext("2d");
context.fillStyle="#D1D1D1"; //设置填充色为浅灰色
context.fillRect(0,0,240,65); //填充该颜色，以覆盖下方的背景图片
</script>

以上代码通过在Canvas中绘制了一块浅灰色的矩形，使其盖住了下方背景中的奖项图片

接下来，我们就需要制作基于触摸的交互功能，使得用户手指在移过涂层时，擦除掉相应区域的浅灰色。在此，我们可以运用Canvas中一种名为globalCompositeOperation的属性，通过将其设置为destination-out，使得在已经填充颜色的基础上再次进行绘制时，所绘制的区域变得透明，从而露出下方的奖项图片，代码如下：

context.globalCompositeOperation = 'destination-out';

接下来，我们为画布创建touchmove事件侦听，当手指在画布上移动时，在触摸的位置绘制相应的圆形，该圆形将与已有的填充色互相消减，从而擦去灰色涂层。代码如下：

canvas.addEventListener('touchmove', function(event) { //当手指在画布上移动时
	event.preventDefault(); //先去除默认的响应行为
	var touch = event.touches[0]; //获取触摸的第一个点
	context.beginPath(); //开始路径的绘制
	context.arc(touch.pageX-canvas.offsetLeft,touch.pageY-canvas.offsetTop,20,0,Math.PI*2); //在所触摸处绘制圆形，半径为20像素
	context.closePath(); //结束路径绘制
	context.fillStyle="#BDC3C7"; //随意设置一种绘制颜色
	context.fill(); //填充该颜色
});
 
在以上代码中，需要注意的是，圆形的绘制坐标值应该是当前的触摸位置对应的坐标值。但是触摸点的pageX和pageY属性返回的是针对整个页面的全局坐标，我们需要将上述属性值减去画布自身的x和y坐标，才能得到画布中所要绘制的圆形的坐标。
测试页面，现在我们就能够在屏幕上用手指“刮奖”了。
 
4. 案例收尾——一些需要考虑的细节
看上去刮奖效果就这样顺利地完成了。但是设想一下，在我们实际开发中，用户刮奖完毕后基本都将跳转到下一个界面，来提示领奖的具体信息等，而如何判断用户是不是已经刮奖完毕呢？用户如果只零星触摸了一两下，是不会刮开所有涂层的，也看不到完整的获奖信息。我们在此做了一个假设，当90%的涂层像素都被抵消掉以后，即90%的面积都被刮开时，用户才已较为完整地得到了获奖信息，此时可以判断刮奖已经结束。代码如下：
canvas.addEventListener('touchmove', function(event) {
	//此前代码省略
	var imgData = context.getImageData(0,0,240,65); //获取画布中的所有像素
	var pixelsArr = imgData.data; //得到像素的字节数据
	var loop = pixelsArr.length; //获取该数据的长度
	var transparent = 0; //设置一个变量来记录已经变为透明的像素点的数量
	for (var i = 0; i < loop; i += 4) { //循环遍历每一个像素
		var alpha = pixelsArr[i + 3]; //获取每个像素的透明度数值
		if (alpha < 10) { //当透明度小于10时，认为它已经被擦除
			transparent++; //使transparent数值加1
		}
	}
	var percentage = transparent / (loop / 4); //计算透明像素在所有像素点中所占比例
	if(percentage>.9){ //当该比例大于90%时
		document.getElementById("status").innerHTML = "刮奖结束！"; //显示刮奖结束字样
	}
});

现在，再次刷新页面，当我们刮奖到一定程度时，下方就将显示出“刮奖结束”字样。

所有代码：

<!DOCTYPE html>  
<html>  
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale = 1.0">
    <title>Touch实践</title>
    <style type="text/css">
        #guajiang{
          width:240px;
          height:65px;
          background:url(./guajiang.fw.png) no-repeat;
          background-size: auto 100%;
        }
    </style>
    </head>  
    <body>
      <div id="guajiang">
          <canvas width="240" height="65" id="mask"></canvas>
      </div>
      <script type="text/javascript">
          var canvas=document.getElementById("mask");
          var context=canvas.getContext("2d");
          context.fillStyle="#D1D1D1"; //设置填充色为浅灰色
          context.fillRect(0,0,240,65); //填充该颜色，以覆盖下方的背景图片

          context.globalCompositeOperation = 'destination-out';//再次绘制时所经过区域变透明
          canvas.addEventListener('touchmove', function(event) { //当手指在画布上移动时
            // event.preventDefault(); //先去除默认的响应行为
            var touch = event.touches[0]; //获取触摸的第一个点
            context.beginPath(); //开始路径的绘制
            context.arc(touch.pageX-canvas.offsetLeft,touch.pageY-canvas.offsetTop,10,0,Math.PI*2); //在所触摸处绘制圆形，半径为20像素
            context.closePath(); //结束路径绘制
            context.fillStyle="#BDC3C7"; //随意设置一种绘制颜色
            context.fill(); //填充该颜色
            var imgData = context.getImageData(0,0,240,65); //获取画布中的所有像素
            var pixelsArr = imgData.data; //得到像素的字节数据
            var loop = pixelsArr.length; //获取该数据的长度
            var transparent = 0; //设置一个变量来记录已经变为透明的像素点的数量
            for (var i = 0; i < loop; i += 4) { //循环遍历每一个像素
              var alpha = pixelsArr[i + 3]; //获取每个像素的透明度数值
              if (alpha < 10) { //当透明度小于10时，认为它已经被擦除
                transparent++; //使transparent数值加1
              }
            }
            var percentage = transparent / (loop / 4); //计算透明像素在所有像素点中所占比例
            if(percentage>.3){ //当该比例大于90%时
              alert("结束")
              // document.getElementById("status").innerHTML = "刮奖结束！"; //显示刮奖结束字样
            }
          });
      </script> 
    </body>  
</html>

拓展：H5新属性---最高兼容IE9！！！

<canvas> 标签定义图形，比如图表和其他图像。

<canvas> 标签只是图形容器，必须使用脚本来绘制图形。

这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

默认情况下 <canvas> 元素没有边框和内容

本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完

分享到：

解决输入框失焦事件与按钮点击事件冲突的问 ... | html中禁止网页另存为、查看源文件、屏蔽鼠 ...

2017-11-25 14:21
浏览 2629
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论