Lasso-Werkzeug in javascript

Question

Hallo, ich schreibe ein einfaches webbasiertes Bildbearbeitungsprogramm und würde gerne wissen, ob jemand eine Idee hat, wie man ein Lasso-Tool implementieren kann. Ich möchte in der Lage sein, alle Punkte zu speichern, so dass ich sie leicht an eine Datenbank senden und sie zu einem späteren Zeitpunkt abrufen kann.

Answer 1

Als einfaches Plug-in würde dies wahrscheinlich etwa so aussehen:

$.fn.extend({
  lasso: function () {
    return this
      .mousedown(function (e) {
        // left mouse down switches on "capturing mode"
        if (e.which === 1 && !$(this).is(".lassoRunning")) {
          $(this).addClass("lassoRunning");
          $(this).data("lassoPoints", []);
        }
      })
      .mouseup(function (e) {
        // left mouse up ends "capturing mode" + triggers "Done" event
        if (e.which === 1 && $(this).is(".lassoRunning")) {
          $(this).removeClass("lassoRunning");
          $(this).trigger("lassoDone", [$(this).data("lassoPoints")]);
        }
      })
      .mousemove(function (e) {
        // mouse move captures co-ordinates + triggers "Point" event
        if ($(this).hasClass(".lassoRunning")) {
          var point = [e.offsetX, e.offsetY];
          $(this).data("lassoPoints").push(point);
          $(this).trigger("lassoPoint", [point]);
        }
      });
  }
});

später anwenden lasso() auf jedes Element anwenden und die Ereignisse entsprechend behandeln:

$("#myImg")
.lasso()
.on("lassoDone", function(e, lassoPoints) {
  // do something with lassoPoints
})
.bind("lassoPoint", function(e, lassoPoint) {
  // do something with lassoPoint
});

lassoPoint ist ein Array von X,Y-Koordinaten. lassoPoints wird ein Array aus lassoPoint .

Sie sollten wahrscheinlich eine zusätzliche Prüfung auf ein "Lasso aktiviert"-Flag irgendeiner Art in die mousedown Handler, so dass Sie ihn unabhängig ein- oder ausschalten können.

Answer 2

Hier ist ein Plugin, das genau das zu tun scheint http://odyniec.net/projects/imgareaselect/examples.html

Ich habe es nicht benutzt.

Ich habe noch nie eine gemacht, aber wenn Sie sie selbst machen wollen, kann ich mir vorstellen, dass sie wie folgt funktionieren

onmousedown record initiale Mauskoordinaten (dies sind die Koordinaten der Ecke der Lassobox)

onmousemove subtrahieren die neuen Koordinaten von den Anfangskoordinaten, um die Breite und Höhe des Divs zu erhalten, das für die visuelle Lassobox verwendet wird.

onmouseup, aufhören, auf mousemove zu hören, etwas mit den Koordinaten und der Dimension jeder vorhandenen Lassobox machen