0 
    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 座標を返します。この例は、グループなしでうまく機能します。理由はわかりませんが、グループを追加すると奇妙なオフセットが作成され、グループとシェイプが右下に移動します。

任意の助けをいただければ幸いですありがとう

4

1 に答える 1

1

シェイプの x/y を 10/10 に設定すると、そのシェイプはグループ内で 10 ピクセルだけ右下に移動します。

したがって、グループはグリッドに適切に配置されます。

しかし、グループ内の形状は 10 ピクセルずれています。

解決策: シェイプの x/y を 10/10 ではなく 0,0 に設定します。

于 2013-10-04T17:27:10.333 に答える