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

我已经设法使用更简单的javascript然后Raphael使其工作。这是代码：

<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 目标上，而不是RaphaelJS svg。

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

2 个答案: