使用KineticJS缩放组

zooming a group with KineticJS

本文关键字：缩放 KineticJS 使用      更新时间：2023-09-26

这是我的结构

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组从中心点说，这可能是缩放中心的问题。但由于我没有为mayparentGroup设置任何高度或宽度，我不知道如何调整我的代码。

我现在的东西怎么了？

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);

以下是代码和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>
相关文章：