訪問者にブートストラップを使用して図表にマークを付ける方法を教えてください。

Question

私は、応答可能なWebページを表示するためにBootstrapフレームワークを使用する新しいXPagesアプリケーション（Dominoサーバー上）に取り組んでいます。私がやっている仕事のほとんどはかなり基本的なもので、以前はそのテクニックを使っていました。

しかし、アプリケーションでは、訪問者が固定画像にマークを付けることができる機能が必要です。例えば、自動車事故の請求書に、原告は損害が発生した図に示すように求めている...

私は、静的なイメージを提示したい、と訪問者ができるようにするだろうその画像の上にインジケータを置く。私はその後、何らかの形で結果の画像を保存したいと思います。統合された画像を保存できない場合は、バックエンドの同じマークアップされた図をシミュレートできるように、ビジターのインジケータの座標を保存する機能が必要です。

私はこれを達成するために使用できるプラグインまたは文書化されたテクニックがありますか、あるいは私自身は「ロールを張ろう」としますか？私はこのようなことを成し遂げる何かを見つけることができませんでした。

このアドバイスを事前にお寄せいただきありがとうございます。ここで

Answer 1

は、私はそれがmoueクリック（複数可）の座標を検出していいくつかのjQueryコードです：

var locations = []; 
$(document).ready(function() { 

    $("#yourImageId").click(function(e){ 
     var parentOffset = $(this).offset(); 
     var relX = e.pageX - parentOffset.left; 
     var relY = e.pageY - parentOffset.top; 
     var obj = {x: relX, y:relY}; 
     locations.push(obj); 
    }); 

} 

あなたは今、すべてのクリックの座標を持つグローバル配列を持つことになります。データベースに保存してから、後でマーカをイメージに置くことができます。

Answer 2

イメージをキャンバスで開き、ユーザーがキャンバスに描画できるようにします。その後、新しいイメージをDominoに保存し直します。 http://www.xpagedeveloper.com/category/canvas-element