Google 지도에서 상징적인 페그맨을 재현하는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

Google 지도에서 상징적인 페그맨을 재현하는 방법

Mary-Kate Olsen

Dec 19, 2024 pm 04:11 PM

How to Recreate the Iconic Pegman from Google Maps

오랫동안 해보고 싶었던 작은 단편입니다. 마침내 Google 지도의 상징적인 기능인 페그맨으로 알려진 이 작은 녀석을 드래그 앤 드롭하여 스트리트 뷰로 전환할 수 있는 기능을 다시 구현하게 되었습니다.

TL;DR
지도 위 오른쪽 하단에 있는 작은 아이콘을 클릭하여 드래그하세요.

HTML

구조는 간단합니다. 나는:

컨테이너 역할을 하는 #map(배경 이미지 적용).
오른쪽 하단에 위치한 #페그맨 컨테이너.
드래그 가능한 캐릭터에 대한 #pegman 요소 자체입니다.

<div>



<h2>
  
  
  CSS
</h2>

<p>Positioning everything is simple, as you can see in the source code above, but the most important part is the rotate property. This is dynamically updated using JavaScript:<br>
</p>

<pre class="brush:php;toolbar:false">#pegman {
  /* other styles */
  rotate: var(--r);
}

로그인 후 복사

회전 값은 사용자 상호작용에 따라 변경되며 이에 대해서는 다음에 자세히 살펴보겠습니다.

자바스크립트

여기서 모든 것은 사용자 상호작용을 중심으로 이루어집니다. JavaScript 핸들:

마우스 이벤트를 수신합니다.
페그맨의 위치와 회전을 동적으로 업데이트합니다.
더 나은 UX를 위해 부드러운 애니메이션을 추가합니다.

const pegman = document.querySelector('#pegman');
let isDragging = false;
let initialX = 0;
let initialY = 0;
let inactivityTimeout;
let lastX = 0;
const timeout = 25;
const maxDegrees = 50;

// Event listeners
pegman.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);

로그인 후 복사

각 기능을 세분화해 보겠습니다.

onMouseDown

초기 마우스 위치를 기록하고 isDragged 플래그를 전환하여 드래그를 시작합니다.

const onMouseDown = (e) => {
  isDragging = true;
  initialX = e.clientX;
  initialY = e.clientY;
};

로그인 후 복사

onMouseMove

드래그 중 페그맨의 움직임과 회전을 처리합니다. 다음을 보장합니다:

회전은 일정 범위 내에서 유지됩니다(슈퍼맨이 날아다니는 것처럼 극단적인 각도를 피하기 위해).
회전 값은 --r을 사용하여 동적으로 업데이트됩니다.

const onMouseMove = (e) => {
  if (!isDragging) return;

  const dy = e.clientY - initialY;
  const dx = e.clientX - initialX;

  // Limit rotation range
  let rx = Math.max(-maxDegrees, Math.min(maxDegrees, dx - lastX));
  pegman.setAttribute('style', `--r: ${rx}deg`);

  // Animate Pegman's position
  pegman.animate({ translate: `${dx}px ${dy}px` }, {
    duration: 100,
    fill: 'forwards',
  });

  // Reset rotation after inactivity
  clearTimeout(inactivityTimeout);
  inactivityTimeout = setTimeout(() => {
    lastX = dx;
    pegman.setAttribute('style', `--r: 0deg`);
  }, timeout);
};

로그인 후 복사

onMouseUp

사용자가 드래그를 중지하면 Pegman의 상태가 재설정됩니다.

회전이 0으로 재설정됩니다.
페그맨은 순조롭게 원래 위치로 돌아옵니다.

const onMouseUp = () => {
  isDragging = false;

  // Reset rotation
  pegman.setAttribute('style', `--r: 0`);

  // Animate Pegman back to its original position
  pegman.animate({ translate: `0px 0px` }, {
    duration: 500,
    fill: 'forwards',
    easing: 'ease',
  });

  // Clear residual state
  inactivityTimeout = setTimeout(() => {
    lastX = 0;
  }, timeout);
};

로그인 후 복사