KineticJS Canvas - 从中心点起的刻度组

我想缩放我的组（图像和其他东西）。
KineticJS Canvas - 从中心点起的刻度组

group.setScale(zoom, zoom);

http://jsfiddle.net/K8nK3/

但是，当我扩展我的团队，我认为它不是从我组的中心规模。我觉得像这样
enter image description here
我想从中心规模类似

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

来源

2013-04-06 DeLe

不知道有关的动能，但与fabric.js，你只需要改变originX/originY属性中心/中心（左/顶）。 – kangax 2013-04-06 21:26:28

你有任何与我的例子结构库的例子谢谢 – DeLe 2013-04-07 01:38:22

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

以下是如何从中心点

首先我们存储原始组的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-06 17:18:30 markE

我在我的组上有一些对象。我不能这样做。你有别的办法吗？ – DeLe 2013-04-06 17:32:26

是的，请参阅我编辑的答案，该答案应满足您从中心扩展组的需求。 – markE 2013-04-07 05:07:33

这不适用于我的情况。在我的上下文中，组不保持对象（它没有宽度和高度），组可以拖动（当我拖动时再次执行点中心）。我认为'缩放点'被抵消。你可以再试一次我的项目吗？ – DeLe 2013-04-07 07:25:01

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

来源

2013-09-29 16:55:47 giuseppe

问题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-24 23:43:15 JSdc

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

group.offset（{X：group.width（）* 0.5，Y：group.height（）* 0.5}）;

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

来源

2014-05-08 15:16:27

KineticJS Canvas - 从中​​心点起的刻度组

回答

相关问题

KineticJS Canvas - 从中心点起的刻度组