addes shape classes

src/shapes.ts

@@ -1,26 +1,64 @@
 import { Vector2D } from "./vector.js"
 import { ShapeStyle } from "./shapeStyle.js";
 
-export function line(ctx: CanvasRenderingContext2D, from: Vector2D , to: Vector2D, style: ShapeStyle = new ShapeStyle())
+abstract class Shape
 {
-    ctx.beginPath();
+    protected ctx: CanvasRenderingContext2D
-    ctx.moveTo(from.x, from.y);
+    protected style: ShapeStyle
-    ctx.lineTo(to.x, to.y);
 
-    ctx.lineWidth = style.strokeWidth;
+    constructor(ctx) {
-    ctx.strokeStyle = style.strokeColor;
+        this.ctx = ctx
-    ctx.stroke();
+        this.style = new ShapeStyle()
     }
 
-export function circle(ctx: CanvasRenderingContext2D, center: Vector2D, radius: number, style: ShapeStyle = new ShapeStyle())
+    abstract draw()
-{
+}
-    ctx.beginPath();
+
-    ctx.arc(center.x, center.y, radius, 0, 2 * Math.PI, false);
+class Line extends Shape
-
+{
-    ctx.fillStyle = style.fillColor;
+   private from: Vector2D
-    ctx.fill();
+   private to: Vector2D
-    
+
-    ctx.lineWidth = style.strokeWidth;
+   constructor(ctx,from, to) {
-    ctx.strokeStyle = style.strokeColor;
+       super(ctx)
-    ctx.stroke();
+       this.from = from
+       this.to = to
+   }
+
+   public draw()
+   {
+       this.ctx.beginPath();
+       this.ctx.moveTo(this.from.x, this.from.y);
+       this.ctx.lineTo(this.to.x, this.to.y);
+
+       this.ctx.lineWidth = this.style.strokeWidth;
+       this.ctx.strokeStyle = this.style.strokeColor;
+       this.ctx.stroke();
+   }
+}
+
+class Circle extends Shape
+{
+
+    private center: Vector2D
+    private radius: number
+
+    constructor(ctx,center, radius) {
+        super(ctx)
+        this.center = center
+        this.radius = radius
+    }
+
+    public draw()
+    {
+        this.ctx.beginPath();
+        this.ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI, false);
+
+        this.ctx.fillStyle = this.style.fillColor;
+        this.ctx.fill();
+
+        this.ctx.lineWidth = this.style.strokeWidth;
+        this.ctx.strokeStyle = this.style.strokeColor;
+        this.ctx.stroke();
+    }
 }