1

我有以下代码。

var stage = new Konva.Stage({
  container: 'canvas',
  width: 500,
  height: 300
});

var eventWrapperLayer = new Konva.Layer({});

var createTriggerBlock = function(elemType, elemText, elemId) {
  eventElementCounter = 0;

  var eventNode = new Konva.Group({
    x: 100,
    y: 100,
    id: "eventNode_" + elemId,
  });

  eventNode.setAttr("nodeType", elemType);
  eventNode.setAttr("nodeSpecificName", elemText);
  eventNode.setAttr("nodeUniqueId", elemId);
  var nodeContainer = new Konva.Rect({
    x: 0,
    y: 0,
    width: 200,
    height: 60,
    cornerRadius: 10,
    fill: "red",
    strokeWidth: 2,
    stroke: "black"
  });





  var yesCircle = new Konva.Arc({
    x: nodeContainer.getX() + 180,
    y: nodeContainer.getY() + 30,
    innerRadius: 20,
    outerRadius: 50,
    angle: 70,
    fill: '#1BBC9B',
    visible: false,
    stroke: "white",
    strokeWidth: 2
  });

  var yesText = new Konva.Text({
    x: yesCircle.getX() + 10,
    y: yesCircle.getY() - 25,
    text: "Yes",
    fontSize: 12,
    fontFamily: 'mf-font',
    fill: 'black',
    align: 'center',
    width: 100,
    visible: false
  });

  yesCircle.rotate(-70);
  // yesText.rotate(-70);


  var noCircle = new Konva.Arc({
    x: nodeContainer.getX() + 180,
    y: nodeContainer.getY() + 30,
    innerRadius: 20,
    outerRadius: 50,
    angle: 70,
    fill: '#E74C3C',
    visible: false,
    stroke: "white",
    strokeWidth: 2
  });

  var noText = new Konva.Text({
    x: noCircle.getX() + 10,
    y: noCircle.getY() + 25,
    text: "No",
    fontSize: 12,
    fontFamily: 'mf-font',
    fill: 'black',
    align: 'center',
    width: 100,
    id: "noText_" + eventElementCounter,
    visible: false
  });


  eventNode.on('mouseover', function(event) {
    document.body.style.cursor = 'pointer';
    yesCircle.show();
    noCircle.show();
    yesText.show();
    noText.show();
    eventWrapperLayer.draw();
  });

  eventNode.on('mouseout', function() {
    document.body.style.cursor = 'default';
    yesCircle.hide();
    noCircle.hide();
    yesText.hide();
    noText.hide();
    eventWrapperLayer.draw();
  });
  
  yesCircle.on('dragstart', function() {
            //do something
            eventWrapperLayer.draw();
        });


  eventNode.add(yesCircle);
  eventNode.add(noCircle);
  eventNode.add(nodeContainer);
  eventNode.add(yesText);
  eventNode.add(noText);
  eventNode.draggable('true');
  eventWrapperLayer.add(eventNode);
  stage.add(eventWrapperLayer);

}

jQuery(document).ready(function() {
  $("#add_item").click(function() {
    createTriggerBlock();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.3/konva.min.js"></script>
<button id="add_item">
  add item
</button>
<div id="canvas">

</div>

它能做什么：

单击按钮后，将添加一个形状。它有是或否按钮。

我正在尝试做的事情：

在单击并拖动时，yes我试图从源形状动态绘制一个箭头，并沿着鼠标拖动移动它直到dragstop事件发生的点。

问题是当我拖动是按钮时，形状会随之拖动，我想停止。拖动动作不应该发生，但函数应该在拖动开始时绑定。Konva 有办法做到这一点吗？

任何帮助表示赞赏。

4

1 回答 1

1

您应该能够通过将形状设置为可拖动然后在其上定义一个返回形状的绝对位置的 dragBoundFunc 来实现这一点，如下所示：

var eventNode = new Konva.Group({
    x: 100,
    y: 100,
    id: "eventNode_" + elemId,
    draggable: true
    dragBoundFunc: function() {
        var pos = this.getAbsolutePosition();
        return {x: pos.x, y: pos.y}:
    }
});

其中大部分在Konva Simple Drag Bounds中进行了描述

于 2016-10-26T09:55:20.413 回答