1

我有以下代码，其中动态创建了一个形状。单击形状箭头时会生成可以使用其箭头头上的控制器调整大小的箭头。

现在，当我拖动形状时，我需要将箭头的起点与它一起移动。但由于箭头位于不同的层，我无法引用它。如何才能做到这一点？

示例代码：

 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>

4

1 回答 1

6

当你需要从另一层获取一个形状时，你只需要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>

于 2016-07-26T10:45:27.903 回答