TML5画布桌面和移动事件支持教程

最新推荐文章于 2023-04-02 22:55:45 发布

赵红雪踏破红尘

最新推荐文章于 2023-04-02 22:55:45 发布

阅读量496

点赞数

分类专栏： TML5画布桌面和移动事件支持教程文章标签： TML5画布桌面和移动事件支持教程

本文链接：https://blog.csdn.net/zhaohongxuess/article/details/17720017

版权

TML5画布桌面和移动事件支持教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

将事件处理程序添加到形状,与KineticJS工作桌面和移动应用程序,我们可以使用on()方法,传递事件。例如,为了mousedown事件触发在桌面和移动应用程序,我们可以使用“mousedown touchstart”事件对媒介。为了让mouseup事件被触发的桌面和移动应用程序,我们可以使用“mouseup touchend”事件。我们还可以使用“双击dbltap”事件对绑定一个双击事件,在桌面和移动设备。

说明:Mousedown mouseup、touchstart或touchend圆桌面或者移动设备上观察相同的功能。

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width"/>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.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 numEvents = 0;

      var circle = new Kinetic.Circle({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2 + 10,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

      /*
       * mousedown and touchstart are desktop and
       * mobile equivalents so they are often times
       * used together
       */
      circle.on('mousedown touchstart', function() {
        writeMessage('Mousedown or touchstart');
      });
      /*
       * mouseup and touchend are desktop and
       * mobile equivalents so they are often times
       * used together
       */
      circle.on('mouseup touchend', function() {
        writeMessage('Mouseup or touchend');
      });

      layer.add(circle);
      layer.add(text);
      stage.add(layer);

    </script>
  </body>
</html>

赵红雪踏破红尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TML5画布桌面和移动事件支持教程

将事件处理程序添加到形状,与KineticJS工作桌面和移动应用程序,我们可以使用on()方法,传递事件。例如,为了mousedown事件触发在桌面和移动应用程序,我们可以使用“mousedown touchstart”事件对媒介。为了让mouseup事件被触发的桌面和移动应用程序,我们可以使用“mouseup touchend”事件。我们还可以使用“双击dbltap”事件对绑定一个双击事件,在桌
复制链接

扫一扫