javascript - JavaScript中的套索工具

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

最佳答案

作为基本的插件，它可能看起来像这样:

$.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坐标的数组。 lassoPoints将是lassoPoint的数组。

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