ダブルクリックで新しいポイント（画像）を追加するには？

Question

私はJavaScriptを選択した領域でその機能（Raphaelを使用しています）を持っています。そのユーザーはこれに説明を追加できるよう

この画像（ポイント）の隣にいくつかのテキストフィールドを追加

• は、（ポイントを象徴する小さな画像）新しいイメージを追加します。そして、私は、ダブルクリックで新しい機能を追加する必要がありますポイント
• イメージとテキストフィールドの横に削除ボタンを追加します。だからもしユーザーがそれを取り除くのが好きなら、彼はできる。これは、テキストフィールドに、この全く新しいポイント（イメージ）を削除する必要があり、私はここでそれを

を救うことができるように私は、この新しいポイントのcordinatesをも知っておく必要があり

は私の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 ターゲットに配置することができます。