如何在双击时添加新点（图像）？

Question

我有点击选择区域的 javascript 函数（使用 Raphael）。我需要在双击时添加新功能：

• 添加新图像（象征点的小图像）
• 在此图像（点）旁边添加一些文本字段，以便用户可以在此点添加描述
• 在图像和文本字段旁边添加删除按钮。因此，如果用户想删除它，他可以。它应该使用文本字段删除这个全新的点（图像）
• 我还需要知道这个新点的坐标，以便保存它

这是我的 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

我已经设法使用比 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>

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 元素，将其放在 RaphaelJS svg 上的 div target 中。