Zooming A Group With KineticJS

Here is the structure I have Layer: ParentGroup: -Kinetic Image -ChildGroup - Kinetic rectangle - Kinetic Text On my kinetic image (that I retrieve f

Solution 1:

KineticJS: How to Zoom, Rotate and Drag a Group

[simplified the original answer based on better understanding of questioners needs]

Coding becomes much simpler since you allow your registration point for your group to be its centerpoint.

The registration point is the scaling point for scale transforms and the rotation point for rotations.

Here is how to set the registration point to the center of the group:

  // set the group offset to the group’s centerpoint

  parentGroup.setOffset(parentGroup.getWidth()/2,parentGroup.getHeight()/2);

After setting the registration point, just use group.setScale and group.rotateDeg normally:

  // scale the group from its centerpoint

  parentGroup.setScale(parentGroup.getScale().x+0.10);

  // rotate the group at its centerpoint

  parentGroup.rotateDeg(30);

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/XWW7Z/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>

<style>
body{ padding:15px; }
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
      container: 'container',
      width: 400,
      height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    // parentGroup is used in jquery events
    // so make it global
    var parentGroup;

    // load the image and then start the app
    var image=new Image();
    image.onload=function(){
        start();
    }
    image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";

    // build everything, wire events
    function start(){

          parentGroup=new Kinetic.Group({
              x:image.width/2,
              y:image.height/2,
              width:image.width,
              height:image.height,
              draggable:true
          });
          parentGroup.setOffset(parentGroup.getWidth()/2,parentGroup.getHeight()/2);
          layer.add(parentGroup);

          var kImage=new Kinetic.Image({
              image:image,
              x:0,
              y:0,
              width:image.width,
              height:image.height
          });
          parentGroup.add(kImage);

          var childGroup=new Kinetic.Group({
              x:0,
              y:0,
              width:100,
              height:50
          });
          parentGroup.add(childGroup);

          // this outline rect is just for illustration
          var boundingRect=new Kinetic.Rect({
              x:0,
              y:0,
              width:parentGroup.getWidth(),
              height:parentGroup.getHeight(),
              stroke:"black",
              strokeWidth:.75
          });
          parentGroup.add(boundingRect);

          var childRect=new Kinetic.Rect({
              x:0,
              y:0,
              width:105,
              height:25,
              stroke:"lightgray",
              fill:"skyblue"
          });
          childGroup.add(childRect);

          var childText=new Kinetic.Text({
              x:5,
              y:3,
              fontSize:18,
              text:"Hello, World",
              fill:"blue"
          });
          childGroup.add(childText);


          layer.draw();


          // scale up by +0.10 at parentGroup registration point
          $("#larger").click(function(){
              parentGroup.setScale(parentGroup.getScale().x+0.10);
              layer.draw();
          });

          // scale down by +0.10 at parentGroup registration point
          $("#smaller").click(function(){
              parentGroup.setScale(parentGroup.getScale().x-0.10);
              layer.draw();
          });

          // rotate CW by 30 degrees at parentGroup registration point
          $("#rotateCW").click(function(){
              parentGroup.rotateDeg(30);
              layer.draw();
          });
          // rotate CCW by 30 degrees at parentGroup registration point
          $("#rotateCCW").click(function(){
              parentGroup.rotateDeg(-30);
              layer.draw();
          });

    } 


}); // end $(function(){});

</script>       
</head>

<body>
    <button id="larger">Larger</button>
    <button id="smaller">Smaller</button>
    <button id="rotateCW">Rotate clockwise</button>
    <button id="rotateCCW">Rotate CCW</button>
    <div id="container"></div>
</body>
</html>