HTML5画布随机圈与工具提示

最新推荐文章于 2021-06-24 11:52:05 发布

静美玲蓝蓝的天

最新推荐文章于 2021-06-24 11:52:05 发布

阅读量474

点赞数

分类专栏： HTML5画布随机圈与工具提示文章标签： HTML5画布随机圈与工具提示

本文链接：https://blog.csdn.net/qinlijiess/article/details/17967665

版权

HTML5画布随机圈与工具提示专栏收录该内容

1 篇文章 0 订阅

订阅专栏

比较有趣的一个代码，我一直都调试，还是有点不懂。呵呵。

<!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 addCircle(id) {
        var circle = new Kinetic.Circle({
          x: Math.random() * stage.getWidth(),
          y: Math.random() * stage.getHeight(),
          radius: Math.random() * 50 + 30,
          fill: Kinetic.Util.getRandomColor(),
          id: id
        });
        
        layer.add(circle);
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 260
      });

      var tooltipLayer = new Kinetic.Layer();
      var dragLayer = new Kinetic.Layer();
 
      var tooltip = new Kinetic.Label({
        opacity: 0.75,
        visible: false,
        listening: false
      });
      
      tooltip.add(new Kinetic.Tag({
        fill: 'black',
        pointerDirection: 'down',
        pointerWidth: 10,
        pointerHeight: 10,
        lineJoin: 'round',
        shadowColor: 'black',
        shadowBlur: 10,
        shadowOffset: 10,
        shadowOpacity: 0.2
      }));
      
      tooltip.add(new Kinetic.Text({
        text: '',
        fontFamily: 'Calibri',
        fontSize: 18,
        padding: 5,
        fill: 'white',
        listening: false
      }));
      
      tooltipLayer.add(tooltip);
      
      var layer = new Kinetic.Layer();
      for(var n = 0; n < 50; n++) {
        addCircle(n);
      }

      stage.add(layer).add(dragLayer).add(tooltipLayer);

      stage.on('mouseover mousemove', function(evt) {
        var node = evt.targetNode;
        
        if (node) {
          // update tooltip
          var mousePos = node.getStage().getMousePosition();
          tooltip.setPosition(mousePos.x, mousePos.y - 5);
          tooltip.getText().setText("node: " + node.getId() + ", color: " + node.getFill());
          tooltip.show();
          tooltipLayer.batchDraw();
        }
        else {
          tooltip.hide();
          tooltipLayer.batchDraw();
        }
      }); 

      stage.on('mouseout', function(evt) {
        tooltip.hide();
        tooltipLayer.draw();
      });
      
    </script>
  </body>
</html>

静美玲蓝蓝的天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布随机圈与工具提示

比较有趣的一个代码，我一直都调试，还是有点不懂。呵呵。 body { margin: 0px; padding: 0px; } function addCircle(id) { var circle = new Kinetic.Circle(
复制链接

扫一扫