KineticJS：两个可拖动形状之间的曲线

Question

我在我的项目中使用 KineticJS。我需要使用曲线连接两个形状。可以拖动其中一个形状。我能够在形状之间放置曲线。当用户开始拖动形状时会出现问题。要求是它应该适当弯曲（请参阅屏幕截图），而不管它们之间的距离和它们相对于彼此的位置。我这样做：

var utils = {
  _getCenter: function(x1, y1, x2, y2) {
    return {
      x: (x1 + x2) / 2,
      y: (y1 + y2) / 2
    }
  },
  // Converts from degrees to radians.
  _radians: function(degrees) {
    return degrees * Math.PI / 180;
  },
  // Converts from radians to degrees.
  _degrees: function(radians) {
    return radians * 180 / Math.PI;
  }
};

function amplitude(point) {
  var rad_90 = utils._radians(90);
  var rad_45 = utils._radians(45);
  var rad_60 = utils._radians(60);
  console.log(rad_90);
  return {
    x: point.x * Math.cos(rad_60),
    y: point.y * Math.sin(rad_60)
  };
}
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Kinetic.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
  x: stage.getWidth() / 2,
  y: stage.getHeight() / 2,
  radius: 20,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2
});
var attachedCircle = new Kinetic.Circle({
  x: stage.getWidth() / 4,
  y: stage.getHeight() / 4,
  radius: 20,
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2,
  draggable: true
});
var center = amplitude(utils._getCenter(circle.getX(), circle.getY(), attachedCircle.getX(), attachedCircle.getY()));

var line = new Kinetic.Line({
  points: [circle.getX(), circle.getY(), center.x, center.y, attachedCircle.getX(), attachedCircle.getY()],
  fill: 'black',
  stroke: 'green',
  strokeWidth: 3,
  /*
   * line segments with a length of 33px
   * with a gap of 10px
   */
  dash: [33, 10],
  id: 'line',
  tension: 0.5
});
attachedCircle.on('dragmove', function(e) {
  var targetCircle = e.target;
  var tempCenter = amplitude(utils._getCenter(circle.getX(), circle.getY(), targetCircle.getX(), targetCircle.getY()));
  console.log(tempCenter);
  line.setPoints([circle.getX(), circle.getY(), tempCenter.x, tempCenter.y, targetCircle.getX(), targetCircle.getY()]);
});




// add the shape to the layer
layer.add(line);

layer.add(attachedCircle);
layer.add(circle);
// add the layer to the stage
stage.add(layer);

我不知道我错过了什么。我创建了 plunkr for this。

Answer 1

要定义振幅函数，您需要使用两个输入点：

function amplidure2(p1, p2) {
  var alpha = Math.atan((p1.x - p2.x) / (p1.y - p2.y)) + Math.PI / 2;
  if (p1.y < p2.y) {
    alpha += Math.PI;
  }
  var center = utils._getCenter(p1.x, p1.y, p2.x, p2.y);
  var r = 50;
  return {
    x: center.x + r * Math.sin(alpha),
    y: center.y + r * Math.cos(alpha)
  }
}

DEMO

KineticJS：两个可拖动形状之间的曲线

KineticJS: Curved line between two draggable shapes

javascript

canvas

html5-canvas

kineticjs

konvajs