Масштабирование изображения по согласованию с javascript - PullRequest
Новая
       54

Масштабирование изображения по согласованию с javascript

0 голосов
/ 25 мая 2020

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

Мои проблемы их два: во-первых, я должен найти способ поместить прослушиватель событий в точку (я полагаю, с координатами) изображения, которая останется неизменной при изменении размера окна; Затем мне нужно найти способ увеличить эту точку в javascript. Все руководства, которые я нашел, объясняли только то, как увеличивать масштаб с помощью колеса muose, а не щелчком по указанной c точке.

Идея?

вот изображение моей игры

1 Ответ

1 голос
/ 25 мая 2020

Вот рабочее доказательство концепции того, как поймать щелчок точки и увеличить желаемую точку: 

const gameElement = document.getElementById("game");
const eggsUrl = "https://i.imgur.com/saXapYu.png";
const pointsUrl = "https://i.imgur.com/tFStOam.png";
const backgroundImageSize = "1";

let isZoomedIn = false;
let zoomCoordinates = {
  x: 0,
  y: 0
};
let zoomSize = "100% 100%";

const points = [{
    x: 40,
    y: 40
  },
  {
    x: 200,
    y: 200
  },
  {
    x: 360,
    y: 360
  }
];

function onGameClicked(event) {
  if (isZoomedIn) {
    gameElement.style.backgroundSize = "100% 100%";
    gameElement.style.backgroundPosition = "center";
    isZoomedIn = false;
  } else {
    const clickedElement = getClickedElement(event.clientX, event.clientY);
    if (clickedElement) {
      zoomedX = 200 - (clickedElement.x * 2);
      zoomedY = 200 - (clickedElement.y * 2);
      gameElement.style.backgroundSize = "200% 200%";
      gameElement.style.backgroundPosition = `${zoomedX}px ${zoomedY}px`;
      isZoomedIn = true;
    }
  }
}

function getClickedElement(clickedX, clickedY) {
  for (const point of points) {
    if (clickedX > point.x - 25 &&
      clickedX < point.x + 25 &&
      clickedY > point.y - 25 &&
      clickedY < point.y + 25) {
      return point;
    }
  }
}

gameElement.addEventListener("click", onGameClicked);

document.getElementById("eggs").addEventListener("click", () => {
  gameElement.style.backgroundImage = `url("${eggsUrl}")`;
});
document.getElementById("points").addEventListener("click", () => {
  gameElement.style.backgroundImage = `url("${pointsUrl}")`
});
#game {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  background-image: url("https://i.imgur.com/tFStOam.png");
  cursor: pointer;
  transition: 1s;
  background-repeat: no-repeat;
}
<div id="game"></div>
<button id="eggs">Show eggs</button>
<button id="points">Show points</button>

Откройте фрагмент «Полная страница», чтобы проверить его

РЕДАКТИРОВАТЬ: Я даже добавил яйца!

...