HTML5画布移动触摸事件教程_当画布被触碰事件中-优快云博客

本文链接：https://blog.youkuaiyun.com/limeiyans/article/details/18187291

本文介绍如何在移动设备上使用KineticJS处理HTML5画布的触摸事件，如'touchstart', 'touchmove'和'touchend'。示例代码展示了在iOS和Android设备上，通过绑定事件处理程序到图形形状，动态显示触摸坐标和事件状态。" 137828304,11386600,Python轻松实现文字转语音：十行代码详解,"['Python', '开发语言', '语音合成']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

绑定事件处理程序与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 οnmοusedοwn="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>