@OP
Ich sage jetzt nicht das ich das was du da genau realisieren willst zu 100% kapiert habe (mit Heizung usw o_o) aber ich kann dir bei deinem Problem helfen.
folgendes:
1) Definiere deine Knöpfe / Drehschalter als Objekte und speichere dir dort Dinge wie Koordinaten, Dreh-Stellung usw als Variable rein.
2) Baue dir Events in dein Javascript damit du Die Mouse-Events abfangen kannst.
Beispielweise "Klickt jemand den linken Mausknopf?Falls ja - welche Koordinaten?" etc.
Dabei solltest du drauf achten das du die Canvas-Koords aus den Koordinaten des klicks rausrechnen musst da du sonst ca. 200px weiter Rechts den Klick registrierst obwohl er wo anders war.
Beispielcode womit das geht:
Code:
var x = e.pageX;
var y = e.pageY;
var canvas = document.getElementById("ID_DEINES_CANVAS");
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
Dann brauchst du sogesehen nur noch die Entfernung zwischen dem Klick X,Y und dem Objekt X,Y checken um zu wissen "hat er auf xyz geklickt?". Zumindestens sofern du vom 0-Punkt des jeweiligen Objektes ausgehen willst.
3) Nun baue dir die Logik der Buttons, Drehschalter halt in Javascript nach.
Beispielweise bastel dir eine Funktion die die Dreh-Einstellung des Drehschalters von 20 auf 100 stellt. Oder ne Funktion womit du +10 oder -10 machen kannst etc.
Die Funktion trägt den Wert jeweils dann immer in das richtige Objekt rein.
4) Bastel dir ein "Gameloop" - quasi ein Loop der wie ne while(true){} läuft, und baue dort dein Rendering der Knöpfe usw rein. Das Renderung der Knöpfe (ausrichtung, x y position etc) machst du dann von deinen Objekten abhängig. Veränderst du nun mit deinen in 3) beschriebenen Funktionen die Objekte, verändert sich automatisch das was gerendert wird und deine Knöpfe "drehen sich"
Solltest du noch fragen haben.. ruhig fragen.
p.s: Kreis zeichnen geht auch einfacher innerhalb der Main-Function wenn du dir dafür ne eigene Kreis Funktion baust die du nur aufrufen musst. Beispiel dafür ->
Code:
function Kreis(x, y, r)
{
var canvas = document.getElementById('DEINE_CANVAS_ID');
var ctx = canvas.getContext("2d");
ctx.fillStyle= "rgb(0,255,0)"; //Die gewünschte Farbe
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI);
ctx.fill();
ctx.closePath();
}
Habe dir hier mal ein kleines Beispiel wie ich das mit den Klicks usw meine -> Not Online Anymore <- Klickst du dort mit deiner Maus wo hin, wird ein Objekt hinzugefügt & das Rendering der Objekte wird verändert (es ist ein zusätzliches "neuron" vorhanden").
Hintergrund zum Beispiel -> Wollte damit ein Neuronales Netzwerk nachstellen mit Animationen der Aktivität des Netzwerkes usw.. passte aber so schön zum Thread hier..^^
grüße
