Question

在浮标活动中,我增加了标记(age平):

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

R in this Code is Raphael paper:var R = Raphael(“paper”, 500, 500);

我还必须在此之后添加文字箱。这种标记将像描述。还应当删除后面的icon,删除标记和文字箱。用户可以增加无限制的标识。

我如何添加这一文本箱和icon/button,以删除标识和文字箱?

我正在使用JQuery和Raphael。

Answer 1

拉法尔处理案文的能力是绝对可怕的。我最近不得不为一个项目做一些模拟,我最后使用超文本5管线制作图像,然后将图像装入我的项目。

因此,你在Raphael制造了你的声音,然后,你想用你在其中的描述来塑造一个形象:

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)

它不是世界上最容易的解决办法,但我认为你发现其他选择并不难处理。

Other options include

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

which may work better for you, but if you re doing any thing with zooming in and out, 甚至 possibly dragging objects, you will have a hard time.

至于你增加标记,你很可能需要一种像你这样的功能。

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

and you ll want a click function as well, something like

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

我希望这有助于一些人。如果你们需要更多的帮助,会自由发表意见。

编辑:

为消除甲型六氯环己烷元素,你可以使用

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)

并且想象你们会再次希望用户能够挽救他们撰写的内容。这里是你 add子的 add子,做像你这样的事情。

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();
});

在Raphael的文稿业务变得复杂得多。

友情链接