Ich versuche, eine schöne Drag & Drop auf einer Leinwand, die 3 Festplatten darstellt.Nice Drag and drop auf einer Leinwand HTML5
Ich möchte mit der Maus die Position jeder Masse ändern. Mein Hauptproblem ist, dass ich durch die Länge der Axt für jede dieser 3 Kugeln eingeschränkt bin.
Im Moment habe ich die folgende Funktion implementiert, wenn die Maus innerhalb der Leinwand bewegt (Wert von indexMass zeigt an, welche Masse bewegt wird: 1, 2 or 3 und t1, t2, t3 für jeweils the angle of mass 1, 2, 3):
// Happens when the mouse is moving inside the canvas
function myMove(event) {
if (isDrag) {
var x = event.offsetX;
var y = event.offsetY;
if (indexMass == 1)
{ // Update theta1 value
t1 = t1 + 0.1*Math.atan(y/x);
}
else if (indexMass == 2)
{ // Update theta2 value
t2 = t2 + 0.1*Math.atan(y/x);
}
else if (indexMass == 3)
{ // Update theta3 value
t3 = t3 + 0.1*Math.atan(y/x);
}
// Update drawing
DrawPend(canvas);
}
}
Wie Sie sehen können ich für jeden Winkel tat:
t = t + 0.1*Math.atan(y/x);
mit:
var x = event.offsetX;
var y = event.offsetY;
Aber dieser Effekt ist nicht sehr nett. Sobald die Kugel mit der Maus ausgewählt wurde (per Mausklick), möchte ich, dass der Cursor mit dieser Kugel oder der Kugel verbunden wird, um den "delta" der Mauskoordinaten zu folgen, wenn ich nicht mehr auf der Kugel bin.
Zusammengefasst, ich weiß nicht, wie man eine feine und benutzerfreundliche Drag & Drop erstellen, wenn jemand mir helfen oder mir einige Ratschläge geben könnte, wäre das großartig.
Dank
UPDATE 1
@ Blindman67: Danke für Ihre Hilfe, ist Ihr Code-Snippet ziemlich komplex für mich, ich das alles nicht verstehen. Aber ich bin auf dem richtigen Weg.
Ich beginne mit dem ersten Problem: Machen Sie die ausgewählte Festplatte mit der Maus drehen sehr geschlossen zu bleiben oder darüber, beim Ziehen.
Im Moment habe ich meine Funktion geändert myMove (die, wenn ich nach unten geklickt haben genannt wird und die Maus zum Ziehen bewegen) wie:
// Happens when the mouse is moving inside the canvas
function myMove(event) {
// If dragging
if (isDrag) {
// Compute dx and dy before calling DrawPend
var lastX = parseInt(event.offsetX - mx);
var lastY = parseInt(event.offsetY - my);
var dx = lastX - window['x'+indexMass];
var dy = lastY - window['y'+indexMass];
// Change angle when dragging
window['t'+indexMass] = Math.atan2(dy, dx);
// Update drawing
DrawPend(canvas);
// Highlight dragging disk
fillDisk(indexMass, 'pink');
}
}
wo indexMass ist der Index der geschleppt Platte und window['x'+indexMass], window['y'+indexMass] sind die aktuellen Koordinaten des ausgewählten Datenträgerzentrums.
Nach berechne ich die dx, dy jeweils von Koordinaten Maus geklickt, wenn drag Starten (mx, my durch getMousePos function zurückgegeben) und Maus-Koordinaten mit bewegt.
Schließlich ändere ich den Winkel der Platte durch Satz, für globalen Variable (Theta von ausgewählter Platte), das heißt window['t'+indexMass]:
// Change angle when dragging
window['t'+indexMass] = Math.atan2(dy, dx);
Ich habe Ihren Teil des Codes nahm mit Math.atan2.
Aber das Ergebnis dieser Funktion macht keine gute Animation mit Maus ziehen, ich würde gerne wissen, wo das herkommen könnte.
Im Moment möchte ich nur das Ziehen implementieren, ohne die Länge der Achse zu ändern, ich werde später mehr für diese Funktionalität sehen.
UPDATE 2
Ich komme immer auf eine Lösung über das Ziehen einer ausgewählten Masse mit der Maus zu finden.
Für den Versuch einer Synthese von dem, was ich zuvor getan habe, glaube ich, die folgende Methode ist gut, aber diese Methode zum Ziehen funktioniert nicht sehr gut: die ausgewählte Festplatte folgt nicht korrekt die Maus und ich weiß es nicht Warum.
In myMove function (Funktion wird aufgerufen, wenn I Ziehen Start), entschied ich:
- Berechne die dx, dy zwischen den Mauskoordinaten und den ausgewählten Plattenkoordinaten, das heißt:
var dx = parseInt (event.offsetX - Fenster ['x' + indexMass]);
var dy = parseInt (event.offsetY - fenster ['y' + indexMass]);
indexMass repräsentiert den Index der ausgewählten Festplatte.
Inkrementieren der Position der ausgewählten Platte durch
dx, dy(in temporären VariablentmpX, tmpYgespeichert).Berechne der neue Winkel
theta(identifiziert in Code durch globale Variablewindow['t'+indexMass]Berechne die neuen Positionen der ausgewählten Platte mit diesem neuen Wert von
theta, also beispielsweise mitdisk1(indexMass=1und Theta =t1):x1= x0 +l1 * sin(t1) y1= y0 +l1 * sin(t1)
ich muss Sie feststellen, dass ich mit der Maus wollen ziehen nicht die Längen zu ändern Achsen mit der Maus, das ist eine Einschränkung.
Hier ist das gesamte myMove function (aufgerufen, wenn Drag beginnt):
// Happens when the mouse is moving inside the canvas
function myMove(event) {
// If dragging
if (isDrag) {
console.log('offsetX', event.offsetX);
console.log('offsetY', event.offsetY);
var dx = parseInt(event.offsetX - window['x'+indexMass]);
var dy = parseInt(event.offsetY - window['y'+indexMass]);
console.log('dx', dx);
console.log('dy', dy);
// Temp variables
var tmpX = window['x'+indexMass];
var tmpY = window['y'+indexMass];
// Increment temp positions
tmpX += dx;
tmpY += dy;
// Compute new angle for indexMass
window['t'+indexMass] = Math.atan2(tmpX, tmpY);
console.log('printf', window['t'+indexMass]);
// Compute new positions of disks
dragComputePositions();
// Update drawing
DrawPend(canvas);
// Highlight dragging disk
fillDisk(indexMass, 'pink');
}
}
UPDATE 4 - Bounty:
Problem gelöst! Ich habe vergessen, die Position von "indexMass-1" Disk zu berücksichtigen, um den neuen Winkel mit Math.atan2 Funktion zu berechnen.