Lasso tool in javascript

Question

ヘイ、私は単純なウェブベースのイメージメーカーを作成していて、だれかがスクロールツールを実装する方法を知っているかどうかを知りたいと思います。私はすべてのポイントを保存して、データベースに簡単に送信し、後でそれらを取得できるようにしたいと思います。

どのような提案も素晴らしいでしょう。私はそれを使用していないだけで http://odyniec.net/projects/imgareaselect/examples.html

ことをやっているようだ

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ハンドラに「lasso enabled」フラグを追加して、別々にオンまたはオフに切り替えることができます。

Answer 2

相続人のプラグイン。

は、私は1つを作ったことがありませんが、あなたがあなた自身の作るために探している場合、IDは、彼らは、レコードの初期マウスCOORDSれるonmousedown

（これは投げ縄のボックスの隅のCOORDSである）のような働きを想像します

onmousemoveビジュアル・ラッソ・ボックスに使用されているdivの幅と高さを取得するために、新しい座標を最初の座標から減算します。

れるonmouseup、MOUSEMOVEを聞い停止は、COORDSと基本的なプラグインとして