Lasso tool in javascript

Question

Hey, I'm writing a simple tool for creating web images, and I would like to know if anyone has ideas on how to implement a tool for lasso. I would like to be able to save all the points so that I can easily send them to the database and get them later.

Answer 1

As the main plugin, this will 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]); } }); } }); 

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 coordinates. lassoPoints will be an array of lassoPoint .

You should probably include an additional check for the lasso enabled flag in the mousedown handler so you can enable or disable it yourself.

Answer 2

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

I have not used it.

I never did this, but if you want to make your own, I think they work like

onmousedown records the initial mouse coordinates (these are the coordinates of the lasso window corner)

onmousemove subtract new chords from the original chords to get the width and height of the div that are used for the visual lasso window.

onmouseup, stop listening to mousemove, do something with the coordinates and size of any existing lasso box