BezierCurves.js

BezierCurves.js

class BezierCurve
{
    constructor(x1, y1, x2, y2, id) {
      this.p1 = {x: x1, y: y1};
      this.p2 = {x: x2, y: y2};
    }

    updatePoint1(x1, y1) {
      this.p1 = {x: x1, y: y1};
      this.updatePath();
    }
    updatePoint2(x2, y2) {
      this.p2 = {x: x2, y: y2};
      this.updatePath();
    }

    updatePath() {
      let curve = `M ${this.p1.x} ${this.p1.y} C ${this.p1.x + (this.p2.x - this.p1.x) / 3} ${this.p1.y + (this.p2.y - this.p1.y) / 3} ${this.p1.x + (this.p2.x - this.p1.x) * 2 / 3} ${this.p1.y + (this.p2.y - this.p1.y) * 2 / 3} ${this.p2.x} ${this.p2.y}`;
      document.getElementById('s3').setAttribute('d',curve);
    }
}