组与KineticJS HTML5画布里面的知识，这个大家觉得怎么样？

最新推荐文章于 2014-08-14 11:36:00 发布

lingchuyis

最新推荐文章于 2014-08-14 11:36:00 发布

阅读量564

点赞数

分类专栏：组与KineticJS里面的知识点文章标签：组与KineticJS的代码 html5里面的代码

组与KineticJS里面的知识点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

组织多个形状KineticJS一起,我们可以实例化一个Kinetic.Group()对象,然后添加形状用add()方法。分组的形状在一起确实方便当我们想改变多个形状在一起。

例如:如果我们想要移动,旋转,或规模一次多个形状。组织也可以被添加到其他组织来创建更复杂的节点树。列出了完整的属性和方法,看看动能。

<!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.1.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var shapesLayer = new Kinetic.Layer();

      /*
       * create a group which will be used to combine
       * multiple simple shapes.  Transforming the group will
       * transform all of the simple shapes together as
       * one unit
       */
      var group = new Kinetic.Group({
        x: 220,
        y: 40,
        rotationDeg: 20
      });

      var colors = ['red', 'orange', 'yellow'];

      for(var n = 0; n < 3; n++) {
        // anonymous function to induce scope
        (function() {
          var i = n;
          var box = new Kinetic.Rect({
            x: i * 30,
            y: i * 18,
            width: 100,
            height: 50,
            name: colors[i],
            fill: colors[i],
            stroke: 'black',
            strokeWidth: 4
          });

          group.add(box);
        })();
      }

      shapesLayer.add(group);
      stage.add(shapesLayer);
    </script>
  </body>
</html>