zooming a group with KineticJS

Question

Here is the structure I have

Layer:
  ParentGroup:
     -Kinetic Image 
     -ChildGroup 
        - Kinetic rectangle
        - Kinetic Text

On my kinetic image (that I retrieve from the server), there is a region of interest. This region of interest is shown by a rectangle (kinetic rectangle here). And I write some label inside this region (which is the kinetic text).

I would like to apply some manipulations to the whole group. Translation is ok, but I have problems with zoom and rotation. Here is my zoom function

function zoomIn() {
      var scale=parentGroup.getScale();
      scale.x *= zoomFactor; //zoomFactor is a global variable
      scale.y *= zoomFactor;
      parentGroup.setScale(scale); 
      layer.draw()
}

What happened here is that the group was zoomed in but translated (right and down) at the same time. If I keep zooming, the image goes out of the canvas. I tried, before drawing the layer : parentGroup.setPosition (0,0); //although I know that I've never modified this position, but nothing changed.

I read here KineticJS Canvas - Scale group from center point that it is maybe a problem of center of zooming. But as I don't set any height or width to may parentGroup, I didn't know how to adapt my code.

What's wrong with what I have right now?

Nicely written question, good job! Unfortunately with this type of problem, it would be much easier to help you if you could supply us with a jsfiddle.. Although, markE did mention in the comments of the answer you linked, that if you don't set Height or Width of parentGroup, then you can set an arbitrary centre point to zoom towards. — projeqht
Well, actually, I wrote a simplified version of the code that I have. I'm not sure I can put it in a jsfiddle. But I read again markE's comment and I think that's what I need to do. As I want to set the center of the zoom to the center of the canvas, I set the position of the group to (innerWidth()/2, innerHeight()/2) . but it didn't work .. — user1499220

markE markE · Accepted Answer · 2013-08-04T05:00:30

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>

zooming a group with KineticJS

1 Answers