Question

我一直在使用Konva进行绘图，当箭头的尖端与其他组或形状相交并且用户放开鼠标时，我希望箭头“捕捉”到其他组或形状。如果箭头没有与箭头相交，那么它将自动删除自身。

然后，当移动组或形状时，我希望箭头的提示随之移动。

我找到了类似例子的例子，但是我不确定如何将它们组合起来以获得我想要的东西。

我将在下面发布当前代码。

示例链接

代码

var width = height = 170;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
var isDrawArrow;
var Startpos;
var Endpos;

var arrow = new Konva.Arrow({
  points: [],
  pointerLength: 10,
  pointerWidth: 10,
  fill: 'black',
  stroke: 'black',
  strokeWidth: 4
});

var circle = new Konva.Circle({
  x: stage.getWidth() / 2,
  y: stage.getHeight() / 2,
  radius: 20,
  fill: 'green'
});

var circleA = new Konva.Circle({
  x: stage.getWidth() / 5,
  y: stage.getHeight() / 5,
  radius: 30,
  fill: 'red',
  draggable: true
});

circle.on('mouseover', function() {
  document.body.style.cursor = 'pointer';
  layer.draw()
});

circle.on('mouseout', function() {
  document.body.style.cursor = 'default';
  layer.draw()
});

circle.on('mousedown touchstart', function() {
  isDrawArrow = true;
  circleA.on('dragmove', adjustPoint);
  Startpos = stage.getPointerPosition();
});

stage.addEventListener('mouseup touchend', function() {
  isDrawArrow = false;
});


stage.addEventListener('mousemove touchmove', function() {
  if (!isDrawArrow) return;
  Endpos = stage.getPointerPosition()
  
  var p = [Startpos.x, Startpos.y, Endpos.x, Endpos.y];
  arrow.setPoints(p);
  layer.add(arrow);
  layer.batchDraw();
});


circle.on('mouseup', function() {
  this.setFill('green');
  layer.batchDraw();
});


function adjustPoint(e) {
  var p = [circle.getX(), circle.getY(), circleA.getX(), circleA.getY()];

  arrow.setPoints(p);
  layer.draw();
  stage.draw();

}

function haveIntersection(r1, r2) {
  return !(
    r2.x > r1.x + r1.width ||
    r2.x + r2.width < r1.x ||
    r2.y > r1.y + r1.height ||
    r2.y + r2.height < r1.y
  );
}

layer.add(circle);
layer.add(circleA);

stage.add(layer);
adjustPoint();

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.3.0/konva.js"></script>
<div id="container"></div>

Answer 1

要进行捕捉，您需要一个函数来确定2个点之间的距离。
勾股计算很容易完成（如果需要帮助，请阅读here ）。

在鼠标移动时，如果检测到箭头的末端与您的点之间的距离（在这种情况下为中心或红色圆圈）小于您想要的值，则可以“捕捉”您在函数adjustPoint上所做的一切都很好。
在鼠标上方，您还需要检查距离，如果距离太远，只需隐藏箭头即可。

下面的工作代码：

var width = height = 170;

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
var isDrawArrow, Startpos, Endpos;
var snapDistance = 20;

function distance(p, c) {
  var dx = p.x - c.getX();
  var dy = p.y - c.getY();
  return Math.sqrt(dx * dx + dy * dy);
}

var arrow = new Konva.Arrow({
  points: [],
  pointerLength: 10,
  pointerWidth: 10,
  fill: 'black',
  stroke: 'black',
  strokeWidth: 4
});

var circle = new Konva.Circle({
  x: stage.getWidth() - 25,
  y: stage.getHeight() - 25,
  radius: 20,
  fill: 'green'
});

var circleA = new Konva.Circle({
  x: stage.getWidth() / 5,
  y: stage.getHeight() / 5,
  radius: 25,
  fill: 'red',
  draggable: true
});

circle.on('mousedown touchstart', function() {
  isDrawArrow = true;
  circleA.on('dragmove', adjustPoint);
  Startpos = stage.getPointerPosition();
});

stage.addEventListener('mouseup touchend', function() {
  isDrawArrow = false;
  if (distance(Endpos, circleA) > snapDistance) {
    arrow.hide();
    layer.batchDraw();
  }
});

stage.addEventListener('mousemove touchmove', function() {
  if (!isDrawArrow) return;
  Endpos = stage.getPointerPosition()

  var p = [Startpos.x, Startpos.y, Endpos.x, Endpos.y];
  arrow.setPoints(p);
  arrow.show();
  layer.add(arrow);
  layer.batchDraw();

  if (distance(Endpos, circleA) <= snapDistance) {
    adjustPoint();
    isDrawArrow = false
  }
});

function adjustPoint(e) {
  var p = [circle.getX(), circle.getY(), circleA.getX(), circleA.getY()];
  arrow.setPoints(p);
  layer.draw();
  stage.draw();
}

layer.add(circle);
layer.add(circleA);
stage.add(layer);

canvas {
  border: 1px solid #eaeaea !IMPORTANT;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.3.0/konva.js"></script>
<div id="container"></div>

Javascript两个对象相交

1 个答案: