kineticjs - 动能容器的偏移和位置有什么区别

Question

Kinetic.js 允许您设置和获取动力学容器子类（形状、组、层、舞台等）的位置和偏移量。

请解释偏移量和位置属性之间的区别。什么时候应该使用一个与另一个。

Answer 1

位置对于设置容器应该放在父容器上的什么位置很有用。

偏移对于设置容器中心的位置很有用。

默认情况下，当您设置矩形的位置（例如）时，您正在设置左上角的位置。所以左上角是矩形的“中心”。如果您将使用旋转，矩形将与其中心相关地旋转。这里的例子：http: //jsfiddle.net/lavrton/55Bxq/

      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var layer = new Kinetic.Layer();
      var rect1 = new Kinetic.Rect({
         x : 100,
         y : 100,
         width: 50,
         height: 50,
         fill: 'green',
         stroke: 'black'
      });
      layer.add(rect1);
    var rect2 = new Kinetic.Rect({
        x : 250,
        y : 125,
        width: 50,
        height: 50,
        fill: 'red',
        stroke: 'black',
        offset : {x : 25, y : 25}
      });
      layer.add(rect2);
      stage.add(layer);

      var tween1 = new Kinetic.Tween({
          node : rect1,
          duration: 1,
          rotation: Math.PI * 2
      });
    var tween2 = new Kinetic.Tween({
          node : rect2,
          duration: 1,
          rotation: Math.PI * 2
      });

      // start tween after 2 seconds
      setTimeout(function() {
        tween1.play();
        tween2.play();
      }, 2000);