获取不同图层 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>

获取不同图层 Konva JS 中形状的属性

get the properties of a shape in a different layer Konva JS

javascript

konvajs