HTML5画布KineticJS拖拽压力测试10000形状

来源：互联网发布：地图数据采集软件安卓编辑：程序博客网时间：2024/06/15 21:33

直接看代码哦，感觉还挺好的，不过，看了还觉得很深奥的样子啦。呵呵。

<!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(layer) {        var color = colors[colorIndex++];        if(colorIndex >= colors.length) {          colorIndex = 0;        }        var randX = Math.random() * stage.getWidth();        var randY = Math.random() * stage.getHeight();        var circle = new Kinetic.Circle({          x: randX,          y: randY,          radius: 6,          fill: color        });        layer.add(circle);      }      var stage = new Kinetic.Stage({        container: 'container',        width: 578,        height: 200      });      var dragLayer = new Kinetic.Layer();      var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'cyan', 'purple'];      var colorIndex = 0;      var layersArr = [];      /*       * create 10 layers each containing 1000 shapes to create       * 10,000 shapes.  This greatly improves performance because       * only 1,000 shapes will have to be drawn at a time when a       * circle is removed from a layer rather than all 10,000 shapes.       * Keep in mind that having too many layers can also slow down performance.       * I found that using 10 layers each made up of 1,000 shapes performs better       * than 20 layers with 500 shapes or 5 layers with 2,000 shapes       */      for(var i = 0; i < 10; i++) {        var layer = new Kinetic.Layer();        layersArr.push(layer);        for(var n = 0; n < 1000; n++) {          addCircle(layer);        }        stage.add(layer);      }      stage.add(dragLayer);            stage.on('mousedown', function(evt) {        var circle = evt.targetNode;        var layer = circle.getLayer();                circle.moveTo(dragLayer);        layer.draw();        circle.startDrag();      });    </script>  </body></html>

0 0