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.

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.

• javascript
• jquery
• user-interface
• draw

2 Answers 2

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.

Heres a plugin that seems to do just that http://odyniec/projects/imgareaselect/examples.html

I haven't used it.

I've never made one, but if you're looking to make your own, id imagine they work like

onmousedown record initial mouse coords(this is the coords of the corner of lasso box)

onmousemove subtract new coords from initial coords to get width and height of div being used for the visual lasso box.

onmouseup, stop listening to mousemove, do something with coords and dimension of any lasso box existing