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>
|
||||
<img
|
||||
id="kein_bild"
|
||||
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"
|
||||
/>
|
||||
<img id="kein_bild" 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>
|
||||
Finde heraus, wie die Positionen der {{ this.bezeichnung_prototypen }} an
|
||||
|
|
@ -26,16 +11,10 @@
|
|||
</h2>
|
||||
<br />
|
||||
|
||||
<canvas
|
||||
id="c"
|
||||
STYLE="border: 1px black solid;"
|
||||
height="450"
|
||||
width="800"
|
||||
></canvas>
|
||||
<canvas id="c" STYLE="border: 0px black solid;" height="450" width="800"></canvas>
|
||||
<br />
|
||||
Die <b>Punkte</b> auf der Karte sind die
|
||||
<b>{{ this.bezeichnung_datenpunkte }}</b
|
||||
>.<br />
|
||||
<b>{{ this.bezeichnung_datenpunkte }}</b>.<br />
|
||||
Die <b>x-Markierungen</b> auf der Karte entsprechen den
|
||||
<b>{{ this.bezeichnung_prototypen }}</b>
|
||||
<br />
|
||||
|
|
@ -45,13 +24,7 @@
|
|||
starte Animation für alles
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="range"
|
||||
v-model="animation_speed_range"
|
||||
min="0"
|
||||
max="2000"
|
||||
step="1"
|
||||
/>
|
||||
<input type="range" v-model="animation_speed_range" min="0" max="2000" step="1" />
|
||||
|
||||
{{ animation_speed }} ms
|
||||
</div>
|
||||
|
|
@ -74,8 +47,7 @@
|
|||
<div class="column">
|
||||
{{ this.bezeichnung_aktueller_datenpunkt }}:
|
||||
<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>
|
||||
|
|
@ -106,19 +78,12 @@
|
|||
<div class="column" style="text-align: center">
|
||||
<h3>{{ this.bezeichnung_datenpunkte }}</h3>
|
||||
|
||||
<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>
|
||||
|
||||
<b style="font-size: xx-large">{{ this.anzahl_datenpunkte }}</b
|
||||
>
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="update_anzahl_datenpunkte(++this.anzahl_datenpunkte)"
|
||||
>
|
||||
<b style="font-size: xx-large">{{ this.anzahl_datenpunkte }}</b>
|
||||
<button class="btn btn-primary" @click="update_anzahl_datenpunkte(++this.anzahl_datenpunkte)">
|
||||
+
|
||||
</button>
|
||||
|
||||
|
|
@ -129,19 +94,13 @@
|
|||
<div class="column" style="text-align: center">
|
||||
<h3>{{ this.bezeichnung_prototypen }}</h3>
|
||||
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="update_anzahl_prototypen(--this.anzahl_prototypen)"
|
||||
>
|
||||
<button class="btn btn-primary" @click="update_anzahl_prototypen(--this.anzahl_prototypen)">
|
||||
-
|
||||
</button>
|
||||
|
||||
<b style="font-size: xx-large">{{ this.anzahl_prototypen }}</b>
|
||||
|
||||
<button
|
||||
class="btn btn-primary"
|
||||
@click="update_anzahl_prototypen(++this.anzahl_prototypen)"
|
||||
>
|
||||
<button class="btn btn-primary" @click="update_anzahl_prototypen(++this.anzahl_prototypen)">
|
||||
+
|
||||
</button>
|
||||
<br />
|
||||
|
|
@ -159,11 +118,7 @@
|
|||
<div class="column" style="text-align: center">
|
||||
<b>Datenpunkt</b><br />
|
||||
x; y<br />
|
||||
<textarea
|
||||
v-model="txt_datensatz"
|
||||
placeholder="add multiple lines"
|
||||
rows="10"
|
||||
></textarea>
|
||||
<textarea v-model="txt_datensatz" placeholder="add multiple lines" rows="10"></textarea>
|
||||
<br />
|
||||
<button class="btn btn-primary" @click="textarea_2_datensatz">
|
||||
Datenpunkte verändern
|
||||
|
|
@ -172,11 +127,7 @@
|
|||
<div class="column" style="text-align: center">
|
||||
<b>Prototyp</b><br />
|
||||
x; y<br />
|
||||
<textarea
|
||||
v-model="txt_prototypensatz"
|
||||
placeholder="add multiple lines"
|
||||
rows="10"
|
||||
></textarea>
|
||||
<textarea v-model="txt_prototypensatz" placeholder="add multiple lines" rows="10"></textarea>
|
||||
<br />
|
||||
<button class="btn btn-primary" @click="textarea_2_prototypensatz">
|
||||
Prototypen verändern
|
||||
|
|
@ -213,6 +164,7 @@
|
|||
// Import the generateDifferentColors function from generateColors.js
|
||||
import { generateDifferentColors } from "./generateColors.js";
|
||||
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: {
|
||||
|
|
@ -229,89 +181,30 @@ export default {
|
|||
anzahl_prototypen: 3,
|
||||
szenario: "gold_rush",
|
||||
|
||||
beschriftungXachse: "X-Wert",
|
||||
beschriftungYachse: "Y-Wert",
|
||||
|
||||
max_x_wert: 10,
|
||||
max_y_wert: 10,
|
||||
|
||||
|
||||
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: 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: [
|
||||
{ x: 0, y: 10, color: "black" },
|
||||
{ x: 0, y: 40, color: "black" },
|
||||
{ x: 0, y: 40, color: "black" },
|
||||
{ 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" },
|
||||
gold_rush_prototypen: [
|
||||
{ x: 540, y: 50, color: "blue" },
|
||||
{ x: 380, y: 370, color: "blue" },
|
||||
{ x: 120, y: 150, color: "blue" },
|
||||
],
|
||||
|
||||
/*
|
||||
lebensmittel_datenpunkte: [
|
||||
{ x: 0, y: 1, color: "black" },
|
||||
{ x: 0, y: 4, color: "black" },
|
||||
|
|
@ -370,7 +263,39 @@ export default {
|
|||
{ x: 70, y: 6, 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: [
|
||||
{ x: 300, y: 300, color: "black" },
|
||||
|
|
@ -389,11 +314,7 @@ export default {
|
|||
{ x: 120, y: 150, color: "blue" },
|
||||
],
|
||||
|
||||
prototypen_original: [
|
||||
{ x: 540, y: 50, color: "blue" },
|
||||
{ x: 380, y: 370, color: "blue" },
|
||||
{ x: 120, y: 150, color: "blue" },
|
||||
],
|
||||
prototypen_original: [],
|
||||
|
||||
canvas: null,
|
||||
vueCanvas: null,
|
||||
|
|
@ -470,12 +391,39 @@ export default {
|
|||
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: {
|
||||
lade() {
|
||||
this.datensatz_2_textarea();
|
||||
this.prototypensatz_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() {
|
||||
/*
|
||||
if (this.szenario == "lebensmittel") {
|
||||
this.datenpunkte = this.ermittle_skalierten_datensatz(
|
||||
this.lebensmittel_datenpunkte
|
||||
|
|
@ -580,39 +555,55 @@ export default {
|
|||
this.update_anzahl_prototypen(4);
|
||||
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.update_max_x_y();
|
||||
this.refresh();
|
||||
},
|
||||
|
||||
ermittle_skalierten_datensatz(ds_eingabe) {
|
||||
let breite = 800;
|
||||
let hoehe = 450;
|
||||
let max_x = 0;
|
||||
let max_y = 0;
|
||||
let breite_original = 800;
|
||||
let hoehe_original = 450;
|
||||
|
||||
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 = [];
|
||||
|
||||
ds_eingabe.forEach((element) => {
|
||||
if (element.x > max_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 x_skaliert = Math.round((element.x / this.max_x_wert) * breite) + offset_rand_ursprung_x;
|
||||
//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 });
|
||||
});
|
||||
|
||||
// Array mischen
|
||||
ds_ausgabe = this.shuffleArray(ds_ausgabe);
|
||||
//ds_ausgabe = this.shuffleArray(ds_ausgabe);
|
||||
return ds_ausgabe;
|
||||
},
|
||||
|
||||
|
|
@ -678,8 +669,8 @@ export default {
|
|||
},
|
||||
*/
|
||||
generiere_datenpunkt_zufaellig() {
|
||||
let max_x = 800;
|
||||
let max_y = 450;
|
||||
let max_x = this.max_x_wert;
|
||||
let max_y = this.max_y_wert;
|
||||
let datenpunkt = {};
|
||||
|
||||
datenpunkt.x = Math.floor(Math.random() * max_x);
|
||||
|
|
@ -690,8 +681,8 @@ export default {
|
|||
return datenpunkt;
|
||||
},
|
||||
generiere_prototyp_zufaellig() {
|
||||
let max_x = 800;
|
||||
let max_y = 450;
|
||||
let max_x = this.max_x_wert;
|
||||
let max_y = this.max_y_wert;
|
||||
let prototyp = {};
|
||||
|
||||
prototyp.x = Math.floor(Math.random() * max_x);
|
||||
|
|
@ -711,6 +702,8 @@ export default {
|
|||
let breite = 800;
|
||||
let hoehe = 450;
|
||||
this.vueCanvas.drawImage(bild, bildX, bildY, breite, hoehe);
|
||||
|
||||
this.zeichneLegende();
|
||||
},
|
||||
|
||||
faerbe_prototypen() {
|
||||
|
|
@ -726,13 +719,13 @@ export default {
|
|||
},
|
||||
|
||||
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) {
|
||||
let next_prototyp = this.gib_naechstgelegener_prototyp(
|
||||
this.datenpunkte[i]
|
||||
this.datenpunkte_skaliert[i]
|
||||
);
|
||||
let farbe = next_prototyp.color;
|
||||
this.datenpunkte[i].color = farbe;
|
||||
this.datenpunkte_skaliert[i].color = farbe;
|
||||
console.log(farbe);
|
||||
}
|
||||
}
|
||||
|
|
@ -836,8 +829,8 @@ export default {
|
|||
|
||||
zeige_line_an() {
|
||||
this.zeichne_linie_datenpunkt_prototyp(
|
||||
this.datenpunkte[this.aktueller_datenpunkt],
|
||||
this.prototypen[this.aktueller_prototyp]
|
||||
this.datenpunkte_skaliert[this.aktueller_datenpunkt],
|
||||
this.prototypen_skaliert[this.aktueller_prototyp]
|
||||
);
|
||||
},
|
||||
|
||||
|
|
@ -846,7 +839,9 @@ export default {
|
|||
let i = 0;
|
||||
let hightlight_farbe = "lightgreen";
|
||||
|
||||
this.datenpunkte.forEach((element) => {
|
||||
this.datenpunkte_skaliert.forEach((element) => {
|
||||
console.log("x:" + element.x);
|
||||
|
||||
if (markierung && i == this.aktueller_datenpunkt) {
|
||||
this.zeichne_kreis(
|
||||
element.x,
|
||||
|
|
@ -883,7 +878,7 @@ export default {
|
|||
let hightlight_farbe;
|
||||
let radius;
|
||||
|
||||
this.prototypen.forEach((element) => {
|
||||
this.prototypen_skaliert.forEach((element) => {
|
||||
hightlight_farbe = "white";
|
||||
radius = 14;
|
||||
|
||||
|
|
@ -951,8 +946,8 @@ export default {
|
|||
let naechstgelegener_prototyp = null;
|
||||
let min_distanz = null;
|
||||
// pruefe alle prototypen und merke die naechste
|
||||
for (let i = 0; i < this.prototypen.length; i++) {
|
||||
let akt_prototyp = this.prototypen[i];
|
||||
for (let i = 0; i < this.prototypen_skaliert.length; i++) {
|
||||
let akt_prototyp = this.prototypen_skaliert[i];
|
||||
let akt_distanz = this.gib_distanz(datenpunkt, akt_prototyp);
|
||||
if (naechstgelegener_prototyp == null || akt_distanz < min_distanz) {
|
||||
naechstgelegener_prototyp = akt_prototyp;
|
||||
|
|
@ -977,8 +972,8 @@ export default {
|
|||
kurz_zeichne_linie_datenpunkt_prototyp() {
|
||||
// pruefe_aktuelle
|
||||
this.zeichne_linie_datenpunkt_prototyp(
|
||||
this.akt_datenpunkt,
|
||||
this.akt_prototyp,
|
||||
this.akt_datenpunkt_skaliert,
|
||||
this.akt_prototyp_skaliert,
|
||||
"lightgreen",
|
||||
4
|
||||
);
|
||||
|
|
@ -987,8 +982,8 @@ export default {
|
|||
existiert_kuerzere_Distanz() {
|
||||
// bisher naechstgelegener Prototyp
|
||||
let akt_distanz = this.gib_distanz(
|
||||
this.akt_datenpunkt,
|
||||
this.akt_prototyp
|
||||
this.akt_datenpunkt_skaliert,
|
||||
this.akt_prototyp_skaliert
|
||||
);
|
||||
|
||||
// naechsten aktualisieren
|
||||
|
|
@ -996,7 +991,7 @@ export default {
|
|||
this.naechstgelegener_prototyp == null ||
|
||||
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;
|
||||
return true;
|
||||
} else {
|
||||
|
|
@ -1012,7 +1007,7 @@ export default {
|
|||
|
||||
kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp() {
|
||||
this.zeichne_linie_datenpunkt_prototyp(
|
||||
this.akt_datenpunkt,
|
||||
this.akt_datenpunkt_skaliert,
|
||||
this.naechstgelegener_prototyp,
|
||||
"red",
|
||||
3
|
||||
|
|
@ -1124,7 +1119,7 @@ export default {
|
|||
// Your animation code here
|
||||
if (
|
||||
this.naechstgelegener_prototyp != null &&
|
||||
this.akt_datenpunkt != null
|
||||
this.akt_datenpunkt_skaliert != null
|
||||
) {
|
||||
this.kurz_zeichne_linie_datenpunkt_naechstgelegener_prototyp();
|
||||
this.zeichne_datenpunkte(true, true);
|
||||
|
|
@ -1157,16 +1152,16 @@ export default {
|
|||
let i = 0;
|
||||
|
||||
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 =
|
||||
(this.akt_datenpunkt.y + this.naechstgelegener_prototyp.y) / 2;
|
||||
(this.akt_datenpunkt_skaliert.y + this.naechstgelegener_prototyp.y) / 2;
|
||||
|
||||
let delta_x =
|
||||
(this.akt_datenpunkt.x - this.naechstgelegener_prototyp.x) /
|
||||
(this.akt_datenpunkt_skaliert.x - this.naechstgelegener_prototyp.x) /
|
||||
2 /
|
||||
schritte;
|
||||
let delta_y =
|
||||
(this.akt_datenpunkt.y - this.naechstgelegener_prototyp.y) /
|
||||
(this.akt_datenpunkt_skaliert.y - this.naechstgelegener_prototyp.y) /
|
||||
2 /
|
||||
schritte;
|
||||
|
||||
|
|
@ -1192,12 +1187,14 @@ export default {
|
|||
} else {
|
||||
this.naechstgelegener_prototyp.x = x_neu;
|
||||
this.naechstgelegener_prototyp.y = y_neu;
|
||||
|
||||
this.refresh();
|
||||
}
|
||||
} catch (error) {
|
||||
//console.error("Caught custom exception:", error.message);
|
||||
this.letzte_prototyp.x = x_neu;
|
||||
this.letzte_prototyp.y = y_neu;
|
||||
|
||||
this.refresh();
|
||||
}
|
||||
};
|
||||
|
|
@ -1213,7 +1210,7 @@ export default {
|
|||
|
||||
for (let i = 0; i < this.datenpunkte.length; i++) {
|
||||
let next_prototyp = this.gib_naechstgelegener_prototyp(
|
||||
this.datenpunkte[i]
|
||||
this.datenpunkte_skaliert[i]
|
||||
);
|
||||
this.datenpunkte[i].color = "#000000";
|
||||
}
|
||||
|
|
@ -1225,6 +1222,161 @@ export default {
|
|||
this.zeichne_datenpunkte(false, true);
|
||||
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() {
|
||||
|
|
@ -1240,6 +1392,7 @@ export default {
|
|||
|
||||
document.onreadystatechange = () => {
|
||||
if (document.readyState == "complete") {
|
||||
this.szenario_aendern();
|
||||
this.refresh();
|
||||
this.zeichne_hintergrund();
|
||||
this.zeichne_prototypen(false);
|
||||
|
|
|
|||
Loading…
Reference in a new issue