diff --git a/src/geometry.ts b/src/geometry.ts index 64da89e..4d13b06 100644 --- a/src/geometry.ts +++ b/src/geometry.ts @@ -1,5 +1,5 @@ /// -/// +/// /// function loadScript(filepath: string): string @@ -17,6 +17,7 @@ function loadScript(filepath: string): string class Geometry extends HTMLElement { + private shapes: Shape[]; private canvas: HTMLCanvasElement; private context: CanvasRenderingContext2D; private sourceFile: string; @@ -50,13 +51,29 @@ class Geometry extends HTMLElement this.shadowRoot.append(this.canvas); + + this.shapes = [] + this.shapes.push(new Circle(this.context, new Vector2D(150, 150), 100)) + this.shapes.push(new Line(this.context, new Vector2D(), new Vector2D(300, 300))) + + this.shapes.push(new Polygon(this.context, + [ + new Vector2D(150, 150), + new Vector2D(150, 250), + new Vector2D(250, 250), + new Vector2D(250, 150), + new Vector2D(300, 300), + new Vector2D(250, 350), + ])) this.redraw(); } private redraw() { - line(this.context, new Vector2D(), new Vector2D(300, 300)); - circle(this.context, new Vector2D(150, 150), 100); + for (let shape of this.shapes) + { + shape.draw() + } } } diff --git a/src/gfx/polygon.ts b/src/gfx/polygon.ts new file mode 100644 index 0000000..5ce58d4 --- /dev/null +++ b/src/gfx/polygon.ts @@ -0,0 +1,30 @@ +/// + +class Polygon extends Shape +{ + private points: Vector2D[] + + + constructor(ctx, points) { + super(ctx); + if (points.length <3) + { + console.error("cant draw polygon, need min 3 points") + } + this.points = points + } + + public draw() + { + let last_element = this.points[this.points.length-1] + this.ctx.beginPath(); + this.ctx.moveTo(last_element.x, last_element.y); + for (let point of this.points) + { + this.ctx.lineTo(point.x, point.y); + } + this.ctx.lineWidth = this.style.strokeWidth; + this.ctx.strokeStyle = this.style.strokeColor; + this.ctx.stroke(); + } +} \ No newline at end of file diff --git a/src/shapes.ts b/src/gfx/shapes.ts similarity index 93% rename from src/shapes.ts rename to src/gfx/shapes.ts index 4d2fd2d..4131d79 100644 --- a/src/shapes.ts +++ b/src/gfx/shapes.ts @@ -1,5 +1,5 @@ -/// -/// +/// +/// abstract class Shape {