Question

这是我的结构

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

在我的动态图像（我从服务器检索）上，有一个感兴趣的区域。这个感兴趣的区域用矩形表示（这里是动力矩形）。我在这个区域内写了一些标签（这是动态文本）。

我想对整个小组应用一些操作。翻译还可以，但我有缩放和旋转方面的问题。这是我的缩放功能

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

这里发生的事情是该组被放大但同时翻译（向右和向下）。如果我继续缩放，图像会从画布中移出。我在绘制图层之前尝试过：parentGroup.setPosition (0,0); //虽然我知道我从未修改过这个位置，但没有任何改变。

我在这里阅读KineticJS Canvas - Scale group from center point，这可能是缩放中心的问题。但由于我没有为parentGroup设置任何高度或宽度，我不知道如何调整我的代码。

我现在有什么问题？

Answer 1

KineticJS：如何缩放，旋转和拖动组

[基于对提问者需求的更好理解，简化了原始答案]

编码变得更加简单，因为您允许组的注册点成为其中心点。

注册点是比例变换的缩放点和旋转的旋转点。

以下是如何将注册点设置为组的中心：

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

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

设置注册点后，只需正常使用group.setScale和group.rotateDeg：

  // scale the group from its centerpoint

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

  // rotate the group at its centerpoint

  parentGroup.rotateDeg(30);

这是代码和小提琴：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>

使用KineticJS缩放组

1 个答案: