Check if points of path are overlapping circle

Question

I'm using RaphaelJS to draw paths and circles, and I want to drag and drop a path so that both ends of the line/path are overlapping the circles.

How can I detect, when I drag a line/path is dragged, that both ends are overlapping circles (and, let's say, not the middle of the line)?

Circle:

    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();
        }
    );

Line:

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

In the onend callback, you can retrieve the element with event.target which should be of type path . You can then retrieve the coordinates of the boundaries with path.getPointAtLength(0) and path.getPointAtLength(path.getTotalLength())

If you want to detect if one of the points is inside a circle, the condition is:

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;