0

I have a graphics class that can draw lines and bezier curves. It stores the points of the shapes.

export default function Graphics() {
  let points = [];

  this.clear = () => points = [];

  this.points = () => points;

  this.point = point => {
    points.push(point);
  };

  this.line = line => {
    let a = line.A,
        b = line.B,
        direction = v.csub(b, a),
        steps = v.length(direction),
        step = v.cscale(direction, 1/steps);

    let cur = v.copy(a);

    for (let i = 0; i < steps; i++) {
      let point = v.copy(cur);
      point[0] = Math.round(point[0]);
      point[1] = Math.round(point[1]);
      points.push(point);
      v.add(cur, step);
    }
  };
}

Now I can draw a rectangle by drawing four lines:

let g = new Graphics();

g.bent(ab, wave);
g.bent(bc, wave);
g.bent(cd, wave);
g.bent(da, wave);

bent function draws a slightly bent line so it's not straight. I can draw outlines fine, now I want to fill this shape I have drawn. Basically I need the points that fills this shape. How can I calculate it? I only need integer points.

I see there are a lot of complicated ways of doing this, but there should be a simple solution for a simple shape like a rectangle with bent edges and rounded corners.

eguneys
  • 6,028
  • 7
  • 31
  • 63
  • related: https://stackoverflow.com/questions/25048711/how-are-filled-paths-rendered – eguneys Mar 13 '20 at 17:52
  • https://stackoverflow.com/questions/25964313/algorithm-to-fill-in-a-closed-2d-curve – eguneys Mar 13 '20 at 18:25
  • Is this really related to WebGL? Because in that case you have it triangulated already, and then you can obviously tell what is inside/outside of those triangles. – tevemadar Mar 13 '20 at 19:33

0 Answers0