Question

我有以下代码。

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事件发生的位置。

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

感谢任何帮助。

Answer 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

中有描述

Konva js - 将拖动开始事件绑定到可拖动元素而不移动它

1 个答案: