在JavaScript中的套索工具

Question

干草，我正在写一个简单的基于Web的图像制作，并想知道是否有人有任何想法如何实现套索工具。我希望能够保存所有要点，以便我可以轻松地将它们发送到数据库并在以后检索它们。

任何建议将是伟大的。

Answer 1

作为一个基本的插件，这可能会是这个样子的任何套索箱：

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

后，适用lasso()的任何元素，并相应地处理事件：

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

lassoPoint将X的阵列，Y共同ordinat ES。 lassoPoints将是一组lassoPoint。

您应该在mousedown处理程序中额外检查某种“套索已启用”标志，以便您可以独立打开或关闭它。

Answer 2

继承人似乎做到这一点 http://odyniec.net/projects/imgareaselect/examples.html

我没有用它的插件。

我从来没有做一个，但如果你正在寻找让自己，ID想像他们一样

onmousedown事件记录初始鼠标COORDS（这是套索盒子的角落的coords）使用

工作

onmousemove从初始坐标中减去新的坐标，以得到用于可视套索格的div的宽度和高度。

onmouseup，停止收听鼠标移动，做COORDS东西，尺寸现有