Вставьте координаты щелчка мышью в поле ввода текста с помощью Javascript - PullRequest
Новая
       35

Вставьте координаты щелчка мышью в поле ввода текста с помощью Javascript

1 голос
/ 02 апреля 2012

У меня есть HTML5 Canvas на моей странице вместе с двумя полями для ввода текста.Когда пользователь нажимает на холст (и только на холсте), я хочу, чтобы эхо-координаты мыши отображались в полях ввода текста на странице.Помогите??Если вам нужно больше деталей, пожалуйста, спросите.

Я нашел это по ссылке в комментариях ниже, но не могу заставить ее работать?:

Текстовые вводы: 

<input type="number" name="MouseX" id="text_x" min="10" max="600" />

 <input type="number" name="MouseY" id="text_y" min="0" max="480" />

Javascript: 

<script>
function relMouseCoords(event){
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do{
        totalOffsetX += currentElement.offsetLeft;
        totalOffsetY += currentElement.offsetTop;
    }
    while(currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    return {x:canvasX, y:canvasY}
}
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
coords = canvas.relMouseCoords(event);
document.Show.MouseX.value = coords.x;
document.Show.MouseY.value = coords.y;

</script>

ОБНОВЛЕНИЕ Вот код, который работал для меня: HTML: 

<div id="canvasContainer" onclick="point_it(event)">
                          <canvas id="canvas" width="640" height="500">
                            <p>Unfortunately, your browser is currently unsupported by our web 
                              application.  We are sorry for the inconvenience. </p>
                           </canvas>

И JS: 

<script language="JavaScript">
// Get mouse click coordinates within canvas element
function point_it(event){
    pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById("canvasContainer").offsetLeft;
    pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById("canvasContainer").offsetTop;
    document.getElementById("canvas").style.left = (pos_x-1) ;
    document.getElementById("canvas").style.top = (pos_y-15) ;
    document.getElementById("canvas").style.visibility = "visible" ;
    document.getElementById("text_x").value = pos_x;
    document.getElementById("text_y").value = pos_y;
}
</script>

1 Ответ

1 голос
/ 02 апреля 2012

Вам нужно добавить событие click и вызвать вашу функцию с аргументами события. 

document.getElementById("canvas").onclick = function(event) {
    var coords = canvas.relMouseCoords(event);
    document.getElementById("text_x").value = coords.x;
    document.getElementById("text_y").value = coords.y;
}​​

Живой пример

...