HTML5 Холст прокрутки Messes с позицией мыши

Я сейчас возился с HTML5, и я хотел запрограммировать небольшие браузерные игры - просто для удовольствия. Я создал холст, в котором загружено фоновое изображение - его вид гексагональной сетки. Чтобы узнать, какой шестиугольник нажат, я использую круги, их центры/радиус. Я объясняю это, потому что таким образом вы можете понять код, который я отправляю быстрее.HTML5 Холст прокрутки Messes с позицией мыши

Все это работает отлично, пока я не пользуюсь полосами прокрутки - тогда все испорчено. Просто кажется, что я не получу координаты. Поскольку сетка немного больше, мне приходится использовать полосы прокрутки, особенно на меньших экранах.

Так вот код

Сайт

<html> 
<head> 
    <script type="text/javascript" src="worldmap.js"></script> 
    <script type="text/javascript" src="worldmapMouseEvents.js"></script> 
</head> 
<body onload="draw()"> 

    Xcoord: <div id="xcoord">0</div>&nbsp; 
Ycoord: <div id="ycoord">0</div><br> 
Spalte: <div id="column">0</div><br> 
Reihe: <div id="row">0</div><br> 

    <canvas id="canvas" 
    width="1100" 
    height="1100" 
    style="border: 1px solid black;" 
    onmousemove="getMousePosition()" 
    onmousedown="getCell()"> 
    </canvas> 

</body> 
</html>

Файл worldmap.js, который отображает сетку

function draw(){ 
    var c=document.getElementById("canvas"); 
    var ctx=c.getContext("2d"); 
    var img = new Image(); 

    img.onload = function(){ 
     ctx.drawImage(img,0,0); 
     ctx.stroke(); 
    }; 
    img.src = './pics/grid.jpg'; 
}

А вот worldmapMouseEvents.js файл более источника, который действует странно после прокрутки

function getMousePosition() { 
var x = new Number(); 
var y = new Number(); 
var canvas = document.getElementById("canvas"); 

if (event.x != undefined && event.y != undefined) { 
    x = event.x; 
    y = event.y; 
} else 
{ 
    x = event.clientX + document.body.scrollLeft 
      + document.documentElement.scrollLeft; 
    y = event.clientY + document.body.scrollTop 
      + document.documentElement.scrollTop; 
} 

x -= canvas.offsetLeft; 
y -= canvas.offsetTop; 

return [x,y]; 
}

Здесь функция, которая вычисляет, какой шестиугольник нажата с помощью кругов (математика правильная и довольно простая (xCoord-xCenter)^2 + (yCoord -yCenter)^2. Если радиус^2 равен или меньше, то точка находится внутри круга. Эти массивы в начале только координаты центра сетки.)

function getCell(){ 

var xOddRows = new Array(25, 65, 105, 145, 185, 225, 265, 305, 345, 385, 425, 465, 505, 545, 585, 625, 665, 705, 745, 785, 825, 865, 905, 945, 985); 
var yOddRows = new Array(35, 115, 195, 275, 355, 435, 515, 595, 675, 755, 835, 915, 995); 

var xEvenRows = new Array(45, 84, 125, 165, 205, 245, 285, 325, 365, 405, 445, 485, 525, 565, 605, 645, 685, 725, 765, 805, 845, 885, 925, 965, 1005); 
var yEvenRows = new Array(75, 155, 235, 315, 395, 475, 555, 635, 715, 795, 875, 955); 

var position = getMousePosition(); 
var x = position[0]; 
var y = position[1]; 


for(var yOddRowsRunner = 0; yOddRowsRunner < 13; yOddRowsRunner++){ 
    for(var xOddRowsRunner = 0; xOddRowsRunner < 25; xOddRowsRunner++){ 
     var circle = (x - xOddRows[xOddRowsRunner])*(x - xOddRows[xOddRowsRunner]) + (y - yOddRows[yOddRowsRunner])*(y - yOddRows[yOddRowsRunner]); 
     var radius = (20 * 20); 

     if(radius >= circle){ 
      yPos = (2 * yOddRowsRunner) +1 ;//This is just for nicer output 
      return [yPos, xOddRowsRunner]; 
     } 
    } 
} 

for(var yEvenRowsRunner = 0; yEvenRowsRunner < 12; yEvenRowsRunner++){ 
    for(var xEvenRowsRunner = 0; xEvenRowsRunner < 25; xEvenRowsRunner++){ 
     var circle = (x - xEvenRows[xEvenRowsRunner])*(x - xEvenRows[xEvenRowsRunner]) + (y - yEvenRows[yEvenRowsRunner])*(y - yEvenRows[yEvenRowsRunner]); 
     var radius = (20 * 20); 

     if(radius >= circle){ 
         yPos = (2 * yEvenRowsRunner) +2; //This is just for nicer output 
       return [yPos, xEvenRowsRunner]; 
     } 
    } 
} 

return null;  
}

Так что это полный код и как я уже сказал, он отлично работает до тех пор, пока вы не использовать полосы прокрутки. Я очень ценю вашу помощь - все это сводит меня с ума.

источник

2012-05-18 Daniel

Вы никогда не принимали ответ на StackOverflow - никто не ответит вам, пока вы не сделаете. –

Хорошо. Я вижу свою ошибку. Я просто не знал об этом. Я просто написал большое «спасибо» в качестве комментария. – Daniel

haha :) groovy :) –

Я испытал нечто подобное раньше; В конце концов я понял это, используя что-то похожее на то, что вы пытались; Я заменил .x и .y с .pageX и .pageY

if (e.pageX || e.pageY) { 
    x = e.pageX; 
    y = e.pageY; 
}

Насколько мне известно, это происходит потому, что .x и .y не захватить координаты относительно элемента, а по отношению к тело; другими словами, они не учитывают прокрутку, в то время как pageX и pageY делают.

Test case with .x and .y

Test case with .pageX and .pageY

источник

2012-05-18 21:13:58 Daedalus

Использование e.PageX & e.PageY - гораздо лучшее решение. Я бы добавил, что если ваш холст находится внутри элемента, который является прокручиваемой страницейX, а pageY будет сообщать значения, которые являются неправильными, если окно не находится в позиции прокрутки 0,0. –

У меня был клиент X и клиент и у меня была аналогичная проблема. спасибо за это, он должен быть отмечен как ответ –

HTML5 Холст прокрутки Messes с позицией мыши

ответ

Смежные вопросы