Добавить и удалить текстовое поле, используя JavaScript - PullRequest
Новая
       1

Добавить и удалить текстовое поле, используя JavaScript

1 голос
/ 11 января 2012

При событии onclick я добавляю маркер (image pin.png): 

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.

Ответы [ 2 ]

3 голосов
/ 11 января 2012

Способность Рафаэля обрабатывать текст абсолютно ужасна. Недавно мне пришлось сделать что-то симулированное для проекта, и в итоге я использовал холст 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");

, который может работать лучше для вас, но если вы делаете что-то с увеличением и уменьшением или даже перетаскиванием объектов, вам будет трудно.

Что касается битов добавления маркеров, вам, вероятно, понадобится функция, которая говорит что-то вроде 

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, вы сможете добиться этого. 

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)

и я предполагаю, что вы захотите, чтобы пользователь мог сохранять то, что они пишут ... вот где вы добавите бутотн и сделаете что-то вроде 

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

лучше

1 голос
/ 11 января 2012

Я закончил, используя простой 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();
});

Операции над текстом в Рафаэле очень сложны.

...