获取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() {
         		//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();
	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()
          ]);
        });
   	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() {
         		//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){  
	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()
          ]);
        });
   	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>