Achsen im Koordinatensystem ergänzt. Koordinatenursprung: unten links. Y-Achse invertiert. Skalierung ergänzt. Die Datenpunkte und die Prototypen werden auf 100% der Breite und Höhe skaliert. Szenarien überarbeitet.
All checks were successful
ci/woodpecker/push/default Pipeline was successful
All checks were successful
ci/woodpecker/push/default Pipeline was successful
This commit is contained in:
parent
20c4211d5b
commit
f29c8806c0
1 changed files with 349 additions and 196 deletions
537
src/App.vue
537
src/App.vue
|
|
@ -1,24 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<img
|
<img id="kein_bild" src="./assets/img/weiss_pixel.png" style="width: 0px; height: 0px" />
|
||||||
id="kein_bild"
|
<img id="stadtplan" src="./assets/img/stadtplan.png" style="width: 0px; height: 0px" />
|
||||||
src="./assets/img/weiss_pixel.png"
|
<img id="gold_rush" src="./assets/img/desert_landscape.png" style="width: 0px; height: 0px" />
|
||||||
style="width: 0px; height: 0px"
|
<img id="lebensmittel" src="./assets/img/weiss_pixel.png" style="width: 0px; height: 0px" />
|
||||||
/>
|
|
||||||
<img
|
|
||||||
id="stadtplan"
|
|
||||||
src="./assets/img/stadtplan.png"
|
|
||||||
style="width: 0px; height: 0px"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
id="gold_rush"
|
|
||||||
src="./assets/img/desert_landscape.png"
|
|
||||||
style="width: 0px; height: 0px"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
id="lebensmittel"
|
|
||||||
src="./assets/img/weiss_pixel.png"
|
|
||||||
style="width: 0px; height: 0px"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
|
Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
|
||||||
|
|
@ -26,16 +11,10 @@
|
||||||
</h2>
|
</h2>
|
||||||
<br />
|
<br />
|
||||||
|
|
||||||
<canvas
|
<canvas id="c" STYLE="border: 0px black solid;" height="450" width="800"></canvas>
|
||||||
id="c"
|
|
||||||
STYLE="border: 1px black solid;"
|
|
||||||
height="450"
|
|
||||||
width="800"
|
|
||||||
></canvas>
|
|
||||||
<br />
|
<br />
|
||||||
Die <b>Punkte</b> auf der Karte sind die
|
Die <b>Punkte</b> auf der Karte sind die
|
||||||
<b>{{ this.bezeichnung_datenpunkte }}</b
|
<b>{{ this.bezeichnung_datenpunkte }}</b>.<br />
|
||||||
>.<br />
|
|
||||||
Die <b>x-Markierungen</b> auf der Karte entsprechen den
|
Die <b>x-Markierungen</b> auf der Karte entsprechen den
|
||||||
<b>{{ this.bezeichnung_prototypen }}</b>
|
<b>{{ this.bezeichnung_prototypen }}</b>
|
||||||
<br />
|
<br />
|
||||||
|
|
@ -45,13 +24,7 @@
|
||||||
starte Animation für alles
|
starte Animation für alles
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<input
|
<input type="range" v-model="animation_speed_range" min="0" max="2000" step="1" />
|
||||||
type="range"
|
|
||||||
v-model="animation_speed_range"
|
|
||||||
min="0"
|
|
||||||
max="2000"
|
|
||||||
step="1"
|
|
||||||
/>
|
|
||||||
|
|
||||||
{{ animation_speed }} ms
|
{{ animation_speed }} ms
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -74,8 +47,7 @@
|
||||||
<div class="column">
|
<div class="column">
|
||||||
{{ this.bezeichnung_aktueller_datenpunkt }}:
|
{{ this.bezeichnung_aktueller_datenpunkt }}:
|
||||||
<button class="btn btn-primary" @click="voriger_datenpunkt">-</button>
|
<button class="btn btn-primary" @click="voriger_datenpunkt">-</button>
|
||||||
<b style="font-size: x-large">{{ aktueller_datenpunkt + 1 }}</b
|
<b style="font-size: x-large">{{ aktueller_datenpunkt + 1 }}</b>
|
||||||
>
|
|
||||||
<button class="btn btn-primary" @click="naechster_datenpunkt">
|
<button class="btn btn-primary" @click="naechster_datenpunkt">
|
||||||
+
|
+
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -106,19 +78,12 @@
|
||||||
<div class="column" style="text-align: center">
|
<div class="column" style="text-align: center">
|
||||||
<h3>{{ this.bezeichnung_datenpunkte }}</h3>
|
<h3>{{ this.bezeichnung_datenpunkte }}</h3>
|
||||||
|
|
||||||
<button
|
<button class="btn btn-primary" @click="update_anzahl_datenpunkte(--this.anzahl_datenpunkte)">
|
||||||
class="btn btn-primary"
|
|
||||||
@click="update_anzahl_datenpunkte(--this.anzahl_datenpunkte)"
|
|
||||||
>
|
|
||||||
-
|
-
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<b style="font-size: xx-large">{{ this.anzahl_datenpunkte }}</b
|
<b style="font-size: xx-large">{{ this.anzahl_datenpunkte }}</b>
|
||||||
>
|
<button class="btn btn-primary" @click="update_anzahl_datenpunkte(++this.anzahl_datenpunkte)">
|
||||||
<button
|
|
||||||
class="btn btn-primary"
|
|
||||||
@click="update_anzahl_datenpunkte(++this.anzahl_datenpunkte)"
|
|
||||||
>
|
|
||||||
+
|
+
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
|
@ -129,19 +94,13 @@
|
||||||
<div class="column" style="text-align: center">
|
<div class="column" style="text-align: center">
|
||||||
<h3>{{ this.bezeichnung_prototypen }}</h3>
|
<h3>{{ this.bezeichnung_prototypen }}</h3>
|
||||||
|
|
||||||
<button
|
<button class="btn btn-primary" @click="update_anzahl_prototypen(--this.anzahl_prototypen)">
|
||||||
class="btn btn-primary"
|
|
||||||
@click="update_anzahl_prototypen(--this.anzahl_prototypen)"
|
|
||||||
>
|
|
||||||
-
|
-
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<b style="font-size: xx-large">{{ this.anzahl_prototypen }}</b>
|
<b style="font-size: xx-large">{{ this.anzahl_prototypen }}</b>
|
||||||
|
|
||||||
<button
|
<button class="btn btn-primary" @click="update_anzahl_prototypen(++this.anzahl_prototypen)">
|
||||||
class="btn btn-primary"
|
|
||||||
@click="update_anzahl_prototypen(++this.anzahl_prototypen)"
|
|
||||||
>
|
|
||||||
+
|
+
|
||||||
</button>
|
</button>
|
||||||
<br />
|
<br />
|
||||||
|
|
@ -159,11 +118,7 @@
|
||||||
<div class="column" style="text-align: center">
|
<div class="column" style="text-align: center">
|
||||||
<b>Datenpunkt</b><br />
|
<b>Datenpunkt</b><br />
|
||||||
x; y<br />
|
x; y<br />
|
||||||
<textarea
|
<textarea v-model="txt_datensatz" placeholder="add multiple lines" rows="10"></textarea>
|
||||||
v-model="txt_datensatz"
|
|
||||||
placeholder="add multiple lines"
|
|
||||||
rows="10"
|
|
||||||
></textarea>
|
|
||||||
<br />
|
<br />
|
||||||
<button class="btn btn-primary" @click="textarea_2_datensatz">
|
<button class="btn btn-primary" @click="textarea_2_datensatz">
|
||||||
Datenpunkte verändern
|
Datenpunkte verändern
|
||||||
|
|
@ -172,11 +127,7 @@
|
||||||
<div class="column" style="text-align: center">
|
<div class="column" style="text-align: center">
|
||||||
<b>Prototyp</b><br />
|
<b>Prototyp</b><br />
|
||||||
x; y<br />
|
x; y<br />
|
||||||
<textarea
|
<textarea v-model="txt_prototypensatz" placeholder="add multiple lines" rows="10"></textarea>
|
||||||
v-model="txt_prototypensatz"
|
|
||||||
placeholder="add multiple lines"
|
|
||||||
rows="10"
|
|
||||||
></textarea>
|
|
||||||
<br />
|
<br />
|
||||||
<button class="btn btn-primary" @click="textarea_2_prototypensatz">
|
<button class="btn btn-primary" @click="textarea_2_prototypensatz">
|
||||||
Prototypen verändern
|
Prototypen verändern
|
||||||
|
|
@ -213,6 +164,7 @@
|
||||||
// Import the generateDifferentColors function from generateColors.js
|
// Import the generateDifferentColors function from generateColors.js
|
||||||
import { generateDifferentColors } from "./generateColors.js";
|
import { generateDifferentColors } from "./generateColors.js";
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "App",
|
name: "App",
|
||||||
components: {
|
components: {
|
||||||
|
|
@ -229,89 +181,30 @@ export default {
|
||||||
anzahl_prototypen: 3,
|
anzahl_prototypen: 3,
|
||||||
szenario: "gold_rush",
|
szenario: "gold_rush",
|
||||||
|
|
||||||
|
beschriftungXachse: "X-Wert",
|
||||||
|
beschriftungYachse: "Y-Wert",
|
||||||
|
|
||||||
|
max_x_wert: 10,
|
||||||
|
max_y_wert: 10,
|
||||||
|
|
||||||
|
|
||||||
gold_rush_datenpunkte: [
|
gold_rush_datenpunkte: [
|
||||||
{ x: 2, y: 3, color: "black" },
|
|
||||||
{ x: 3, y: 6, color: "black" },
|
|
||||||
{ x: 4, y: 7, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
|
||||||
{ x: 300, y: 300, color: "black" },
|
{ x: 300, y: 300, color: "black" },
|
||||||
|
{ x: 202, y: 70, color: "black" },
|
||||||
|
{ x: 162, y: 250, color: "black" },
|
||||||
|
{ x: 82, y: 20, color: "black" },
|
||||||
|
{ x: 500, y: 350, color: "black" },
|
||||||
|
{ x: 630, y: 170, color: "black" },
|
||||||
|
{ x: 430, y: 270, color: "black" },
|
||||||
|
{ x: 570, y: 30, color: "black" },
|
||||||
],
|
],
|
||||||
|
|
||||||
lebensmittel_datenpunkte: [
|
gold_rush_prototypen: [
|
||||||
{ x: 0, y: 10, color: "black" },
|
{ x: 540, y: 50, color: "blue" },
|
||||||
{ x: 0, y: 40, color: "black" },
|
{ x: 380, y: 370, color: "blue" },
|
||||||
{ x: 0, y: 40, color: "black" },
|
{ x: 120, y: 150, color: "blue" },
|
||||||
{ x: 0, y: 50, color: "black" },
|
|
||||||
{ x: 0, y: 60, color: "black" },
|
|
||||||
{ x: 0, y: 30, color: "black" },
|
|
||||||
{ x: 10, y: 60, color: "black" },
|
|
||||||
{ x: 0, y: 140, color: "black" },
|
|
||||||
{ x: 0, y: 150, color: "black" },
|
|
||||||
{ x: 10, y: 90, color: "black" },
|
|
||||||
{ x: 30, y: 140, color: "black" },
|
|
||||||
{ x: 0, y: 210, color: "black" },
|
|
||||||
{ x: 10, y: 200, color: "black" },
|
|
||||||
{ x: 2, y: 0, color: "black" },
|
|
||||||
{ x: 70, y: 40, color: "black" },
|
|
||||||
{ x: 130, y: 20, color: "black" },
|
|
||||||
{ x: 130, y: 0, color: "black" },
|
|
||||||
{ x: 80, y: 180, color: "black" },
|
|
||||||
{ x: 170, y: 10, color: "black" },
|
|
||||||
{ x: 110, y: 240, color: "black" },
|
|
||||||
{ x: 0, y: 520, color: "black" },
|
|
||||||
{ x: 140, y: 10, color: "black" },
|
|
||||||
{ x: 50, y: 350, color: "black" },
|
|
||||||
{ x: 180, y: 10, color: "black" },
|
|
||||||
{ x: 110, y: 210, color: "black" },
|
|
||||||
{ x: 110, y: 220, color: "black" },
|
|
||||||
{ x: 20, y: 550, color: "black" },
|
|
||||||
{ x: 0, y: 730, color: "black" },
|
|
||||||
{ x: 140, y: 360, color: "black" },
|
|
||||||
{ x: 220, y: 110, color: "black" },
|
|
||||||
{ x: 50, y: 510, color: "black" },
|
|
||||||
{ x: 310, y: 30, color: "black" },
|
|
||||||
{ x: 0, y: 770, color: "black" },
|
|
||||||
{ x: 330, y: 60, color: "black" },
|
|
||||||
{ x: 10, y: 770, color: "black" },
|
|
||||||
{ x: 30, y: 610, color: "black" },
|
|
||||||
{ x: 280, y: 0, color: "black" },
|
|
||||||
{ x: 20, y: 710, color: "black" },
|
|
||||||
{ x: 310, y: 20, color: "black" },
|
|
||||||
{ x: 260, y: 290, color: "black" },
|
|
||||||
{ x: 70, y: 590, color: "black" },
|
|
||||||
{ x: 60, y: 710, color: "black" },
|
|
||||||
{ x: 50, y: 740, color: "black" },
|
|
||||||
{ x: 110, y: 610, color: "black" },
|
|
||||||
{ x: 260, y: 540, color: "black" },
|
|
||||||
{ x: 240, y: 530, color: "black" },
|
|
||||||
{ x: 230, y: 570, color: "black" },
|
|
||||||
{ x: 280, y: 530, color: "black" },
|
|
||||||
{ x: 300, y: 590, color: "black" },
|
|
||||||
{ x: 320, y: 540, color: "black" },
|
|
||||||
{ x: 430, y: 370, color: "black" },
|
|
||||||
{ x: 480, y: 80, color: "black" },
|
|
||||||
{ x: 800, y: 0, color: "black" },
|
|
||||||
{ x: 790, y: 0, color: "black" },
|
|
||||||
{ x: 700, y: 60, color: "black" },
|
|
||||||
{ x: 820, y: 10, color: "black" },
|
|
||||||
],
|
],
|
||||||
|
|
||||||
/*
|
|
||||||
lebensmittel_datenpunkte: [
|
lebensmittel_datenpunkte: [
|
||||||
{ x: 0, y: 1, color: "black" },
|
{ x: 0, y: 1, color: "black" },
|
||||||
{ x: 0, y: 4, color: "black" },
|
{ x: 0, y: 4, color: "black" },
|
||||||
|
|
@ -370,7 +263,39 @@ export default {
|
||||||
{ x: 70, y: 6, color: "black" },
|
{ x: 70, y: 6, color: "black" },
|
||||||
{ x: 82, y: 1, color: "black" },
|
{ x: 82, y: 1, color: "black" },
|
||||||
],
|
],
|
||||||
*/
|
|
||||||
|
lebensmittel_prototypen: [
|
||||||
|
{ x: 10, y: 10, color: "blue" },
|
||||||
|
{ x: 5, y: 50, color: "blue" },
|
||||||
|
{ x: 50, y: 5, color: "blue" },
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
stadtplan_datenpunkte: [
|
||||||
|
{ x: 597, y: 13, color: "black" },
|
||||||
|
{ x: 248, y: 99, color: "black" },
|
||||||
|
{ x: 538, y: 274, color: "black" },
|
||||||
|
{ x: 526, y: 321, color: "black" },
|
||||||
|
{ x: 119, y: 316, color: "black" },
|
||||||
|
{ x: 342, y: 365, color: "black" },
|
||||||
|
{ x: 204, y: 368, color: "black" },
|
||||||
|
{ x: 472, y: 43, color: "black" },
|
||||||
|
{ x: 240, y: 264, color: "black" },
|
||||||
|
{ x: 189, y: 175, color: "black" },
|
||||||
|
{ x: 424, y: 318, color: "black" },
|
||||||
|
{ x: 158, y: 344, color: "black" },
|
||||||
|
{ x: 123, y: 246, color: "black" },
|
||||||
|
{ x: 585, y: 297, color: "black" },
|
||||||
|
{ x: 171, y: 80, color: "black" },
|
||||||
|
],
|
||||||
|
|
||||||
|
stadtplan_prototypen: [
|
||||||
|
{ x: 540, y: 50, color: "blue" },
|
||||||
|
{ x: 380, y: 370, color: "blue" },
|
||||||
|
{ x: 120, y: 150, color: "blue" },
|
||||||
|
{ x: 305, y: 278, color: "blue" },
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
datenpunkte: [
|
datenpunkte: [
|
||||||
{ x: 300, y: 300, color: "black" },
|
{ x: 300, y: 300, color: "black" },
|
||||||
|
|
@ -389,11 +314,7 @@ export default {
|
||||||
{ x: 120, y: 150, color: "blue" },
|
{ x: 120, y: 150, color: "blue" },
|
||||||
],
|
],
|
||||||
|
|
||||||
prototypen_original: [
|
prototypen_original: [],
|
||||||
{ x: 540, y: 50, color: "blue" },
|
|
||||||
{ x: 380, y: 370, color: "blue" },
|
|
||||||
{ x: 120, y: 150, color: "blue" },
|
|
||||||
],
|
|
||||||
|
|
||||||
canvas: null,
|
canvas: null,
|
||||||
vueCanvas: null,
|
vueCanvas: null,
|
||||||
|
|
@ -470,12 +391,39 @@ export default {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
akt_datenpunkt_skaliert: function () {
|
||||||
|
if (this.aktueller_datenpunkt < this.datenpunkte.length) {
|
||||||
|
return this.datenpunkte_skaliert[this.aktueller_datenpunkt];
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
akt_prototyp_skaliert: function () {
|
||||||
|
if (this.aktueller_prototyp < this.prototypen.length) {
|
||||||
|
return this.prototypen_skaliert[this.aktueller_prototyp];
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
datenpunkte_skaliert: function () {
|
||||||
|
return this.ermittle_skalierten_datensatz(this.datenpunkte);
|
||||||
|
},
|
||||||
|
prototypen_skaliert: function () {
|
||||||
|
return this.ermittle_skalierten_datensatz(this.prototypen);
|
||||||
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
lade() {
|
lade() {
|
||||||
this.datensatz_2_textarea();
|
this.datensatz_2_textarea();
|
||||||
this.prototypensatz_2_textarea();
|
this.prototypensatz_2_textarea();
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
datensatz_2_textarea() {
|
datensatz_2_textarea() {
|
||||||
|
|
@ -571,7 +519,34 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
update_max_x_y() {
|
||||||
|
this.max_x_wert = 10;
|
||||||
|
this.max_y_wert = 10;
|
||||||
|
|
||||||
|
this.datenpunkte.forEach((element) => {
|
||||||
|
if (element.x > this.max_x_wert) {
|
||||||
|
this.max_x_wert = element.x;
|
||||||
|
}
|
||||||
|
if (element.y > this.max_y_wert) {
|
||||||
|
this.max_y_wert = element.y;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
this.prototypen.forEach((element) => {
|
||||||
|
if (element.x > this.max_x_wert) {
|
||||||
|
this.max_x_wert = element.x;
|
||||||
|
}
|
||||||
|
if (element.y > this.max_y_wert) {
|
||||||
|
this.max_y_wert = element.y;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
szenario_aendern() {
|
szenario_aendern() {
|
||||||
|
/*
|
||||||
if (this.szenario == "lebensmittel") {
|
if (this.szenario == "lebensmittel") {
|
||||||
this.datenpunkte = this.ermittle_skalierten_datensatz(
|
this.datenpunkte = this.ermittle_skalierten_datensatz(
|
||||||
this.lebensmittel_datenpunkte
|
this.lebensmittel_datenpunkte
|
||||||
|
|
@ -580,39 +555,55 @@ export default {
|
||||||
this.update_anzahl_prototypen(4);
|
this.update_anzahl_prototypen(4);
|
||||||
this.datensatz_2_textarea();
|
this.datensatz_2_textarea();
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
switch (this.szenario) {
|
||||||
|
case "gold_rush": this.datenpunkte = this.gold_rush_datenpunkte;
|
||||||
|
this.prototypen = this.gold_rush_prototypen;
|
||||||
|
break;
|
||||||
|
case "stadtplan": this.datenpunkte = this.stadtplan_datenpunkte;
|
||||||
|
this.prototypen = this.stadtplan_prototypen;
|
||||||
|
break;
|
||||||
|
case "lebensmittel": this.datenpunkte = this.lebensmittel_datenpunkte;
|
||||||
|
this.prototypen = this.lebensmittel_prototypen;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.prototypen_original = this.prototypen;
|
||||||
|
|
||||||
|
this.anzahl_datenpunkte = this.datenpunkte.length;
|
||||||
|
this.anzahl_prototypen = this.prototypen.length;
|
||||||
|
|
||||||
|
|
||||||
|
this.update_anzahl_prototypen(this.anzahl_prototypen);
|
||||||
|
this.datensatz_2_textarea();
|
||||||
|
this.prototypensatz_2_textarea();
|
||||||
this.loesche_zeichenflaeche();
|
this.loesche_zeichenflaeche();
|
||||||
|
this.update_max_x_y();
|
||||||
this.refresh();
|
this.refresh();
|
||||||
},
|
},
|
||||||
|
|
||||||
ermittle_skalierten_datensatz(ds_eingabe) {
|
ermittle_skalierten_datensatz(ds_eingabe) {
|
||||||
let breite = 800;
|
let breite_original = 800;
|
||||||
let hoehe = 450;
|
let hoehe_original = 450;
|
||||||
let max_x = 0;
|
|
||||||
let max_y = 0;
|
let offset_rand_ursprung_x = 14;
|
||||||
|
let offset_rand_ursprung_y = 14;
|
||||||
|
let offset_kreis_radius = 16; // damit die Kreise nicht außerhalb gezeichnet werden
|
||||||
|
let breite = breite_original - offset_rand_ursprung_x - offset_kreis_radius;
|
||||||
|
let hoehe = hoehe_original - offset_rand_ursprung_y - offset_kreis_radius;
|
||||||
|
|
||||||
let ds_ausgabe = [];
|
let ds_ausgabe = [];
|
||||||
|
|
||||||
ds_eingabe.forEach((element) => {
|
ds_eingabe.forEach((element) => {
|
||||||
if (element.x > max_x) {
|
let x_skaliert = Math.round((element.x / this.max_x_wert) * breite) + offset_rand_ursprung_x;
|
||||||
max_x = element.x;
|
|
||||||
}
|
|
||||||
if (element.y > max_y) {
|
|
||||||
max_y = element.y;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
max_x += 50;
|
|
||||||
max_y += 50;
|
|
||||||
|
|
||||||
ds_eingabe.forEach((element) => {
|
|
||||||
let x_skaliert = Math.round((element.x / max_x) * breite);
|
|
||||||
//let y_skaliert = Math.round(hoehe - (element.y / max_y) * hoehe); // y invertieren
|
//let y_skaliert = Math.round(hoehe - (element.y / max_y) * hoehe); // y invertieren
|
||||||
let y_skaliert = Math.round((element.y / max_y) * hoehe);
|
let y_skaliert = Math.round(hoehe_original - (element.y / this.max_y_wert) * hoehe) - offset_rand_ursprung_y;
|
||||||
ds_ausgabe.push({ x: x_skaliert, y: y_skaliert, color: element.color });
|
ds_ausgabe.push({ x: x_skaliert, y: y_skaliert, color: element.color });
|
||||||
});
|
});
|
||||||
|
|
||||||
// Array mischen
|
// Array mischen
|
||||||
ds_ausgabe = this.shuffleArray(ds_ausgabe);
|
//ds_ausgabe = this.shuffleArray(ds_ausgabe);
|
||||||
return ds_ausgabe;
|
return ds_ausgabe;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -678,8 +669,8 @@ export default {
|
||||||
},
|
},
|
||||||
*/
|
*/
|
||||||
generiere_datenpunkt_zufaellig() {
|
generiere_datenpunkt_zufaellig() {
|
||||||
let max_x = 800;
|
let max_x = this.max_x_wert;
|
||||||
let max_y = 450;
|
let max_y = this.max_y_wert;
|
||||||
let datenpunkt = {};
|
let datenpunkt = {};
|
||||||
|
|
||||||
datenpunkt.x = Math.floor(Math.random() * max_x);
|
datenpunkt.x = Math.floor(Math.random() * max_x);
|
||||||
|
|
@ -690,8 +681,8 @@ export default {
|
||||||
return datenpunkt;
|
return datenpunkt;
|
||||||
},
|
},
|
||||||
generiere_prototyp_zufaellig() {
|
generiere_prototyp_zufaellig() {
|
||||||
let max_x = 800;
|
let max_x = this.max_x_wert;
|
||||||
let max_y = 450;
|
let max_y = this.max_y_wert;
|
||||||
let prototyp = {};
|
let prototyp = {};
|
||||||
|
|
||||||
prototyp.x = Math.floor(Math.random() * max_x);
|
prototyp.x = Math.floor(Math.random() * max_x);
|
||||||
|
|
@ -711,6 +702,8 @@ export default {
|
||||||
let breite = 800;
|
let breite = 800;
|
||||||
let hoehe = 450;
|
let hoehe = 450;
|
||||||
this.vueCanvas.drawImage(bild, bildX, bildY, breite, hoehe);
|
this.vueCanvas.drawImage(bild, bildX, bildY, breite, hoehe);
|
||||||
|
|
||||||
|
this.zeichneLegende();
|
||||||
},
|
},
|
||||||
|
|
||||||
faerbe_prototypen() {
|
faerbe_prototypen() {
|
||||||
|
|
@ -726,13 +719,13 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
faerbe_datenpunkte(alle) {
|
faerbe_datenpunkte(alle) {
|
||||||
for (let i = 0; i < this.datenpunkte.length; i++) {
|
for (let i = 0; i < this.datenpunkte_skaliert.length; i++) {
|
||||||
if (alle || i < this.aktueller_datenpunkt) {
|
if (alle || i < this.aktueller_datenpunkt) {
|
||||||
let next_prototyp = this.gib_naechstgelegener_prototyp(
|
let next_prototyp = this.gib_naechstgelegener_prototyp(
|
||||||
this.datenpunkte[i]
|
this.datenpunkte_skaliert[i]
|
||||||
);
|
);
|
||||||
let farbe = next_prototyp.color;
|
let farbe = next_prototyp.color;
|
||||||
this.datenpunkte[i].color = farbe;
|
this.datenpunkte_skaliert[i].color = farbe;
|
||||||
console.log(farbe);
|
console.log(farbe);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -836,8 +829,8 @@ export default {
|
||||||
|
|
||||||
zeige_line_an() {
|
zeige_line_an() {
|
||||||
this.zeichne_linie_datenpunkt_prototyp(
|
this.zeichne_linie_datenpunkt_prototyp(
|
||||||
this.datenpunkte[this.aktueller_datenpunkt],
|
this.datenpunkte_skaliert[this.aktueller_datenpunkt],
|
||||||
this.prototypen[this.aktueller_prototyp]
|
this.prototypen_skaliert[this.aktueller_prototyp]
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
@ -846,7 +839,9 @@ export default {
|
||||||
let i = 0;
|
let i = 0;
|
||||||
let hightlight_farbe = "lightgreen";
|
let hightlight_farbe = "lightgreen";
|
||||||
|
|
||||||
this.datenpunkte.forEach((element) => {
|
this.datenpunkte_skaliert.forEach((element) => {
|
||||||
|
console.log("x:" + element.x);
|
||||||
|
|
||||||
if (markierung && i == this.aktueller_datenpunkt) {
|
if (markierung && i == this.aktueller_datenpunkt) {
|
||||||
this.zeichne_kreis(
|
this.zeichne_kreis(
|
||||||
element.x,
|
element.x,
|
||||||
|
|
@ -883,7 +878,7 @@ export default {
|
||||||
let hightlight_farbe;
|
let hightlight_farbe;
|
||||||
let radius;
|
let radius;
|
||||||
|
|
||||||
this.prototypen.forEach((element) => {
|
this.prototypen_skaliert.forEach((element) => {
|
||||||
hightlight_farbe = "white";
|
hightlight_farbe = "white";
|
||||||
radius = 14;
|
radius = 14;
|
||||||
|
|
||||||
|
|
@ -951,8 +946,8 @@ export default {
|
||||||
let naechstgelegener_prototyp = null;
|
let naechstgelegener_prototyp = null;
|
||||||
let min_distanz = null;
|
let min_distanz = null;
|
||||||
// pruefe alle prototypen und merke die naechste
|
// pruefe alle prototypen und merke die naechste
|
||||||
for (let i = 0; i < this.prototypen.length; i++) {
|
for (let i = 0; i < this.prototypen_skaliert.length; i++) {
|
||||||
let akt_prototyp = this.prototypen[i];
|
let akt_prototyp = this.prototypen_skaliert[i];
|
||||||
let akt_distanz = this.gib_distanz(datenpunkt, akt_prototyp);
|
let akt_distanz = this.gib_distanz(datenpunkt, akt_prototyp);
|
||||||
if (naechstgelegener_prototyp == null || akt_distanz < min_distanz) {
|
if (naechstgelegener_prototyp == null || akt_distanz < min_distanz) {
|
||||||
naechstgelegener_prototyp = akt_prototyp;
|
naechstgelegener_prototyp = akt_prototyp;
|
||||||
|
|
@ -977,8 +972,8 @@ export default {
|
||||||
kurz_zeichne_linie_datenpunkt_prototyp() {
|
kurz_zeichne_linie_datenpunkt_prototyp() {
|
||||||
// pruefe_aktuelle
|
// pruefe_aktuelle
|
||||||
this.zeichne_linie_datenpunkt_prototyp(
|
this.zeichne_linie_datenpunkt_prototyp(
|
||||||
this.akt_datenpunkt,
|
this.akt_datenpunkt_skaliert,
|
||||||
this.akt_prototyp,
|
this.akt_prototyp_skaliert,
|
||||||
"lightgreen",
|
"lightgreen",
|
||||||
4
|
4
|
||||||
);
|
);
|
||||||
|
|
@ -987,8 +982,8 @@ export default {
|
||||||
existiert_kuerzere_Distanz() {
|
existiert_kuerzere_Distanz() {
|
||||||
// bisher naechstgelegener Prototyp
|
// bisher naechstgelegener Prototyp
|
||||||
let akt_distanz = this.gib_distanz(
|
let akt_distanz = this.gib_distanz(
|
||||||
this.akt_datenpunkt,
|
this.akt_datenpunkt_skaliert,
|
||||||
this.akt_prototyp
|
this.akt_prototyp_skaliert
|
||||||
);
|
);
|
||||||
|
|
||||||
// naechsten aktualisieren
|
// naechsten aktualisieren
|
||||||
|
|
@ -996,7 +991,7 @@ export default {
|
||||||
this.naechstgelegener_prototyp == null ||
|
this.naechstgelegener_prototyp == null ||
|
||||||
akt_distanz < this.naechstgelegener_prototyp_distanz
|
akt_distanz < this.naechstgelegener_prototyp_distanz
|
||||||
) {
|
) {
|
||||||
this.naechstgelegener_prototyp = this.akt_prototyp;
|
this.naechstgelegener_prototyp = this.akt_prototyp_skaliert;
|
||||||
this.naechstgelegener_prototyp_distanz = akt_distanz;
|
this.naechstgelegener_prototyp_distanz = akt_distanz;
|
||||||
return true;
|
return true;
|
||||||
} else {
|
} else {
|
||||||
|
|
@ -1012,7 +1007,7 @@ export default {
|
||||||
|
|
||||||
kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp() {
|
kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp() {
|
||||||
this.zeichne_linie_datenpunkt_prototyp(
|
this.zeichne_linie_datenpunkt_prototyp(
|
||||||
this.akt_datenpunkt,
|
this.akt_datenpunkt_skaliert,
|
||||||
this.naechstgelegener_prototyp,
|
this.naechstgelegener_prototyp,
|
||||||
"red",
|
"red",
|
||||||
3
|
3
|
||||||
|
|
@ -1124,7 +1119,7 @@ export default {
|
||||||
// Your animation code here
|
// Your animation code here
|
||||||
if (
|
if (
|
||||||
this.naechstgelegener_prototyp != null &&
|
this.naechstgelegener_prototyp != null &&
|
||||||
this.akt_datenpunkt != null
|
this.akt_datenpunkt_skaliert != null
|
||||||
) {
|
) {
|
||||||
this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
|
this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
|
||||||
this.zeichne_datenpunkte(true, true);
|
this.zeichne_datenpunkte(true, true);
|
||||||
|
|
@ -1157,16 +1152,16 @@ export default {
|
||||||
let i = 0;
|
let i = 0;
|
||||||
|
|
||||||
let x_neu =
|
let x_neu =
|
||||||
(this.akt_datenpunkt.x + this.naechstgelegener_prototyp.x) / 2;
|
(this.akt_datenpunkt_skaliert.x + this.naechstgelegener_prototyp.x) / 2;
|
||||||
let y_neu =
|
let y_neu =
|
||||||
(this.akt_datenpunkt.y + this.naechstgelegener_prototyp.y) / 2;
|
(this.akt_datenpunkt_skaliert.y + this.naechstgelegener_prototyp.y) / 2;
|
||||||
|
|
||||||
let delta_x =
|
let delta_x =
|
||||||
(this.akt_datenpunkt.x - this.naechstgelegener_prototyp.x) /
|
(this.akt_datenpunkt_skaliert.x - this.naechstgelegener_prototyp.x) /
|
||||||
2 /
|
2 /
|
||||||
schritte;
|
schritte;
|
||||||
let delta_y =
|
let delta_y =
|
||||||
(this.akt_datenpunkt.y - this.naechstgelegener_prototyp.y) /
|
(this.akt_datenpunkt_skaliert.y - this.naechstgelegener_prototyp.y) /
|
||||||
2 /
|
2 /
|
||||||
schritte;
|
schritte;
|
||||||
|
|
||||||
|
|
@ -1192,12 +1187,14 @@ export default {
|
||||||
} else {
|
} else {
|
||||||
this.naechstgelegener_prototyp.x = x_neu;
|
this.naechstgelegener_prototyp.x = x_neu;
|
||||||
this.naechstgelegener_prototyp.y = y_neu;
|
this.naechstgelegener_prototyp.y = y_neu;
|
||||||
|
|
||||||
this.refresh();
|
this.refresh();
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
//console.error("Caught custom exception:", error.message);
|
//console.error("Caught custom exception:", error.message);
|
||||||
this.letzte_prototyp.x = x_neu;
|
this.letzte_prototyp.x = x_neu;
|
||||||
this.letzte_prototyp.y = y_neu;
|
this.letzte_prototyp.y = y_neu;
|
||||||
|
|
||||||
this.refresh();
|
this.refresh();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -1213,7 +1210,7 @@ export default {
|
||||||
|
|
||||||
for (let i = 0; i < this.datenpunkte.length; i++) {
|
for (let i = 0; i < this.datenpunkte.length; i++) {
|
||||||
let next_prototyp = this.gib_naechstgelegener_prototyp(
|
let next_prototyp = this.gib_naechstgelegener_prototyp(
|
||||||
this.datenpunkte[i]
|
this.datenpunkte_skaliert[i]
|
||||||
);
|
);
|
||||||
this.datenpunkte[i].color = "#000000";
|
this.datenpunkte[i].color = "#000000";
|
||||||
}
|
}
|
||||||
|
|
@ -1225,6 +1222,161 @@ export default {
|
||||||
this.zeichne_datenpunkte(false, true);
|
this.zeichne_datenpunkte(false, true);
|
||||||
console.log("Page completed with image and files!");
|
console.log("Page completed with image and files!");
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
|
|
||||||
|
|
||||||
|
gibCanvasPosX(wert) {
|
||||||
|
return wert * this.vueCanvas.canvas.width;
|
||||||
|
},
|
||||||
|
|
||||||
|
gibCanvasPosY(wert) {
|
||||||
|
return (1 - wert) * this.vueCanvas.canvas.height;
|
||||||
|
},
|
||||||
|
|
||||||
|
gibCanvasBreite() {
|
||||||
|
return this.vueCanvas.canvas.width;
|
||||||
|
},
|
||||||
|
|
||||||
|
gibCanvasHoehe() {
|
||||||
|
return this.window.innerHeight - this.randabstandRechts;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
loescheCanvas() {
|
||||||
|
this.vueCanvas.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||||
|
},
|
||||||
|
|
||||||
|
zeichneText(x, y, text, color) {
|
||||||
|
this.vueCanvas.fillStyle = color;
|
||||||
|
this.vueCanvas.font = "20px Arial";
|
||||||
|
this.vueCanvas.textAlign = "left";
|
||||||
|
if (x - 5 > this.gibCanvasBreite() / 2) {
|
||||||
|
this.vueCanvas.textAlign = "right";
|
||||||
|
x -= 5;
|
||||||
|
}
|
||||||
|
this.vueCanvas.fillText(text, x, y);
|
||||||
|
},
|
||||||
|
|
||||||
|
zeichneTextMittig(x, y, text, color) {
|
||||||
|
this.vueCanvas.fillStyle = color;
|
||||||
|
this.vueCanvas.font = "20px Arial";
|
||||||
|
this.vueCanvas.textAlign = "left";
|
||||||
|
if (x > this.gibCanvasBreite() / 4 * 3) {
|
||||||
|
this.vueCanvas.textAlign = "right";
|
||||||
|
x -= 5;
|
||||||
|
}
|
||||||
|
if (x < this.gibCanvasBreite() / 4) {
|
||||||
|
this.vueCanvas.textAlign = "left";
|
||||||
|
x -= 5;
|
||||||
|
}
|
||||||
|
this.vueCanvas.fillText(text, x, y);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
zeichneTextLegendeXachse(x, y, text, color) {
|
||||||
|
this.vueCanvas.fillStyle = color;
|
||||||
|
this.vueCanvas.font = "12px Arial";
|
||||||
|
this.vueCanvas.textAlign = "center";
|
||||||
|
this.vueCanvas.fillText(text, x, y);
|
||||||
|
},
|
||||||
|
|
||||||
|
zeichnePfeilLegendeXachse(x, y, text, color) {
|
||||||
|
this.vueCanvas.fillStyle = color;
|
||||||
|
this.vueCanvas.font = "bold 14px Arial";
|
||||||
|
this.vueCanvas.textAlign = "right";
|
||||||
|
this.vueCanvas.fillText(text, x, y);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
zeichnePfeilLegendeYachse(x, y, text, color) {
|
||||||
|
this.vueCanvas.fillStyle = color;
|
||||||
|
this.vueCanvas.font = "bold 14px Arial";
|
||||||
|
this.vueCanvas.textAlign = "right";
|
||||||
|
this.vueCanvas.rotate(-Math.PI / 2);
|
||||||
|
this.vueCanvas.fillText(text, x, y);
|
||||||
|
this.vueCanvas.rotate(Math.PI / 2);
|
||||||
|
},
|
||||||
|
|
||||||
|
zeichneTextLegendeYachse(x, y, text, color) {
|
||||||
|
this.vueCanvas.fillStyle = color;
|
||||||
|
this.vueCanvas.font = "12px Arial";
|
||||||
|
this.vueCanvas.textAlign = "center";
|
||||||
|
this.vueCanvas.rotate(-Math.PI / 2);
|
||||||
|
this.vueCanvas.fillText(text, x, y);
|
||||||
|
this.vueCanvas.rotate(Math.PI / 2);
|
||||||
|
},
|
||||||
|
|
||||||
|
zeichneLinie(xStart, yStart, xEnd, yEnd, color) {
|
||||||
|
this.vueCanvas.fillStyle = color;
|
||||||
|
this.vueCanvas.beginPath();
|
||||||
|
this.vueCanvas.moveTo(xStart, yStart);
|
||||||
|
this.vueCanvas.lineWidth = 3;
|
||||||
|
// set line color
|
||||||
|
this.vueCanvas.strokeStyle = color;
|
||||||
|
this.vueCanvas.fillStyle = this.vueCanvas.lineTo(xEnd, yEnd);
|
||||||
|
this.vueCanvas.stroke();
|
||||||
|
},
|
||||||
|
|
||||||
|
zeichneRechteck(x, y, width, height, color, opacity) {
|
||||||
|
this.vueCanvas.fillStyle = color;
|
||||||
|
this.vueCanvas.globalAlpha = opacity;
|
||||||
|
this.vueCanvas.fillRect(x, y, width, height);
|
||||||
|
this.vueCanvas.globalAlpha = 1.0;
|
||||||
|
},
|
||||||
|
|
||||||
|
zeichneLegende() {
|
||||||
|
|
||||||
|
//let ds = this.model.baum.gibAktuellenDatensplit().datensatz;
|
||||||
|
|
||||||
|
let beschriftungXachse = this.beschriftungXachse; // "X-Wert"; //gibPraediktorvariablen()[0];
|
||||||
|
let beschriftungYachse = this.beschriftungYachse; // "Y-Wert"; //gibPraediktorvariablen()[1];
|
||||||
|
this.vueCanvas.font = "14px Arial";
|
||||||
|
|
||||||
|
let beschriftungXBreite = this.vueCanvas.measureText(beschriftungXachse).width + 6;
|
||||||
|
let beschriftungYBreite = this.vueCanvas.measureText(beschriftungYachse).width + 6;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
console.log("zeichne Legende");
|
||||||
|
// X-Achse
|
||||||
|
this.zeichneRechteck(0, this.vueCanvas.canvas.height - 16, this.vueCanvas.canvas.width, this.vueCanvas.canvas.height * 2, "white", 1);
|
||||||
|
this.zeichneRechteck(12, this.vueCanvas.canvas.height - 14, this.vueCanvas.canvas.width - 20, 2, "black", 1);
|
||||||
|
this.zeichnePfeilLegendeXachse(this.vueCanvas.canvas.width - 1, this.vueCanvas.canvas.height - 8, ">", "black");
|
||||||
|
//this.zeichneRechteck(this.vueCanvas.canvas.width / 2 - (beschriftungXBreite / 2), this.vueCanvas.canvas.height - 12, beschriftungXBreite, 12, "white", 1);
|
||||||
|
this.zeichneTextLegendeXachse(this.vueCanvas.canvas.width / 2, this.vueCanvas.canvas.height - 1, beschriftungXachse, "black");
|
||||||
|
|
||||||
|
this.zeichneTextLegendeXachse(14, this.vueCanvas.canvas.height - 1, "0", "grey");
|
||||||
|
this.zeichneTextLegendeXachse(this.vueCanvas.canvas.width - 20, this.vueCanvas.canvas.height - 1, this.max_x_wert, "grey");
|
||||||
|
|
||||||
|
// Y-Achse
|
||||||
|
|
||||||
|
this.zeichneRechteck(0, 0, 16, this.vueCanvas.canvas.height - 14, "white", 1);
|
||||||
|
this.zeichneRechteck(12, 8, 2, this.vueCanvas.canvas.height - 20, "black", 1);
|
||||||
|
this.zeichnePfeilLegendeYachse(-1, 18, ">", "black");
|
||||||
|
//this.zeichneRechteck(0, this.vueCanvas.canvas.height / 2 - (beschriftungYBreite / 2), 11, beschriftungYBreite, "white", 1);
|
||||||
|
this.zeichneTextLegendeYachse(-(this.vueCanvas.canvas.height / 2), 11, beschriftungYachse, "black");
|
||||||
|
|
||||||
|
this.zeichneTextLegendeYachse(-20, 10, this.max_y_wert, "grey");
|
||||||
|
this.zeichneTextLegendeYachse(-(this.vueCanvas.canvas.height - 12), 10, "0", "gray");
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ------------------------------------------------------------------------------
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
@ -1240,6 +1392,7 @@ export default {
|
||||||
|
|
||||||
document.onreadystatechange = () => {
|
document.onreadystatechange = () => {
|
||||||
if (document.readyState == "complete") {
|
if (document.readyState == "complete") {
|
||||||
|
this.szenario_aendern();
|
||||||
this.refresh();
|
this.refresh();
|
||||||
this.zeichne_hintergrund();
|
this.zeichne_hintergrund();
|
||||||
this.zeichne_prototypen(false);
|
this.zeichne_prototypen(false);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue