JavaScript中的套索工具

Question

Hay,我正在写一个简单的基于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坐标的数组.lassoPoints将是一个数组lassoPoint.

您可能应该在mousedown处理程序中包含对某种"lasso enabled"标志的额外检查,以便您可以单独打开或关闭它.