Zooming A Group With Kineticjs

October 24, 2023 Post a Comment

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:

Baca Juga

//set the groupoffsetto 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><metacharset="utf-8"><scripttype="text/javascript"src="http://code.jquery.com/jquery.min.js"></script><scriptsrc="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 = newKinetic.Stage({
      container: 'container',
      width: 400,
      height: 400
    });
    var layer = newKinetic.Layer();
    stage.add(layer);


    // parentGroup is used in jquery events// so make it globalvar parentGroup;

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

    // build everything, wire eventsfunctionstart(){

          parentGroup=newKinetic.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=newKinetic.Image({
              image:image,
              x:0,
              y:0,
              width:image.width,
              height:image.height
          });
          parentGroup.add(kImage);

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

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

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

          var childText=newKinetic.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><buttonid="larger">Larger</button><buttonid="smaller">Smaller</button><buttonid="rotateCW">Rotate clockwise</button><buttonid="rotateCCW">Rotate CCW</button><divid="container"></div></body></html>

JavaScript Apprenticeships

Zooming A Group With Kineticjs

Solution 1:

Post a Comment for "Zooming A Group With Kineticjs"