检查路径点是否重叠圆

Question

我正在使用RaphaelJS 绘制路径和圆圈，我想拖放一个路径，使线/路径的两端与圆圈重叠。

当我拖动一条线/路径被拖动时，我如何检测到两端是重叠的圆圈（比方说，不是线的中间）？

圈子：

    this.set = paper.set();
    this.shape = paper.circle(x, y, 10);
    paper.setStart();
    this.radius = 10;
    this.text = paper.text(x, y - 15, this.name);
    this.set[0].hover(
        function() {
            this.g = this.glow({
                color: "#fff",
                width: 20,
                opacity: .5
            });
            this.node.style.cursor = 'pointer';
        },
        function() {
            this.g.remove();
        }
    );

行：

let connector = paper.path(`M ${startX} ${startY} l 0 25 l 25 50 L ${endX} ${endY}`);

let start = function () {
  this.odx = 0;
  this.ody = 0;
  this.animate({"fill-opacity": 0.2}, 500);
},
move = function (dx, dy) {
  this.translate(dx - this.odx, dy - this.ody);
  this.odx = dx;
  this.ody = dy;
},
drop = function () {
    this.animate({"fill-opacity": 1}, 500);
};

connector.drag(move, start, drop);

Answer 1

在onend 回调中，您可以使用event.target 检索元素，该元素的类型应为path。然后您可以使用path.getPointAtLength(0) 和path.getPointAtLength(path.getTotalLength()) 检索边界坐标

如果要检测其中一个点是否在圆内，条件是：

const circleX = ...;
const circleY = ...;
const circleRadius = ...;
const pointX = ...;
const pointY = ...;

// Is the distance between the point and the center of the circle inferior to the circle radius?
const isPointInsideCircle = Math.sqrt((circleX - pointX) ** 2 + (circleY - pointY) ** 2) < circleRadius;