Javascript kineticjs拖放保持连接的框和线完好无损

您好，我一直在处理kineticjs的一个问题，在网格上使用三个框和两条线。 我想得到的是能够拖动它们并将它们捕捉到网格中。他们现在这样做了，但是队伍在增长。我宁愿看到附加的矩形和线条，直到尾部位于形状的中心。 如果它这样做，线条就不应该变成对角线。其余的“蛇”应该跟随线条。线条应该保持在网格线上，并保持在形状中心（蛇必须通过形状蠕动才能吐出）

不确定这是否以一种可以理解的方式描述了我的问题；但我希望如此

这是我的小提琴

我的问题在dragFunction（）上；内部绘制内部状态（单元）

只要移动形状就可以得到我所说的效果线

另外，如果有人想帮助创建游戏，请告诉我：）

---

干杯，提前谢谢你

我想我得到了它的函数ManhattanDistance（Point，Goal）{//线性运动-没有对角线-只有基本方向（NSEW）返回abs（Point.x-Goal.x）+abs（Point.y-Goal.y）；}所以你解决了这个问题？如果是这样，请回答您自己的问题并将其标记为已接受的答案，让我们知道您是如何做到这一点的。谢谢

   var dragFunction = function() {
      line1.setPoints([box1.getX()+box1.getWidth()/2, box1.getY()+box1.getHeight()/2 , box2.getX()+box2.getWidth()/2, box2.getY()+box2.getHeight()/2]);
      line2.setPoints([box2.getX()+box2.getWidth()/2, box2.getY()+box2.getHeight()/2 , box3.getX()+box3.getWidth()/2, box3.getY()+box3.getHeight()/2]);
     // internal_state_layer.draw();
   }
   box1.on('dragstart dragmove', function(){
     cell = current_cell(stage.getMousePosition())
     box1.setPosition(cell.x - half_button_size, cell.y - half_button_size);
     dragFunction();
   });