HTML5画布拖放多个图像边界高亮显示

最新推荐文章于 2021-06-22 19:34:17 发布

limeiyans

最新推荐文章于 2021-06-22 19:34:17 发布

阅读量990

点赞数 1

分类专栏： HTML5画布拖放多个图像边界高亮显示文章标签： HTML5画布拖放多个图像边界高亮显示

本文链接：https://blog.csdn.net/limeiyans/article/details/18271277

版权

HTML5画布拖放多个图像边界高亮显示专栏收录该内容

1 篇文章 0 订阅

订阅专栏

比较有意思的代码，不多说，直接看：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.2-beta.js"></script>
    <script>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        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 = sources[src];
        }
      }
      function initStage(images) {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

        // darth vader
        var darthVaderImg = new Kinetic.Image({
          image: images.darthVader,
          x: 100,
          y: 40,
          width: 200,
          height: 137,
          draggable: true,
          stroke: 'red',
          strokeWidth: 10,
          strokeEnabled: false
        });

        layer.add(darthVaderImg);

        // yoda
        var yodaImg = new Kinetic.Image({
          image: images.yoda,
          x: 350,
          y: 55,
          width: 93,
          height: 104,
          draggable: true,
          stroke: 'red',
          strokeWidth: 10,
          strokeEnabled: false
        });

        layer.add(yodaImg);
        stage.add(layer);

        // use event delegation to update pointer style
        // and apply borders
        layer.on('mouseover', function(evt) {
          var shape = evt.shape;
          document.body.style.cursor = 'pointer'; 
          shape.enableStroke();
          layer.draw();
        });
        layer.on('mouseout', function(evt) {
          var shape = evt.shape;
          document.body.style.cursor = 'default';  
          shape.disableStroke();
          layer.draw();
        });
      }
      var sources = {
        darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
      };
      loadImages(sources, initStage);

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