HTML5里面的Canvas听或不听KineticJS事件

最新推荐文章于 2022-06-27 21:12:16 发布

jundas

最新推荐文章于 2022-06-27 21:12:16 发布

阅读量531

点赞数

分类专栏： Canvas听或不听KineticJS事件文章标签： Canvas听或不听KineticJS事

本文链接：https://blog.csdn.net/jundas/article/details/12685173

版权

Canvas听或不听KineticJS事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

听或不听KineticJS事件,我们可以设置监听配置对象的属性为true还是false当一个形状是实例化,或者我们可以设置听力物业与setListening()方法。一旦我们设置听力属性为一个或多个节点,我们还将需要重新绘制了图对于每个受影响的层与drawHit()方法。

产品说明:鼠标移至椭圆形观察,事件处理程序不执行。点击“听”来开始监听事件,事件处理程序,观察现在就执行。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #buttons {
        position: absolute;
        left: 10px;
        top: 0px;
      }
      button {
        margin-top: 10px;
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <div id="buttons">
      <button id="listen">
        Listen
      </button> 
      <button id="dontListen">
        Dont' Listen
      </button>
    </div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.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: 70,
        y: 10,
        fontFamily: 'Calibri',
        fontSize: 24,
        text: '',
        fill: 'black'
      });

      var oval = new Kinetic.Circle({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        radius: 50,
        scaleX: 2,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        strokeScaleEnabled: false,
        listening: false
      });

      oval.on('mouseover', function() {
        writeMessage('Mouseover oval');
      });
      oval.on('mouseout', function() {
        writeMessage('');
      });

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

      document.getElementById('listen').addEventListener('click', function() {
        oval.setListening(true);
        layer.draw();
      }, false);

      document.getElementById('dontListen').addEventListener('click', function() {
        oval.setListening(false);
        layer.draw();
      }, false);
    </script>
  </body></html>

jundas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5里面的Canvas听或不听KineticJS事件

听或不听KineticJS事件,我们可以设置监听配置对象的属性为true还是false当一个形状是实例化,或者我们可以设置听力物业与setListening()方法。一旦我们设置听力属性为一个或多个节点,我们还将需要重新绘制了图对于每个受影响的层与drawHit()方法。产品说明:鼠标移至椭圆形观察,事件处理程序不执行。点击“听”来开始监听事件,事件处理程序,观察现在就执行。
复制链接

扫一扫