jquery - 尝试使用具有一种形状的 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。