Search code examples
javascriptbezier

Finding the shortest distance between a quadratic Bezier curve and point or rectangle

I am working on a simple whiteboard application where the drawings are represented by quadratic Bezier curves (using the JavaScript's CanvasPath.quadraticCurveTo function). I am trying to implement functionality so that an eraser tool or a selection tool are able to determine if they are touching a drawing.

To show what I'm talking about, in the following image is a red drawing and I need to be able to determine that the black rectangles and black point overlap with the area of the drawing. For debugging purposes I have added blue circles which are control points of the curve and the green line which is the same Bezier curve but with a much smaller width.

Quadratic Bezier curve with overlapping rectangles.

I have included my code which generates the Bezier curve:

        context.beginPath();
        context.moveTo(localPoints[0].x, localPoints[0].y);
        let i;
        for (i = 1; i < localPoints.length - 2; i++)
        {
            let xc = (localPoints[i].x + localPoints[i + 1].x) / 2;
            let yc = (localPoints[i].y + localPoints[i + 1].y) / 2;
            context.quadraticCurveTo(localPoints[i].x, localPoints[i].y, xc, yc);
        }
        // curve through the last two points
        context.quadraticCurveTo(localPoints[i].x, localPoints[i].y, localPoints[i + 1].x, localPoints[i + 1].y);
        context.stroke();

I have been able to find answers on how to determine if a line segment intersects a Bezier curve, but I have not been able to find how to determine if something does not intersect the actual curve but is close enough to be considered to overlap its "area". To do so, I figure that I need to just find the distance between the curve and the rectangle/point and then make sure than distance is less than the width used to draw the curve, but I am unsure on how to find that distance.

Solution

  • Some interesting articles/posts:

    How to track coordinates on the quadraticCurve

    https://coderedirect.com/questions/385964/nearest-point-on-a-quadratic-bezier-curve

    And if it doesn't work maybe you can take a look at this library: https://pomax.github.io/bezierjs/

    As suggested by Pomax in the comments the thing you're looking for is in the library and it looks like there is a proper explanation.

    There is a live demo if you want to try it: https://pomax.github.io/bezierinfo/#projections
    The source code of it is here: https://pomax.github.io/bezierinfo/chapters/projections/project.js

    demo

    To use it install it using the steps from GitHub: https://github.com/Pomax/bezierjs

    Of course credit to Pomax for suggesting his library