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”标志，以便您可以单独打开或关闭它。

Answer 2

这是一个似乎就是这样的插件 http://odyniec.net/projects/imgareaselect/examples.html

我没用过它。

我从来没有制作过，但是如果你想制作自己的产品，那就想象它们会像

那样工作

onmousedown记录初始鼠标坐标（这是套索角落的坐标）

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

onmouseup，停止听mousemove，用coords和任何套索盒的尺寸做一些事情

JavaScript中的套索工具

2 个答案: