Как добавить новую точку (изображение) по двойному клику?

Question

У меня есть функция javascript (которая использует Рафаэля), которая нажимает на область выбора.И мне нужно добавить новую функцию, которая при двойном щелчке:

• добавляет новое изображение (маленькое изображение, которое символизирует точку)
• добавляет текстовое поле рядом с этим изображением (точка), чтобыпользователь может добавить описание к этому пункту
• добавить кнопку удаления рядом с изображением и текстовым полем.Так что, если пользователь хочет удалить его, он может.Он должен удалить всю эту новую точку (изображение) с текстовым полем
• Мне также нужно знать кординаты этой новой точки, чтобы я мог сохранить ее

Вот код моегоФункция 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>

Я не программист javascript, поэтому я даже не знаю, с чего начать.Так что любая помощь здесь очень ценится!

Answer 1

Мне удалось заставить его работать, используя более простой 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>

Answer 2

Ваше требование не ясно, особенно использование RaphaelJS.Вот как вы можете добавить изображение с помощью RaphaelJS.

HTML

<div id="target"></div>

Javascript

var paper = Raphael("target", 320, 200);
var image = paper.image("https://ssl.gstatic.com/images/logos/google_logo_41.png", 10, 10, 116, 41);

Для кнопки и всего, что вы можете использовать элементы HTML, и поместите его в div target overRaphaelJS svg.