text and sprite implementation
This commit is contained in:
Mykola Fesenko
BIN
frontend/img/test.png
Normal file
BIN
frontend/img/test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
BIN
frontend/img/test2.jpg
Normal file
BIN
frontend/img/test2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
};
|
||||
|
||||
|
||||
|
||||
181
skizze.drawio
Normal file
181
skizze.drawio
Normal file
@@ -0,0 +1,181 @@
|
||||
<mxfile host="app.diagrams.net" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:145.0) Gecko/20100101 Firefox/145.0" version="29.2.1">
|
||||
<diagram name="Seite-1" id="2Lvphl_siSJoFP7V-8n0">
|
||||
<mxGraphModel dx="2620" dy="2610" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-1" parent="1" style="rounded=0;whiteSpace=wrap;html=1;movable=0;resizable=0;rotatable=0;deletable=0;editable=0;locked=1;connectable=0;" value="" vertex="1">
|
||||
<mxGeometry height="800" width="1422.22" x="385" y="390" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-2" edge="1" parent="1" style="endArrow=none;html=1;rounded=0;" value="">
|
||||
<mxGeometry height="50" relative="1" width="50" as="geometry">
|
||||
<mxPoint x="1806" y="490" as="sourcePoint" />
|
||||
<mxPoint x="386" y="500" as="targetPoint" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-5" parent="1" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="70" width="70" x="430" y="410" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-6" parent="1" style="shape=actor;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="40" x="445" y="415" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-8" parent="1" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.6_point_star" value="" vertex="1">
|
||||
<mxGeometry height="50" width="55.56" x="1720" y="420" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-11" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="430" y="540" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-9" parent="nx52t1YTI_TyBdicOCBi-11" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-10" parent="nx52t1YTI_TyBdicOCBi-11" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-12" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="430" y="630" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-13" parent="nx52t1YTI_TyBdicOCBi-12" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-14" parent="nx52t1YTI_TyBdicOCBi-12" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-15" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="430" y="720" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-16" parent="nx52t1YTI_TyBdicOCBi-15" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-17" parent="nx52t1YTI_TyBdicOCBi-15" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-18" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="430" y="810" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-19" parent="nx52t1YTI_TyBdicOCBi-18" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-20" parent="nx52t1YTI_TyBdicOCBi-18" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-21" parent="1" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="70" width="70" x="1080" y="1095" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-22" parent="1" style="triangle;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="70" width="60" x="1170" y="1094" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-23" parent="1" style="triangle;whiteSpace=wrap;html=1;rotation=-180;" value="" vertex="1">
|
||||
<mxGeometry height="70" width="60" x="1000" y="1094" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-24" parent="1" style="text;strokeColor=none;fillColor=none;html=1;fontSize=49;fontStyle=1;verticalAlign=middle;align=center;" value="1" vertex="1">
|
||||
<mxGeometry height="70" width="70" x="1080" y="1094" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-25" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="430" y="910" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-26" parent="nx52t1YTI_TyBdicOCBi-25" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-27" parent="nx52t1YTI_TyBdicOCBi-25" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-28" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="430" y="1010" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-29" parent="nx52t1YTI_TyBdicOCBi-28" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-30" parent="nx52t1YTI_TyBdicOCBi-28" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-31" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="1275.56" y="520" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-32" parent="nx52t1YTI_TyBdicOCBi-31" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-33" parent="nx52t1YTI_TyBdicOCBi-31" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-34" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="1275.56" y="610" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-35" parent="nx52t1YTI_TyBdicOCBi-34" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-36" parent="nx52t1YTI_TyBdicOCBi-34" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-37" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="1275.56" y="700" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-38" parent="nx52t1YTI_TyBdicOCBi-37" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-39" parent="nx52t1YTI_TyBdicOCBi-37" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-40" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="1275.56" y="790" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-41" parent="nx52t1YTI_TyBdicOCBi-40" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-42" parent="nx52t1YTI_TyBdicOCBi-40" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-43" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="1275.56" y="890" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-44" parent="nx52t1YTI_TyBdicOCBi-43" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-45" parent="nx52t1YTI_TyBdicOCBi-43" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-46" connectable="0" parent="1" style="group" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" x="1275.56" y="990" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-47" parent="nx52t1YTI_TyBdicOCBi-46" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="500" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-48" parent="nx52t1YTI_TyBdicOCBi-46" style="text;strokeColor=none;fillColor=none;html=1;fontSize=24;fontStyle=1;verticalAlign=middle;align=left;" value="Name 1" vertex="1">
|
||||
<mxGeometry height="40" width="480" x="10" y="10" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-49" parent="1" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="720" width="1440" x="350" y="1260" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-50" edge="1" parent="1" style="endArrow=none;html=1;rounded=0;" value="">
|
||||
<mxGeometry height="50" relative="1" width="50" as="geometry">
|
||||
<mxPoint x="1772" y="1358" as="sourcePoint" />
|
||||
<mxPoint x="352" y="1368" as="targetPoint" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-51" parent="1" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="70" width="70" x="396" y="1278" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-52" parent="1" style="shape=actor;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="60" width="40" x="411" y="1283" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-53" parent="1" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.6_point_star" value="" vertex="1">
|
||||
<mxGeometry height="50" width="55.56" x="1686" y="1288" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-54" parent="1" style="text;html=1;whiteSpace=wrap;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;rounded=0;fontSize=48;" value="Settings" vertex="1">
|
||||
<mxGeometry height="40" width="240" x="396" y="1390" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-55" parent="1" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="50" width="384" x="396" y="1470" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-56" parent="1" style="rounded=0;whiteSpace=wrap;html=1;" value="" vertex="1">
|
||||
<mxGeometry height="30" width="30" x="730" y="1480" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-57" parent="1" style="verticalLabelPosition=bottom;verticalAlign=top;html=1;shape=mxgraph.basic.tick" value="" vertex="1">
|
||||
<mxGeometry height="20" width="17" x="736.5" y="1485" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="nx52t1YTI_TyBdicOCBi-60" parent="1" style="text;html=1;whiteSpace=wrap;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;rounded=0;fontSize=23;" value="Settings punkt 1" vertex="1">
|
||||
<mxGeometry height="50" width="244" x="396" y="1470" as="geometry" />
|
||||
</mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
Reference in New Issue
Block a user