diff --git a/frontend/img/test.png b/frontend/img/test.png new file mode 100644 index 0000000..f514c4a Binary files /dev/null and b/frontend/img/test.png differ diff --git a/frontend/img/test2.jpg b/frontend/img/test2.jpg new file mode 100644 index 0000000..b9b547d Binary files /dev/null and b/frontend/img/test2.jpg differ diff --git a/frontend/js/menu_console/console_interface_classes.js b/frontend/js/menu_console/console_interface_classes.js index 77becb8..f81ed8b 100644 --- a/frontend/js/menu_console/console_interface_classes.js +++ b/frontend/js/menu_console/console_interface_classes.js @@ -288,6 +288,82 @@ class Rectangle extends Shape{ } } +class Text extends Shape{ + value; + font; + + constructor(value, x,y, font, color) { + super(); + this.value = value; + this.font = font; + this.x = x; + this.y = y; + this.color = color; + } + + draw(ctx) { + ctx.font = this.font; + ctx.fillStyle = this.color; + ctx.fillText(this.value, this.x, this.y); + } + + setValue(newValue) { + this.value = newValue; + } + getValue() { + return this.value; + } + + getWidth(ctx) { + return ctx.measureText(this.value); + } + getCenterXFrom(ctx, x, maxWidth) { + let width = this.getWidth(ctx).width; + let a = x + (maxWidth / 1); + return (a + (width / (this.value.length + 1))); + } +} + +class Sprite extends Rectangle { + img; + src; + + constructor(x,y,w,h,src) { + super(x,y,w,h,"green"); + this.src = src; + + this.img = new Image(); + this.img.src = this.src; + } + + draw(ctx) { + ctx.translate(this.originX, this.originY); + ctx.rotate(this.rotation); + ctx.translate(-(this.originX), -(this.originY)); + + ctx.drawImage(this.img,this.startX,this.startY, this.width,this.height); + + if("is_selected" in this) { + if(this.is_selected) { + this.draw_selection(ctx); + } + + } + } + +} + + + + + + + + + + + + class Circle extends Shape{ radius; } \ No newline at end of file diff --git a/frontend/js/menu_console/console_interface_menu.js b/frontend/js/menu_console/console_interface_menu.js index c1bde66..b677752 100644 --- a/frontend/js/menu_console/console_interface_menu.js +++ b/frontend/js/menu_console/console_interface_menu.js @@ -21,7 +21,7 @@ menu.load = () => { document.addEventListener("keypress" , e => { menu.keypress(e)}); menu.user_can_select = true; - rect1 = new Rectangle(70,0,100,100, "red"); + rect1 = new Rectangle(70,20,100,100, "green"); rect2 = new Rectangle(10,10,50,50, "red"); rect3 = new Rectangle(10,200,50,50, "red"); @@ -48,6 +48,21 @@ menu.load = () => { rect2.draw_selection = rect2.drawStroke; rect3.draw_selection = rect3.drawStroke; rect4.draw_selection = rect4.drawStroke; + + + + text = new Text("Tessst" ,10,400, "16px serif" , "rgb(100,100,100)"); + menu.addElement(text); + let center = text.getCenterXFrom(menu.ctx, rect1.x, rect1.width); + text.x = center; + text.y = rect1.y + 150; + + + //img = new Sprite(400,400,400,400,"../../img/test2.jpg"); + //img.img = new Image(); + //img.img.src = "../../img/test2.jpg"; + // menu.ctx.drawImage(img2, 200,200); + //menu.addElement(img); }; diff --git a/skizze.drawio b/skizze.drawio new file mode 100644 index 0000000..054ee84 --- /dev/null +++ b/skizze.drawio @@ -0,0 +1,181 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +