2

我想扩大我的小组（图像和其他东西）。

group.setScale(zoom, zoom);

http://jsfiddle.net/K8nK3/

但是当我扩展我的团队时，我认为它不是从我的团队中心扩展的。我想像这样
在此处输入图像描述
我希望它从中心缩放
在此处输入图像描述

我尝试了更多，但并不成功。我该怎么做，谢谢。

4

4 回答 4

2

[编辑以更好地满足提问者的需求]

这是从中心点缩放动力学组的方法

首先我们存储原始组的 centerX 和 centerY 以便我们可以保持组居中：

      group.cx=group.getX()+group.getWidth()/2;
      group.cy=group.getY()+group.getHeight()/2;

然后我们编写一个自定义缩放方法，既可以缩放组又可以重新居中：

      group.scale=function(x,y){
          group.setScale(x,y);
          group.setPosition(
              group.cx-group.getWidth()/2*group.getScale().x,
              group.cy-group.getHeight()/2*group.getScale().y);
          group.draw();
      }

这是代码和小提琴：http: //jsfiddle.net/m1erickson/dVGGz/

<!DOCTYPE HTML>
<html>
  <head></head>
  <body>
    <button id="larger">Larger</button>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script>
    $(function(){
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
      });
      var layer = new Kinetic.Layer();

      // Be sure to set width and height
      // They are required for this method to work
      var group = new Kinetic.Group({
        x: 100,
        y: 100,
        width:100,
        height:100
      });
      // store the original group center
      // so we can center the group there
      group.cx=group.getX()+group.getWidth()/2;
      group.cy=group.getY()+group.getHeight()/2;
      // custom scale function to both
      // scale the group and center the results
      group.scale=function(x,y){
          group.setScale(x,y);
          group.setPosition(
              group.cx-group.getWidth()/2*group.getScale().x,
              group.cy-group.getHeight()/2*group.getScale().y);
          group.draw();
      }

      var box1 = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 50,
        height: 50,
        fill: "blue",
        stroke: 'black',
        strokeWidth: 4
      });
      group.add(box1);

      var box2 = new Kinetic.Rect({
        x: 50,
        y: 50,
        width: 50,
        height: 50,
        fill: "green",
        stroke: 'black',
        strokeWidth: 4
      });
      group.add(box2);

      layer.add(group);
      stage.add(layer);

      var scaleFactor=1;
      $("#larger").click(function(){
          scaleFactor+=0.10;
          group.scale(scaleFactor,scaleFactor);
          console.log(scaleFactor);
      });

});

    </script>
  </body>
</html>
于 2013-04-06T17:18:30.467 回答
0

最简单的方法是重新定位/居中偏移。所有缩放和移动都将基于您的新偏移位置。

group.offset( { x: group.width() * .5, y: group.height() * .5 } );

http://kineticjs.com/docs/Kinetic.Group.html

于 2014-05-08T15:16:27.743 回答
0

您是否尝试过使用偏移属性？即偏移量：[宽度/2，高度/2]

于 2013-09-29T16:55:47.580 回答
0

问题#1：我需要从中心缩放一个组。问题 #2：Kinetic JS group.getWidth() 和 group.getHeight() 不起作用，除非您在创建时明确设置宽度。问题#3：我不知道宽度和高度，我正在动态改变形状。

这意味着为了尝试您的代码，我必须编写自己的 getWidth 和 getHeight 函数。那我就可以用你提出的方法了。

下面的解决方案。

（可能有更好的方法，但这是我现在的编程水平......如果有人可以为此添加递归以查看包含包含组的组等的组，那就太好了。）

var results = getGroupMinsAndMaxes(myKineticGroup);
console.log('results: '+ results.groupMinX, results.groupMaxX, 
     results.groupMinY, results.groupMaxY);



function getGroupMinsAndMaxes( group ) {

   // note this does not handle children that are groups, 
   // it expects children to be shapes

   var item;
   var groupMinX = 99999;
   var groupMaxX = -99999;
   var groupMinY = 99999;
   var groupMaxY = -99999;
   var shapeFunctionDefinition = '';
   var bounds = {};

   for (var i = 0; i < group.children.length; i++ ) {

       item = group.children[ i ];
       if ( item.getType() !== 'Shape' ) {

            alert('The getGroupMinsAndMaxes function is not designed to handle groups that contain groups.');
            break;

       } else {

            shapeFunctionDefinition = item.attrs.drawFunc.toString();

            bounds = getShapeMinsAndMaxes( shapeFunctionDefinition );

            if ( bounds.shapeMinX < groupMinX ) { groupMinX = bounds.shapeMinX; }
            if ( bounds.shapeMaxX > groupMaxX ) { groupMaxX = bounds.shapeMaxX; }
            if ( bounds.shapeMinY < groupMinY ) { groupMinY = bounds.shapeMinY; }
            if ( bounds.shapeMaxY > groupMaxY ) { groupMaxY = bounds.shapeMaxY; }

        }
   }

    return {
            groupMinX: groupMinX,
            groupMaxX: groupMaxX,
            groupMinY: groupMinY,
            groupMaxY: groupMaxY
        };

}

function getShapeMinsAndMaxes( shape ) {

   // the shape definition is passed as a string

    var regex = /[+-]?\d+\.\d+/g;

    var floats = shape.match(regex).map(function (v) {
        return parseFloat(v);
    });

   // preset some unrealistically large numbers which 
   // we will never encounter

    var shapeMinX = 99999;
    var shapeMaxX = -99999;
    var shapeMinY = 99999;
    var shapeMaxY = -99999;


    for (var i = 0; i < floats.length; i++) {

        if (isOdd(i)) {

            // Check Y values
            if (floats[i] < shapeMinY) {
                shapeMinY = floats[i];
            }
            if (floats[i] > shapeMaxY) {
                shapeMaxY = floats[i];
            }

        } else {

            // Check X values
            if (floats[i] < shapeMinX) {
                shapeMinX = floats[i];
            }
            if (floats[i] > shapeMaxX) {
                shapeMaxX = floats[i];
            }

        }
    }

    return {
            shapeMinX: shapeMinX,
            shapeMaxX: shapeMaxX,
            shapeMinY: shapeMinY,
            shapeMaxY: shapeMaxY
        };

}


function isOdd(num) {
    return num % 2;
}
于 2014-01-24T23:43:15.153 回答