Javascript 如何在双击时添加新点（图像）？
我有一个javascript函数（使用Raphael），可以单击选择区域。我需要在双击时添加新功能：Javascript 如何在双击时添加新点（图像）？,javascript,jquery,html,raphael,double-click,Javascript,Jquery,Html,Raphael,Double Click,我有一个javascript函数（使用Raphael），可以单击选择区域。我需要在双击时添加新功能： 添加新图像（表示点的小图像） 在该图像（点）旁边添加一些文本字段，以便用户可以向该点添加说明 在图像和文本字段旁边添加删除按钮。这样，如果用户想要删除它，他可以。它应该删除带有文本字段的整个新点（图像） 我还需要知道这个新点的坐标，这样我才能保存它 下面是我的javascript函数的代码： <script type="text/javascript" charset="utf-8"&
- 添加新图像（表示点的小图像）
- 在该图像（点）旁边添加一些文本字段，以便用户可以向该点添加说明
- 在图像和文本字段旁边添加删除按钮。这样，如果用户想要删除它，他可以。它应该删除带有文本字段的整个新点（图像）
- 我还需要知道这个新点的坐标，这样我才能保存它
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var R = Raphael("paper", 500, 500);
var attr = {
fill: "#EEC7C3",
stroke: "#E0B6B2",
"stroke-width": 1,
"stroke-linejoin": "round"
};
var area = {};
area.Element1 = R.path("...").attr(attr);
area.Element2 = R.path("...").attr(attr);
...
area.Element63 = R.path("...").attr(attr);
var current = null;
for (var state in area) {
area[state].color = Raphael.getColor();
(function (st, state) {
st[0].state = 0;
st[0].style.cursor = "pointer";
st[0].onmouseover = function () {
current && area[current].animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500) && (document.getElementById(current).style.display = "");
st.animate({ fill: st.color, stroke: "#ccc" }, 500);
st.toFront();
R.safari();
document.getElementById(state).style.display = "block";
current = state;
};
st[0].onmouseout = function () {
if (this.state == 0)
st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
else
st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
st.toFront();
R.safari();
};
st[0].onclick = function () {
st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
st.toFront();
if (this.state == 0)
this.state = 1;
else
this.state = 0;
R.safari();
};
})(area[state], state);
}
};
</script>
window.onload=函数（）{
var R=拉斐尔（“纸”，500500）；
变量属性={
填写：“EEC7C3”，
笔划：“E0B6B2”，
“笔划宽度”：1，
“笔划线条连接”：“圆形”
};
var区域={}；
area.Element1=R.path（“…”）.attr（attr）；
area.Element2=R.path（“…”）.attr（attr）；
...
area.Element63=R.path（“…”）.attr（attr）；
无功电流=零；
用于（区域中的var状态）{
区域[状态].color=Raphael.getColor（）；
（功能（st，状态）{
st[0]。状态=0；
st[0].style.cursor=“指针”；
st[0]。onmouseover=函数（）{
当前和区域[当前]。动画（{fill:#EEC7C3”，stroke:#E0B6B2“}，500）和&（document.getElementById（当前）.style.display=“”）；
圣动画（{fill:st.color，stroke:#ccc“}，500）；
圣托夫朗特（）；
R.safari（）；
document.getElementById（state.style.display=“block”；
当前=状态；
};
st[0]。onmouseout=函数（）{
如果（this.state==0）
st.animate（{填充：#EEC7C3），笔划：#E0B6B2}，500）；
其他的
圣动画（{填充：#C05219），笔划：#E0B6B2}，500）；
圣托夫朗特（）；
R.safari（）；
};
st[0]。onclick=函数（）{
圣动画（{填充：#C05219），笔划：#E0B6B2}，500）；
圣托夫朗特（）；
如果（this.state==0）
该状态=1；
其他的
该状态=0；
R.safari（）；
};
})（地区[州]、州）；
}
};
我不是javascript程序员，所以我甚至不知道从哪里开始。所以这里的任何帮助都是非常感谢的 您的要求不明确，尤其是拉斐尔JS的使用。这就是如何使用RaphaelJS添加图像 HTML
对于按钮和所有可以使用的HTML元素，将其放置在RaphaelJS svg上的div目标中。您的要求不明确，尤其是RaphaelJS的使用。这就是如何使用RaphaelJS添加图像 HTML
对于按钮和所有您可以使用的HTML元素，并将其放置在RaphaelJS svg上的div目标中。我已设法使用比Raphael更简单的javascipt使其工作。以下是代码：
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var R = Raphael("paper", 500, 500);
var attr = {
fill: "#EEC7C3",
stroke: "#E0B6B2",
"stroke-width": 1,
"stroke-linejoin": "round"
};
var area = {};
area.Element1 = R.path("...").attr(attr);
area.Element2 = R.path("...").attr(attr);
...
area.Element63 = R.path("...").attr(attr);
var timer;
var firing = false;
var singleClick = function () { };
var doubleClick = function () { };
var firingFunc = singleClick;
var counter = 1;
for (var state in area) {
area[state].color = Raphael.getColor();
(function (st, state) {
st[0].active = 0;
st[0].style.cursor = "pointer";
st[0].onclick = function (event) {
if (firing) {
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();
});
firingFunc = doubleClick;
if (st.editable == true) {
if (this.active == 0) {
this.active = 1;
st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
st.selected = true;
}
else {
this.active = 0;
st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
st.selected = false; }
}
R.safari();
return;
}
firing = true;
timer = setTimeout(function () {
firingFunc();
firingFunc = singleClick;
firing = false;
}, 250);
if (st.editable == true) {
if (this.active == 0) {
this.active = 1;
st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
st.selected = true;
//st.toFront();
}
else {
this.active = 0;
st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
st.selected = false;
//st.toFront();
}
}
R.safari();
};
})(area[state], state);
}
};
</script>
window.onload=函数（）{
var R=拉斐尔（“纸”，500500）；
变量属性={
填写：“EEC7C3”，
笔划：“E0B6B2”，
“笔划宽度”：1，
“笔划线条连接”：“圆形”
};
var区域={}；
area.Element1=R.path（“…”）.attr（attr）；
area.Element2=R.path（“…”）.attr（attr）；
...
area.Element63=R.path（“…”）.attr（attr）；
无功定时器；
无功触发=假；
var singleClick=function（）{}；
var doubleClick=function（）{}；
var firingFunc=单点单击；
var计数器=1；
用于（区域中的var状态）{
区域[状态].color=Raphael.getColor（）；
（功能（st，状态）{
st[0]。活动=0；
st[0].style.cursor=“指针”；
st[0]。onclick=函数（事件）{
如果（发射）{
var relativeX=event.pageX；
var relativeY=event.pageY；
$（'.marker'）。追加（''）；
计数器++；
$（“.delete_按钮”）。单击（函数（）{
$（this.parent（）.remove（）；
});
firingFunc=双击；
如果（标准可编辑==真）{
如果（this.active==0）{
这是1.active=1；
圣动画（{填充：#C05219），笔划：#E0B6B2}，500）；
st.selected=true；
}
否则{
此参数为0；
st.animate（{填充：#EEC7C3），笔划：#E0B6B2}，500）；
st.selected=false；}
}
R.safari（）；
返回；
}
发射=真；
定时器=设置超时（函数（）{
firingFunc（）；
firingFunc=单点单击；
发射=假；
}, 250);
如果（标准可编辑==tru
var paper = Raphael("target", 320, 200);
var image = paper.image("https://ssl.gstatic.com/images/logos/google_logo_41.png", 10, 10, 116, 41);
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var R = Raphael("paper", 500, 500);
var attr = {
fill: "#EEC7C3",
stroke: "#E0B6B2",
"stroke-width": 1,
"stroke-linejoin": "round"
};
var area = {};
area.Element1 = R.path("...").attr(attr);
area.Element2 = R.path("...").attr(attr);
...
area.Element63 = R.path("...").attr(attr);
var timer;
var firing = false;
var singleClick = function () { };
var doubleClick = function () { };
var firingFunc = singleClick;
var counter = 1;
for (var state in area) {
area[state].color = Raphael.getColor();
(function (st, state) {
st[0].active = 0;
st[0].style.cursor = "pointer";
st[0].onclick = function (event) {
if (firing) {
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();
});
firingFunc = doubleClick;
if (st.editable == true) {
if (this.active == 0) {
this.active = 1;
st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
st.selected = true;
}
else {
this.active = 0;
st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
st.selected = false; }
}
R.safari();
return;
}
firing = true;
timer = setTimeout(function () {
firingFunc();
firingFunc = singleClick;
firing = false;
}, 250);
if (st.editable == true) {
if (this.active == 0) {
this.active = 1;
st.animate({ fill: "#C05219", stroke: "#E0B6B2" }, 500);
st.selected = true;
//st.toFront();
}
else {
this.active = 0;
st.animate({ fill: "#EEC7C3", stroke: "#E0B6B2" }, 500);
st.selected = false;
//st.toFront();
}
}
R.safari();
};
})(area[state], state);
}
};
</script>