Question

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

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

此代码中的R是Raphael论文：var R = Raphael("paper", 500, 500);

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

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

我正在使用JQuery和Raphael。

Answer 1

拉斐尔处理文字的能力绝对可怕。我最近不得不为项目做一些类似的事情，我最终使用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);

然后你会想把它变成raphael：

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

这对你来说可能效果更好，但是如果你正在做任何放大和缩小的事情，甚至可能拖动物体，你将会遇到困难。

对于你的添加标记位，你可能想要一个类似

的函数

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

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

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

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

编辑：

要删除raphael元素，您可以使用

myElement.remove();

甚至

myElement.hide();

编辑：

我以为你可能一直在寻找输入字段......这是Raphael无法处理的事情。所以你将不得不做一些工作。

如果您创建一个输入字段，然后将其绝对放在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();
});

拉斐尔文本的操作变得非常复杂。

使用javascript添加和删除文本框

2 个答案: