получить свойства формы в другом слое Konva JS

Question

У меня есть следующий код, где форма динамически создается. При нажатии стрелка формы генерируется, которая может быть изменена с помощью контроллера на голове стрелки.

Теперь, когда я перетаскиваю фигуру, мне нужно переместить начальную точку стрелки вместе с ней. Но поскольку стрелка находится в другом слое, я не могу ссылаться на нее. Как это может быть сделано?

Пример кода:

var stage = new Konva.Stage({ 
 
     container: 'canvas', // id of container <div> 
 
     width: 500, 
 
     height:300 
 
    }); 
 
var layer = new Konva.Layer(); 
 
jQuery("#add-shape").click(function(){ 
 
addShape(); 
 
}); 
 
    
 
var addShape = function(){ 
 
    
 
    
 
var parentContainer = new Konva.Rect({ 
 
      x: stage.getWidth()/2, 
 
      y: stage.getHeight()/2, 
 
      width: 200, 
 
      height: 60, 
 
      cornerRadius: 10, 
 
      fill: '#ccc' 
 
     }); 
 
     
 
     var smallCircle = new Konva.Circle({ 
 
      x: stage.getWidth()/2 + 200, 
 
      y: stage.getHeight()/2 + 30, 
 
      radius: 15, 
 
      fill: "#F2784B", 
 
      stroke: "white", 
 
      strokeWidth: 2 
 
     }); 
 
     
 
     smallCircle.on('click', function() { 
 
     console.log(this.getX(),this.getY()); 
 
     var mousePos = stage.getPointerPosition(); 
 
      addArrow(mousePos.x,mousePos.y,layer); 
 
     }); 
 
     
 
     layer.on('dragstart dragmove', function() { 
 
      \t \t //change the starting point of arrow here 
 
     }); 
 
     layer.add(parentContainer); 
 
     layer.add(smallCircle); 
 
     layer.draggable('true'); 
 
     stage.add(layer); 
 
} 
 

 
var addArrow = function(arrowX,arrowY){ 
 
    var connectorLayer = new Konva.Layer(); 
 
\t var connector = new Konva.Arrow({ 
 
      points: [arrowX,arrowY,arrowX+20,arrowY], 
 
      pointerLength: 4, 
 
      pointerWidth: 4, 
 
      fill: 'black', 
 
      stroke: 'black', 
 
      strokeWidth: 2 
 
     }); 
 
    var arrowHead = new Konva.Circle({ 
 
      x: arrowX+25, 
 
      y: arrowY, 
 
      radius: 5, 
 
      fill: "#F2784B", 
 
      stroke: "white", 
 
      strokeWidth: 1 
 
     }); 
 
     
 
    arrowHead.on('dragstart dragmove', function() { 
 
     connector.setPoints([ 
 
      arrowX, 
 
      arrowY, 
 
      arrowHead.getX(), 
 
      arrowHead.getY() 
 
      ]); 
 
     }); 
 
    \t arrowHead.draggable('true'); 
 
    connectorLayer.add(arrowHead); 
 
    connectorLayer.add(connector); 
 
    stage.add(connectorLayer); 
 
}

<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add-shape"> 
 
     Add shape 
 
     </button> 
 
<div id="canvas"> 
 
     
 
     </div> 
 
    

Answer 1

Когда вам нужно, чтобы получить форму из другого слоя, вам нужно всего лишь позвонить layer.getIntersection(mousePositionObject) вроде следующего:

var stage = new Konva.Stage({ 
 
     container: 'canvas', // id of container <div> 
 
     width: 500, 
 
     height:300 
 
    }); 
 
var layer = new Konva.Layer(); 
 
jQuery("#add-shape").click(function(){ 
 
addShape(); 
 
}); 
 
var connectorLayer = new Konva.Layer(); 
 
var addShape = function(){ 
 
    
 
    
 
var parentContainer = new Konva.Rect({ 
 
      x: stage.getWidth()/2, 
 
      y: stage.getHeight()/2, 
 
      width: 200, 
 
      height: 60, 
 
      cornerRadius: 10, 
 
      fill: '#ccc' 
 
     }); 
 
     
 
     var smallCircle = new Konva.Circle({ 
 
      x: stage.getWidth()/2 + 200, 
 
      y: stage.getHeight()/2 + 30, 
 
      radius: 15, 
 
      fill: "#F2784B", 
 
      stroke: "white", 
 
      strokeWidth: 2 
 
     }); 
 
     
 
     smallCircle.on('click', function() { 
 
     console.log(this.getX(),this.getY()); 
 
     var mousePos = stage.getPointerPosition(); 
 
      addArrow(mousePos.x,mousePos.y); 
 
     }); 
 
     
 
     layer.on('dragstart dragmove', function() { 
 
      \t \t //change the starting point of arrow here 
 
      var mousePosition = stage.getPointerPosition(); 
 
      var arrow = connectorLayer.getIntersection(); 
 
      arrow.x(mousePosition.x); 
 
      arrow.y(mousePosition.y); 
 
     }); 
 
     layer.add(parentContainer); 
 
     layer.add(smallCircle); 
 
     layer.draggable('true'); 
 
     stage.add(layer); 
 
}; 
 

 
var addArrow = function(arrowX,arrowY){ 
 
\t var connector = new Konva.Arrow({ 
 
      points: [arrowX,arrowY,arrowX+20,arrowY], 
 
      pointerLength: 4, 
 
      pointerWidth: 4, 
 
      fill: 'black', 
 
      stroke: 'black', 
 
      strokeWidth: 2 
 
     }); 
 
    var arrowHead = new Konva.Circle({ 
 
      x: arrowX+25, 
 
      y: arrowY, 
 
      radius: 5, 
 
      fill: "#F2784B", 
 
      stroke: "white", 
 
      strokeWidth: 1 
 
     }); 
 
     
 
    arrowHead.on('dragstart dragmove', function() { 
 
     connector.setPoints([ 
 
      arrowX, 
 
      arrowY, 
 
      arrowHead.getX(), 
 
      arrowHead.getY() 
 
      ]); 
 
     }); 
 
    \t arrowHead.draggable('true'); 
 
    connectorLayer.add(arrowHead); 
 
    connectorLayer.add(connector); 
 
    stage.add(connectorLayer); 
 
};

<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="add-shape"> 
 
     Add shape 
 
     </button> 
 
<div id="canvas"> 
 
     
 
     </div>