HTML5画布移动触摸事件教程

来源：互联网发布：交易平台网站源码编辑：程序博客网时间：2024/04/28 14:21

绑定事件处理程序与KineticJS形状在移动设备上,我们可以使用on()方法。在on()方法需要一个事件类型和事件发生时执行的函数。KineticJS支持touchstart touchmove,touchend,挖掘,dbltap dragstart dragmove,拖动结束移动事件。
注意:这个例子只在iOS和Android的移动设备,因为它利用触摸事件而不是鼠标事件。
说明:移动你的手指穿过三角看到触摸坐标和开始和摸结束循环。

<!DOCTYPE HTML><html>  <head>    <meta name="viewport" content="width=device-width"/>    <style>      body {        margin: 0px;        padding: 0px;      }    </style>  </head>  <body onmousedown="return false;">    <div id="container"></div>    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.0.min.js"></script>    <script defer="defer">      function writeMessage(message) {        text.setText(message);        layer.draw();      }            var stage = new Kinetic.Stage({        container: 'container',        width: 578,        height: 200      });      var layer = new Kinetic.Layer();      var text = new Kinetic.Text({        x: 10,        y: 10,        fontFamily: 'Calibri',        fontSize: 24,        text: '',        fill: 'black'      });            var triangle = new Kinetic.RegularPolygon({        x: 190,        y: 120,        sides: 3,        radius: 80,        fill: '#00D2FF',        stroke: 'black',        strokeWidth: 4      });      triangle.on('touchmove', function() {        var touchPos = stage.getPointerPosition();        var x = touchPos.x - 190;        var y = touchPos.y - 40;        writeMessage('x: ' + x + ', y: ' + y);      });      var circle = new Kinetic.Circle({        x: 380,        y: stage.height()/2,        radius: 70,        fill: 'red',        stroke: 'black',        strokeWidth: 4      });      circle.on('touchstart', function() {        writeMessage('Touchstart circle');      });      circle.on('touchend', function() {        writeMessage('Touchend circle');      });      layer.add(triangle);      layer.add(circle);      layer.add(text);      stage.add(layer);    </script>  </body></html>

0 0