Как центрировать элемент на экране относительно размера окна в javascript? - PullRequest
Новая
       7

Как центрировать элемент на экране относительно размера окна в javascript?

0 голосов
/ 26 сентября 2018

Вот мой код, чтобы лучше объяснить, что я пытаюсь сделать.Это близко к центру, но всегда немного от центра.Это на холсте 10000 на 10000 пикселей. 

var winX=window.innerWidth/2; //get the clients browser width
var winY=window.innerHeight/2; //get the clients browser height
function drawPlayer() {
        ctx.beginPath();
        player.pX=randInt(4,10004); //get random X coordinate
        player.pY=randInt(4,10004); //get random Y coordinate
        ctx.arc(player.pX, player.pY, circR, 0, 2*Math.PI); //creates the circle that i'm trying to center on the screen
        ctx.fillStyle=colors[randInt(0,6)];
        ctx.fill();
        ctx.closePath();
        window.scrollTo((player.pX-winX)-2, (player.pY-winY)-2);
        document.body.style.overflow='hidden';
}

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

1 Ответ

0 голосов
/ 26 сентября 2018

Кажется, что к window.scrollTo* 1002 добавлено небольшое отступление. Я не видел ни одной документации, детализирующей эту проблему, и, честно говоря, до сих пор я не заметил, что заполнение небольшое (~ 5px), поэтому я попыталсяпоместив маленькие кружки в верхнем левом углу, центр круга должен быть справа от заданной координаты, но не совсем там, мы можем видеть весь круг, когда мы должны видеть только четверть его ...

Вот небольшой пример, показывающий проблему: 

document.body.style.overflow = 'hidden';

ctx = document.getElementById('c').getContext('2d');
ctx.beginPath();
for (var i = 0; i < 10; i++ )
  ctx.arc(500 + i*20, 500 + i*20, 5, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();

var n = 500
function scroll() {
  n = (n == 600) ? 500 : 600;
  window.scrollTo({top: n, left: n, behavior: "smooth" });
}

setInterval(scroll, 1000);
scroll()
<canvas id="c" height=10000 width=10000></canvas>

Поскольку вы используете такой большой холст, я рекомендую вам попробовать игровой движок JS:
https://github.com/collections/javascript-game-engines

...