[英]How to add new point (image) on double click?
I have javascript function (that uses Raphael) that on click select area. 我具有单击功能的javascript函数(使用Raphael)。 And I need to add new function that on double click: 我需要添加双击的新功能:
Here is code of my javascript function: 这是我的javascript函数的代码:
<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>
I am not a javascript programmer so I don't really even know where to start. 我不是JavaScript程序员,所以我什至都不知道从哪里开始。 So any help here is much appreciated! 因此,在此提供的任何帮助将不胜感激!
I have manage to make it work using more simple javascipt than Raphael. 我设法使其比Raphael使用更简单的javascipt来工作。 Here is code: 这是代码:
<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>
Your requirement is not clear, especially the use of RaphaelJS. 您的要求不清楚,尤其是使用RaphaelJS。 This is how you can add an image using RaphaelJS. 这是您可以使用RaphaelJS添加图像的方式。
HTML HTML
<div id="target"></div>
Javascript Java脚本
var paper = Raphael("target", 320, 200);
var image = paper.image("https://ssl.gstatic.com/images/logos/google_logo_41.png", 10, 10, 116, 41);
For button and all you can use HTML elements, and place it in the div target over RaphaelJS svg. 对于按钮,您可以使用HTML元素,并将其放置在RaphaelJS svg上的div 目标中 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.