KineticJS帆布 - 从中心点刻度小组(KineticJS Canvas - Scale

我想我的规模集团（图像和东西）。

group.setScale(zoom, zoom);

http://jsfiddle.net/K8nK3/

但是，当我扩展我的团队，我认为它不是从我组的中心规模。我觉得像这样

我想从像中心规模

我尝试更多，但它不是成功。我怎样才能做到这一点，谢谢。

Answer 1:

[编辑，以更好地适应提问的需求]

以下是如何从中心点缩放动力学组

首先，我们存储原始组的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>

Answer 2:

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

Answer 3:

问题1：我需要从它的中心扩展一组。问题2：动力学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;
}