ピクセルonclickのXY座標を記録する

私は個々のピクセルをクリックしてピクセルのXY座標を記録/印刷する方法を見つけようとしています。私は以下のコードをオンラインで見つけましたが、最後にクリックされたピクセルの座標しか表示されません。クリックしたすべてのピクセルの座標を保存/印刷する方法はありますか？私はJavaアプレットのためにこれをやっているので、多角形を作るのがはるかに簡単になります。（私はピクセルをクリックしたときに）私はちょうど&は、Javaに貼り付けるコピーすることができるように、私は、このようになり出力を好む：ピクセルonclickのXY座標を記録する

<html> 
 
<head> 
 
<script language="JavaScript"> 
 
function point_it(event){ 
 
\t pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("pointer_div").offsetLeft; 
 
\t pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("pointer_div").offsetTop; 
 
\t document.getElementById("cross").style.left = (pos_x-1) ; 
 
\t document.getElementById("cross").style.top = (pos_y-15) ; 
 
\t document.getElementById("cross").style.visibility = "visible" ; 
 
\t document.pointform.form_x.value = pos_x; 
 
\t document.pointform.form_y.value = pos_y; 
 
} 
 
</script> 
 
</head> 
 
<body> 
 
<form name="pointform" method="post"> 
 
<div id="pointer_div" onclick="point_it(event)" style = "background-image:url('image.jpg');width:2400px;height:1848px;"> 
 
<img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"></div> 
 
You pointed on x = <input type="text" name="form_x" size="4" /> - y = <input type="text" name="form_y" size="4" /> 
 
</form> 
 
</body> 
 
</html>

：

int [] x={x1,x2,x3,x4,x...}; 
int [] y={y1,y2,y3,y4,y...};

ここで私が見つけたコードがあります

出典

2016-06-01 AA24

'document.pointform.form_x.value = pos_x; document.pointform.form_y.value = pos_y; 'その位置を表示します。ここにjavascript配列の説明があります：http://www.w3schools.com/js/js_arrays.asp – Sang

<html> 
 

 
<head> 
 
    <script language="JavaScript"> 
 
    var x = []; 
 
    var y = []; 
 

 
    function point_it(event) { 
 
     pos_x = event.offsetX ? (event.offsetX) : event.pageX - document.getElementById("pointer_div").offsetLeft; 
 
     pos_y = event.offsetY ? (event.offsetY) : event.pageY - document.getElementById("pointer_div").offsetTop; 
 
     document.getElementById("cross").style.left = (pos_x - 1); 
 
     document.getElementById("cross").style.top = (pos_y - 15); 
 
     document.getElementById("cross").style.visibility = "visible"; 
 
     x.push(pos_x); 
 
     y.push(pos_y); 
 
     document.getElementById("form_x").innerHTML = x; 
 
     document.getElementById("form_y").innerHTML = y; 
 
    }; 
 

 
    function remove_it() { 
 
     x.pop(); 
 
     y.pop(); 
 
     document.getElementById("form_x").innerHTML = x; 
 
     document.getElementById("form_y").innerHTML = y; 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <form name="pointform" method="post"> 
 
    <div id="pointer_div" onclick="point_it(event)" style="background-image:url('image.jpg');width:2400px;height:1848px;"> 
 
     <img src="point.gif" id="cross" style="position:relative;visibility:hidden;z-index:2;"> 
 
    </div> 
 
    You pointed on 
 
    <br>x = <span id="form_x"></span> 
 
    <br>y = <span id="form_y"></span> 
 
    <br> 
 
    <button onclick="remove_it()">remove last</button> 
 
    </form> 
 
</body> 
 

 
</html>

出典

2016-06-01 06:43:06 sudhirk496

コードサンプルとともに説明を入れてください。 –

私はあなたのコードを使用して、それは素晴らしい動作しますが、私は1つの問題があります。時々、私はクリックした場所をこぎつけて、その点を削除したいと思うことがあります。 Ctrl + Zキーを押すか、最後のポイントを削除するボタンを作成してポイントを削除する方法はありますか？ – AA24

最後のポイントを削除するボタンを追加できます。クリックすると、両方の配列から最後の要素が削除されます。編集されたコードを参照してください。 – sudhirk496

ピクセルonclickのXY座標を記録する

答えて

関連する問題