HTML5画布的多事件绑定教程

最新推荐文章于 2021-09-23 10:41:55 发布

黄秋丽也能编程

最新推荐文章于 2021-09-23 10:41:55 发布

阅读量713

点赞数

分类专栏： HTML5画布的多事件绑定教程文章标签： HTML5画布的多事件绑定教程

本文链接：https://blog.csdn.net/huangqiushegnss/article/details/17736963

版权

HTML5画布的多事件绑定教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

绑定多个事件与KineticJS单个处理程序,我们可以使用on()方法并传递一个包含多个事件类型的空间分隔的字符串。
产品说明:鼠标悬停、mousedown和mouseup圈观察,函数绑定到每个事件循环执行。

<!DOCTYPE HTML>
<html>
  <head>
    <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
      });

      circle.on('mouseover mousedown mouseup', function() {
        writeMessage('Multi-event binding!  Events: ' + (++numEvents));
      });
      circle.on('mouseout', function() {
        writeMessage('');
      });

      layer.add(circle);
      layer.add(text);
      stage.add(layer);
 
    </script>
  </body>
</html>

黄秋丽也能编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布的多事件绑定教程

绑定多个事件与KineticJS单个处理程序,我们可以使用on()方法并传递一个包含多个事件类型的空间分隔的字符串。产品说明:鼠标悬停、mousedown和mouseup圈观察,函数绑定到每个事件循环执行。 body { margin: 0px; padding: 0px; }
复制链接

扫一扫