Question

Hay, I’m writing a simple web based image maker, and would like to know if anyone has any idea’s how to implement a lasso tool. I’d like to be able to save all the points so that I can easily send them to a database and retrieve them at a later date.

Answer 1

As a basic plug-in, this would probably look something like this:

$.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]);
        }
      });
  }
});

later, apply lasso() to any element and handle the events accordingly:

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

lassoPoint will be an array of X,Y co-ordinates. lassoPoints will be an array of lassoPoint.

You should probably include an extra check for a “lasso enabled” flag of some sort into the mousedown handler, so that you can switch it on or off independently.