添加和使用JavaScript

在onclick事件我加入標記（圖像pin.png）刪除文本框：添加和使用JavaScript

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。

來源

2012-01-11 Marta

拉斐爾處理文本的能力是非常糟糕的。我最近不得不爲項目做一些類似的事情，最後我使用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) 
});

我希望這有助於一些。如果您需要任何幫助，請隨時發表評論。

編輯：

要刪除拉斐爾的元素，你可以使用

myElement.remove();

甚至

myElement.hide();

編輯：

我以爲你可能一直在尋找一個輸入字段......這是拉斐爾無法處理的。所以你將不得不做一些工作。

如果您創建一個輸入字段，然後將其完全放在您的拉斐爾程序的頂部，您可以實現此目的。

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

更好？

來源

2012-01-11 12:09:14 BananaNeil

我最終使用簡單的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(); 
});

操作在拉斐爾的辦法不多複雜。

來源

2012-01-11 16:51:12 Marta

添加和使用JavaScript

回答

相關問題