HTML5知识：KineticJS里面Canvas形象的事件！

最新推荐文章于 2016-09-06 23:54:52 发布

jundas

最新推荐文章于 2016-09-06 23:54:52 发布

阅读量610

点赞数

分类专栏： KineticJS里面Canvas形象的事件文章标签： KineticJS里面Canvas形象的

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

版权

KineticJS里面Canvas形象的事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

只检测事件为非透明像素在图像与KineticJS,我们可以使用createImageHitRegion()方法来生成一个更精确的图像严重的地区。默认情况下,事件可以触发任何像素内的图像,即使它是透明的。这个createImageHitRegion()方法还接受一个可选的回调方法,当图像执行打击地区已经建立。

注意:createImageHitRegion()方法需要的图像是托管在一个web服务器相同的域代码执行它。

产品说明:鼠标在猴子和狮子和观察mouseover事件绑定。请注意,事件触发对猴子来说如果你鼠标经过图像的任何部分,包括透明像素。由于我们创建了一个图像严重的地区为狮子,透明像素被忽略,使更精确的事件检测。

<!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.2.min.js"></script>
    <script defer="defer">
      function writeMessage(message) {
        text.setText(message);
        layer.draw();
      }
      function loadImages(sources, callback) {
        var assetDir = 'http://www.html5canvastutorials.com/demos/assets/';
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = assetDir + sources[src];
        }
      }
      function buildStage(images) {
        var monkey = new Kinetic.Image({
          image: images.monkey,
          x: 120,
          y: 50
        });

        var lion = new Kinetic.Image({
          image: images.lion,
          x: 280,
          y: 30
        });
      
        monkey.on('mouseover', function() {
          writeMessage('mouseover monkey');
        });

        monkey.on('mouseout', function() {
          writeMessage('');
        });

        lion.on('mouseover', function() {
          writeMessage('mouseover lion');
        });

        lion.on('mouseout', function() {
          writeMessage('');
        });

        lion.createImageHitRegion(function() {
          layer.draw();
        });

        layer.add(monkey);
        layer.add(lion);
        layer.add(text);
        stage.add(layer);
      }
      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 sources = {
        lion: 'lion.png',
        monkey: 'monkey.png'
      };
       
      loadImages(sources, buildStage);

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

jundas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5知识：KineticJS里面Canvas形象的事件！

只检测事件为非透明像素在图像与KineticJS,我们可以使用createImageHitRegion()方法来生成一个更精确的图像严重的地区。默认情况下,事件可以触发任何像素内的图像,即使它是透明的。这个createImageHitRegion()方法还接受一个可选的回调方法,当图像执行打击地区已经建立。注意:createImageHitRegion()方法需要的图像是托管在一个we
复制链接

扫一扫