尝试使用kineticJS将组捕捉到网格，其中一个形状目前奇怪的偏移

Question

    function draw_shape(sides) {

      var shape_group = new Kinetic.Group({
        x: 10,
        y: 10,
        width: 10,
        height: 10,
        draggable: true
      });

      var shape_size = 10
      var radius = shape_size / 2
      var shape = new Kinetic.RegularPolygon({
        x: 10,
        y: 10,
        sides: sides,
        radius: radius,
        fill:'#fff',
        stroke: 'black',
        strokeWidth: 1,
        lineJoin: 'bevel'
      });

      shape_group.on('dragmove', function() {
        var current_cell = current_cell_from_mouse_position()
        shape_group.setX(current_cell.x);
        shape_group.setY(current_cell.y);
      });
      shape_group.add(shape);
      board_layer.add(shape_group);
      stage.add(board_layer);
    }

在这个例子中，current_cell_from_mouse_position（）给了我正确的x和y坐标。此示例在没有组的情况下工作得很好我不知道为什么，但是当我添加组时，会创建一个奇怪的偏移，将组和形状移动到右下角。

任何帮助将不胜感激

Answer 1

将形状的x / y设置为10/10将导致该形状在组内向下移动10个像素。

因此，群组与网格正确对齐。

但您在群组中的形状偏移了10个像素。

治愈：将你的形状的x / y设置为0,0而不是10/10。