は、私は（画像pin.png）のマーカーを追加していますとのonclickイベントではJavaScript

Question

を使用してテキストボックスを削除します。このコードで

var relativeX = event.pageX; 
var relativeY = event.pageY; 
R.image("pin.png", relativeX, relativeY, 22, 22); 

Rはラファエル紙です：var R = Raphael("paper", 500, 500);

そして私はまた、テキストボックスを追加する必要がありますこのピンの隣にあります。それはこのマーカーの説明のようなものになります。マーカーとテキストボックスの両方を削除する削除アイコンがその横にあるはずです。ユーザーはマーカーを無制限に追加できます。

マーカーとテキストボックスの両方を削除するには、このテキストボックスとアイコン/ボタンを追加するにはどうすればよいですか？

私はJQueryとRaphaelを使用しています。

Answer 1

テキストを処理するRaphaelの能力は絶対に恐ろしいものです。私は最近、プロジェクトのために何かsimularをしなければなりませんでした。そして、私はHTML5キャンバスを使ってイメージを生成し、そのイメージを私のプロジェクトにロードしました。

var width = myRect.getBBox().width 
var height = myRect.getBBox().height 
var canvas = jQuery("<canvas width="+width+"px height="+height+"px />"); 
var context = canvas[0].getContext("2d"); 

context.font = "10pt Calibri "; 
context.textAlign = "left"; 
context.textBaseline = "top"; 

context.fillText("this is text", xPos, yPos); 

をして、あなたはラファエルに移動したいと思う：

だからあなたがラファエルのあなたの矩形を作成すると、あなたはそれにあなたの説明と画像を生成することをお勧めします

var img = canvas[0].toDataURL("image/png"); //turns the canvas object into a png and returns the dynamic url 
var bb = myRect.getBBox(); 
paper.image(img,bb.x,bb.y,300,400) 

これは世界で最も簡単な解決策ではありませんが、他の選択肢はそれほど面白くないと思います。

その他のオプションは、あなたのために良い仕事かもしれ

var description = paper.text(0,0,"this is text"); 

が含まれていますが、内とズームアウト、あるいはおそらくオブジェクトをドラッグして任意のものをやっている場合は、ハードの時間を持つことになります。あなたの追加マーカービット用として

---

、あなたは、

$("paper").click(function(e){ 
    addMarker(e.offsetX,e.offsetY) 
}); 

のようなものを

function addMarker(x,y){ 
    var marker = paper.set(); 
    marker.push(
    paper.rect(x,y,5,20).attr({fill:"#000"}), 
    paper.rect(x,y,10,5).attr({fill:"#000"}), 
); 
} 

のようなものを言うと、あなたが同様にクリック機能をお勧めします機能をおそらく勧めします

私はこれがいくつか役に立ったと思います。それ以上の助けが必要な場合は、お気軽にコメントしてください。

---

編集：

：

ラファエル要素を削除するには、

myElement.remove(); 

あるいは

myElement.hide(); 

---

編集を使用することができます

あなたは入力フィールドを探していたかもしれないと思っています...これはRaphaelが処理できないものです。だからあなたはいくつかの回避策を講じなければなりません。

入力フィールドを作成し、これを絶対的にグラフィカルプログラムの上に配置すると、これを実現できます。

var textbox = $("<textarea/>"); 
textbox.css({"z-index" : 2, "position" : "absolute"}); 
textbox.css("left",myRaphaelElement.getBBox().x) 
textbox.css("top",myRaphaelElement.getBBox().y) 
$("body").append(textbox) 

と私はあなたがbutotnを追加し、

button.onclick(function(){ 
    // write code here that involves the bit i wrote earlier in my post 
    // that takes textbox.val() as your text. 
}); 

より良いようなことをやるところである..あなたは、ユーザーは、彼らが書いたもの救うことができるようにしたいとしている想像？

Answer 2

私は、簡単なJavaScriptを使用して終了：ラファエル内のテキストの

var relativeX = event.pageX; 
var relativeY = event.pageY; 
$('.marker').append('<div class="pin_container" style="top:' + relativeY + 'px; left:' + relativeX + 'px;"> <input type="text" name="textbox" id="textbox' + counter + '" value="" class="pin_textbox"><input type="button" id="remove" class="delete_button" value=" "></div>'); 
counter++; 
$(".delete_button").click(function() { 
$(this).parent().remove(); 
}); 

操作方法に非常に複雑です。