使用javascript添加和删除文本框

在onclick事件中，我正在添加标记（image pin.png）：

本规范中的R是拉斐尔纸：

var R=Raphael（“纸”，500500）

我还必须在这个pin旁边添加文本框。它将类似于这个标记的描述。旁边还应该有删除图标，可以删除标记和文本框。用户可以添加无限数量的标记

如何添加此文本框和图标/按钮以删除标记及其文本框

我正在使用JQuery和Raphael
 拉斐尔处理文本的能力绝对可怕。我最近不得不为一个项目做一些simular，最后我使用HTML5画布生成一个图像，然后将该图像加载到我的项目中

假设您在Raphael中创建了rect，那么您需要生成一个包含您的描述的图像：

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 description = paper.text(0,0,"this is text");

这对你来说可能更好，但是如果你正在做任何放大和缩小的事情，或者甚至可能是拖动对象，你将很难做到


至于添加标记位，您可能需要一个表示如下内容的函数

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"}),
  );
}

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

你还需要一个点击功能，比如

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

我希望这对你有所帮助。如果您需要更多帮助，请随时发表评论


编辑：

要删除raphael元素，可以使用

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)

更好？
拉斐尔处理文本的能力绝对可怕。我最近不得不为一个项目做一些simular，最后我使用HTML5画布生成一个图像，然后将该图像加载到我的项目中

假设您在Raphael中创建了rect，那么您需要生成一个包含您的描述的图像：

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 description = paper.text(0,0,"this is text");

这对你来说可能更好，但是如果你正在做任何放大和缩小的事情，或者甚至可能是拖动对象，你将很难做到


至于添加标记位，您可能需要一个表示如下内容的函数

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"}),
  );
}

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

你还需要一个点击功能，比如

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

我希望这对你有所帮助。如果您需要更多帮助，请随时发表评论


编辑：

要删除raphael元素，可以使用

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)

更好？
我最后使用了简单的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();
});

var relativeX=event.pageX；
var relativeY=event.pageY；
$（'.marker'）。追加（''）；
计数器++；
$（“.delete_按钮”）。单击（函数（）{
$（this.parent（）.remove（）；
});

在Raphael中对文本的操作非常复杂。
我最后使用了简单的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();
});

var relativeX=event.pageX；
var relativeY=event.pageY；
$（'.marker'）。追加（''）；
计数器++；
$（“.delete_按钮”）。单击（函数（）{
$（this.parent（）.remove（）；
});

《拉斐尔》中文本的操作要复杂得多