Outil Lasso en javascript

Question

Hay, je suis en train d'écrire un simple concepteur d'images basé sur le web, et j'aimerais savoir si quelqu'un a une idée de la façon de mettre en œuvre un outil de lasso. J'aimerais pouvoir sauvegarder tous les points pour pouvoir les envoyer facilement à une base de données et les récupérer plus tard.

Toutes les suggestions seraient super.

Answer 1

En ce chercherais probablement plug-in de base, quelque chose comme ceci:

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

plus tard, appliquer lasso() à tout élément et gérer les événements en conséquence:

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

lassoPoint sera un réseau de X, Y co-ordinat es. lassoPoints sera un tableau de lassoPoint.

Vous devriez probablement inclure une vérification supplémentaire pour un drapeau «lasso activé» dans le gestionnaire mousedown, afin que vous puissiez l'activer ou le désactiver indépendamment.

Answer 2

Heres un plugin qui semble faire juste que http://odyniec.net/projects/imgareaselect/examples.html

Je ne l'ai pas utilisé.

Je ne l'ai jamais fait, mais si vous cherchez à faire votre propre, id imaginer qu'ils fonctionnent comme

onmousedown coords souris registre initial (ce qui est le coords du coin de la boîte) Lasso

onmousemove soustrait les nouvelles coordonnées des coordonnées initiales pour obtenir la largeur et la hauteur de div utilisées pour le lasso visuel.

onmouseup, arrêtez l'écoute mousemove, faire quelque chose avec coords et la dimension d'une boîte Lasso existante