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

来源：互联网发布：淘宝找报销发票关键词编辑：程序博客网时间：2024/05/22 11:42

将事件处理程序添加到形状,与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