Fatal编程技术网
  • javascript/
  • Javascript KineticJS画布-从中心点开始缩放组

Javascript KineticJS画布-从中心点开始缩放组

javascript canvas html5-canvas

Javascript KineticJS画布-从中心点开始缩放组,javascript,canvas,html5-canvas,kineticjs,Javascript,Canvas,Html5 Canvas,Kineticjs,我想扩大我的团队（图片和其他东西） 但当我衡量我的团队时，我认为它不是从我的团队中心来衡量的。我想是这样的 我希望它从中心按比例缩放，如 我尝试了更多，但没有成功。我该怎么做，谢谢。[编辑以更好地满足提问者的需要] 以下是如何从中心点缩放动力学组 首先，我们存储原始组的centerX和centerY，以便将组保持在中心位置： group.cx=group.getX()+group.getWidth()/2; group.cy=group.getY()+group.g

我想扩大我的团队（图片和其他东西）

但当我衡量我的团队时，我认为它不是从我的团队中心来衡量的。我想是这样的

我希望它从中心按比例缩放，如

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

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

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

首先，我们存储原始组的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();
      }
下面是代码和小提琴：


更大的
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：400
});
var layer=新的动能层（）；
//确保设置宽度和高度
//这种方法需要它们才能起作用
var组=新的动力学组({
x:100，
y:100，
宽度：100，
身高：100
});
//存储原始组中心
//所以我们可以把小组集中在那里
group.cx=group.getX（）+group.getWidth（）/2；
group.cy=group.getY（）+group.getHeight（）/2；
//自定义缩放功能，可同时对两者进行缩放
//缩放组并将结果居中
组规模=功能（x，y）{
组。设置刻度（x，y）；
组设置位置(
group.cx group.getWidth（）/2*group.getScale（）.x，
group.cy group.getHeight（）/2*group.getScale（）.y）；
group.draw（）；
}
var box1=新的动能.Rect({
x:0,，
y:0，
宽度：50，
身高：50，
填充：“蓝色”，
笔画：“黑色”，
冲程宽度：4
});
添加组（第1框）；
var box2=新的动能.Rect({
x:50，
y:50，
宽度：50，
身高：50，
填充：“绿色”，
笔画：“黑色”，
冲程宽度：4
});
添加组（第2框）；
层。添加（组）；
阶段。添加（层）；
var scaleFactor=1；
$（“#更大”）。单击（函数（）{
scaleFactor+=0.10；
组.量表（scaleFactor，scaleFactor）；
console.log（scaleFactor）；
});
});
您是否尝试使用偏移属性？i、 偏移量：[宽度/2，高度/2]

问题1：我需要从一个组的中心缩放该组。 问题2：除非在创建时显式设置宽度，否则Dynamic JS group.getWidth（）和group.getHeight（）不起作用。 问题3：我不知道宽度和高度，我在动态地改变形状

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

解决方案如下

（可能有更好的方法，但这是我目前的编程水平……如果有人能在其中添加递归来查看包含包含组的组等，那就太好了。）

var results=getGroupMinsAndMaxes（myKineticGroup）；
console.log（'results:'+results.groupMinX，results.groupMaxX，
results.groupMinY，results.groupMaxY）；
函数getGroupMinsAndMaxes（组）{
//注意，这不处理属于组的子级，
//它希望孩子们是有形状的
var项目；
var-groupMinX=99999；
var groupMaxX=-99999；
var-groupMinY=99999；
变量groupMaxY=-99999；
var shapeFunctionDefinition=''；
var界限={}；
对于（变量i=0；igroupMaxX）{groupMaxX=bounds.shapeMaxX；}
如果（bounds.shapeMinYgroupMaxY）{groupMaxY=bounds.shapeMaxY；}
}
}
返回{
groupMinX:groupMinX，
groupMaxX:groupMaxX，
groupMinY:groupMinY，
groupMaxY:groupMaxY
};
}
函数GetShapeMinandMaxes（形状）{
//形状定义作为字符串传递
var regex=/[+-]？\d+\.\d+/g；
var floats=shape.match（regex）.map（函数（v）{
返回浮点数（v）；
});
//预设一些不切实际的大数字
//我们永远不会相遇
var shapeMinX=99999；
var shapeMaxX=-99999；
var shapeMinY=99999；
var shapemax=-99999；
对于（变量i=0；i形状XY）{
ShapeMax=浮动[i]；
}
}否则{
//检查X值
if（浮动[i]shapeMaxX）{
shapeMaxX=浮动[i]；
}
}
}
返回{
shapeMinX:shapeMinX，
shapeMaxX:shapeMaxX，
shapeMinY:shapeMinY，
形状运动：形状运动
};
}
函数isOdd（num）{
返回数值%2；
}
最简单的方法是重新定位偏移/使偏移居中。所有缩放和移动都将基于新的偏移位置

偏移量（{x:group.width（）*.5，y:group.height（）*.5}）

我的组中有一些对象。我不能这样做。你有其他方法吗？是的，请看我编辑的答案，它应该能满足你从中心扩展一个组的需要。它是n 
      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();
      }

<!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>

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