Лассо инструмент в JavaScript - PullRequest
Новая
       6

Лассо инструмент в JavaScript

4 голосов
/ 10 января 2011

Слушай, я пишу простое средство для создания веб-изображений и хотел бы знать, есть ли у кого-нибудь идеи, как реализовать инструмент «Лассо».Я хотел бы иметь возможность сохранить все точки, чтобы я мог легко отправить их в базу данных и получить их позже.

Любые предложения будут хороши.

Ответы [ 2 ]

6 голосов
/ 10 января 2011

Как базовый плагин, он может выглядеть примерно так: 

$.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.

Вы, вероятно, должны включить дополнительную проверку для какого-либо флага "lasso enabled" в обработчик mousedown, чтобы вы могли включать или выключать его независимо.

2 голосов
/ 10 января 2011

Вот плагин, который, кажется, делает именно это http://odyniec.net/projects/imgareaselect/examples.html

Я этим не пользовался.

Я никогда не делал один, но если вы хотите сделать свой собственный, представьте, что они работают как

записать в начало записи координаты мыши (это координаты угла поля лассо)

onmousemove вычитает новые координаты из начальных координат, чтобы получить ширину и высоту div, используемого для визуального блока лассо.

onmouseup, прекратить прослушивание движений мыши, сделать что-нибудь с координатами и размером любого существующего блока лассо

...