Is Hit Quadratic Bezier

demo

codepen Demo

install

yarn add is-hit-quadratic-bezier

<script src="https://unpkg.com/[email protected]/dist/is-hit-quadratic-bezier.umd.production.min.js"></script>

usage

import measureBezier from 'is-hit-quadratic-bezier';

three usage examples:

const { isHit, getInfo } = measureBezier(fromX, fromY, controlPointX, controlPointY, toX, toY);

const { isHit, getInfo } = measureBezier([fromX, fromY], [controlPointX, controlPointY], [toX, toY]);

const { isHit, getInfo } = measureBezier({
  x: fromX,
  y: fromY,
}, {
  x: controlPointX,
  y: controlPointY,
}, {
  x: toX,
  y: toY,
});

isHit

Determine whether the distance from a point to the bezier curve is less than hitDistance

isHit(x,y, hitDistance); // true or false
isHit({
  x: x,
  y: y
}, hitDistance); 
isHit([x,y], hitDistance);

getInfo

calculate the distance from a point to the bezier curve, the closest point on the bezier curve.

const { distance, point } = getInfo(x, y);
const { distance, point } = getInfo([x, y]);
const { distance, point } = getInfo({
  x: x,
  y: y
})

if you use this function, please don't call isHit above, which maybe leading to calculate twice. Just use distance <= hitDistance manually.

reference

The calculation algorithm comes from :
https://www.shadertoy.com/view/MlKcDD
https://www.shadertoy.com/view/4dsfRS