Mit addEventListener hinzufügen einer callback-Argumente

Ich bin momentan dabei, ein drag-und-drop-system mit einer Leinwand.

      canvas.addEventListener('mousedown', function () {
          window.initialClickX = mouse.x;
          window.initialClickY = mouse.y;
          window.initialBallX = ball.x;
          window.initialBallY = ball.y;
          canvas.addEventListener('mousemove', onMouseMove, false);
      }, false);

     function onMouseMove(){
        ball.x = mouse.x + window.initialBallX - window.initialClickX;
        ball.y = mouse.y + window.initialBallY - window.initialClickY;
        draw();
     }

Wenn ich darauf klicke, muss ich die Werte für die initial-position der Maus und der erste ball position, so kann ich richtig ziehen Sie den ball um.

Der obige code funktioniert perfekt, aber ich denke, es sieht chaotisch mit all den globalen Variablen. Ich möchte onMouseMove übernehmen zu können die Parameter initialClickX, initialClickY, initialBallX und initialBallY. Aber wie kann ich diese Parameter an die callback-Funktion?

Oder ob es einen besseren Weg, dies zu tun, lassen Sie mich bitte wissen, danke.

Ich habe nicht wirklich an ihn denken, konnte aber nicht erstellen Sie ein Objekt oder eine Instanz und Eigenschaften zu speichern?

InformationsquelleAutor Lars | 2013-06-21

  1. 4

    Versuchen Sie es mit einem wrapper-Funktion, es zu tun.

    canvas.addEventListener('mousedown', function () {
      var initialClickX = mouse.x;
      var initialClickY = mouse.y;
      var initialBallX = ball.x;
      var initialBallY = ball.y;

      canvas.addEventListener('mousemove', function() {
          onMouseMove(initialClickX, initialClickY, mouse.x, mouse.y, initialBallX, initialBallY)
      }, false);

}, false);

function onMouseMove(initialClickX, initialClickY, mouseX, mouseY, initialBallX, initialBallY){
    ball.x = mouseX + initialBallX - initialClickX;
    ball.y = mouseY + initialBallY - initialClickY;
    draw();
}
    Meine erste Lösung hat nicht Griff initialBallX und initialBallY richtig. Diese tut. Keine globalen Variablen. Einfach nur pure awesome.
    was ist, wenn wir in eine Klasse, befestigen Sie die Veranstaltung mit einer callback-Funktion und einige Parameter, bedeutet das, dass Funktion deklariert werden, außerhalb der Klasse? das ist ärgerlich.

    InformationsquelleAutor Mathias Lykkegaard Lorenzen

  2. 2

    Verwenden Sie eine Verpackung stub-Funktion setzt die Parameter:

    canvas.addEventListener('mousemove', function() {onMouseMove(window.initialBallX, window.initialBallY, window.initialClickX, window.initialClickY); });

    InformationsquelleAutor Marvin Emil Brach

  3. 2

    Hier ist ein kleines Beispiel, wie man das tun könnte, ohne die Verwendung von globalen Variablen:

    function called() {
  console.log(arguments);
}

function caller(funx) {
  funx();
}

caller(called.bind(this, 'a', 'b'));

    Im Grunde sind Sie auf called eine Reihe von vordefinierten Parametern, in diesem Fall 'a' und 'b'.

    So, in Ihrem Fall ist es etwas wie:

    canvas.addEventListener('mousedown', function () {
  canvas.addEventListener('mousemove', 
    onMouseMovebind(this, mouse.x, mouse.y, ball.x, ball.y), false);
}, false);

    InformationsquelleAutor Alberto Zaccagni

Schreibe einen Kommentar