Lasso-Werkzeug in javascript

Als basic-plug-in, das würde wahrscheinlich 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, gilt lasso() zu jedem element und verarbeiten die Ereignisse dementsprechend:

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

lassoPoint wird ein array mit X,Y Koordinaten. lassoPoints wird ein array von lassoPoint.

Sollten Sie wahrscheinlich eine zusätzliche überprüfung für ein "lasso aktiviert" eine Art Kennzeichen in der mousedown - handler, so dass Sie können schalten Sie es ein-oder ausgeschaltet werden können.