getBounds and containsPoint on bezier curves

[db213]

Hi there, I'm working on a simple web app for virtual drawing and flow-chart construction. The way drawing works, I sample control points for the curve as the mouse moves and then use Catmull-Rom splining, using the function `bezierCurveTo` for the calculated points.

Visually, this works well, however the problem occurs when I then call `getBounds` or `containsPoint` on the graphics obejct that drew the curves. `containsPoint` always returns false it seems, and the rectangle returned by `getBound` is wildly off in both position and width and height.

g.clear();
g.lineStyle({
  width: points[0].width,
  color: 0xffd900,
  alpha: 1,
  alignment: 0.5,
  native: false,
  cap: 'round',
  join: 'round',
  miterLimit: 10,
});
g.moveTo(points[0].position.x, points[0].position.y);
if (points.length === 1)
  g.drawCircle(points[0].position.x, points[0].position.y, 0.75);
else if (points.length === 2)
  g.lineTo(points[1].position.x, points[1].position.y);
else {
  let p0;
  let p1;
  let p2;
  let p3;
  const i6 = 1.0 / 6.0;
  for (let i = 3, n = points.length; i < n; i++) {
    p0 = points[i - 3].position;
    p1 = points[i - 2].position;
    p2 = points[i - 1].position;
    p3 = points[i].position;
    g.bezierCurveTo(
    p2.x * i6 + p1.x - p0.x * i6,
    p2.y * i6 + p1.y - p0.y * i6,
    p3.x * -i6 + p2.x + p1.x * i6,
    p3.y * -i6 + p2.y + p1.y * i6,
    p2.x,
    p2.y
  );
}

 

This is how I draw the curves. The calls to `getBounds` or `containsPoint` would happen immediately after (`g.getBounds()` or `g.containsPoint(point)`). I'm not sure what I'm missing and am hoping I've overlooked something simple.