캔버스의 고정점 확대 축소

스틱 포인트를 사용한 확대/축소는 Figma와 같은 디자인 또는 제작 도구에서 흔히 볼 수 있는 일반적인 사용 사례입니다. 이번 블로그에서는 이를 자바스크립트, HTML, CSS로 처리하기 위한 기본 알고리즘을 제시하겠습니다.

데모

데모

코드 단계별

1. 컨테이너와 확장 가능한 항목 만들기

으아악 으아악

이 예에서는 div를 "scalable-child" 클래스의 확장 가능한 항목으로 사용하고 해당 컨테이너는 "parent" 클래스의 div입니다.
일부 숙소에 대해 참고하세요:

• 상단, 왼쪽: 0이 기본 위치입니다

• Pointer-event: 없음, 부모에 이벤트를 추가할 것이기 때문에 포인터 이벤트 !== none이면 알고리즘이 실패합니다.

• Transform-origin: 왼쪽 상단, 위치를 계산하기 위해 좌표 원점을 만듭니다

2. 휠 이벤트 리스너 추가

으아악 으아악

WheelEvent를 사용하여 확대, 축소 및 어린이 이동을 처리하겠습니다

참고: 이 예는 트랙패드에 대해서만 설명합니다. (Ctrl +, Ctr -)나 마우스 같은 단축키에 대한 이벤트도 처리해야 합니다.

으아악

먼저, 하위 요소를 확대/축소하거나 이동하는지 확인하기 위한 isZooming 변수가 있습니다.

그런 다음 하위 요소의 새 위치와 크기를 계산합니다. 왼쪽, 위쪽, 눈금은 온대 변수로 사용됩니다.

이제 알고리즘을 2가지 계산 함수에 집중할 시간입니다:

3. 확대/축소하여 계산하세요

으아악

확대/축소 시 휠이벤트는 deltaY를 배율 비율로 반환하며 이를 사용하여 newScale을 계산할 수 있습니다

• deltaY > 0 => 축소

• deltaY < 0 => 확대
  detalScale = e.deltaY * oldScale * 0.01로 스케일링 속도를 제어합니다

newLeft 및 newTop 변수를 계산하는 방법을 더 자세히 이해하려면 아래 이미지를 살펴보겠습니다.

마우스가 A 지점에 있을 때 하위 항목 확대를 시작합니다. 이때 우리는 몇 가지 값을 얻을 수 있습니다:

• e.offsetX: 마우스와 부모 왼쪽 가장자리 사이의 거리

• e.offsetY: 마우스와 부모 상단 가장자리 사이의 거리

• left: 현재 자식의 왼쪽 스타일 값

• top: 현재 어린이의 최고 스타일 값

어린이는 축척 비율에서 축척' 비율로 축척되고 A 지점은 A'로 이동합니다.
따라서 A 지점을 (부모와 함께) 고정시키려면 deltaX와 deltaY를 계산한 다음 정확히 px로 하위 되돌리기를 이동해야 합니다.

detalX = x' - x
= x * (규모' / 규모) - x
= x * (규모' / 규모 - 1)
= (e.offsetX - 왼쪽) * (scale' / scale - 1)

detalY = y' - y
= y * (규모' / 규모) - y
= y * (규모' / 규모 - 1)
= (e.offsetY - 상단) * (scale' / scale - 1)

newLeft = 왼쪽 - detalX
newTop = 상단 - detalY

4. 이사하면서 계산

으아악

이동 이벤트에서는 newLeft 및 newTop 값만 계산하면 됩니다. 그리고 속도를 높이기 위해 각 델타 값을 *2로 늘립니다.

그게 우리가 처리해야 할 전부입니다. 도움이 되었기를 바랍니다. 시청해주셔서 감사합니다!
여기에서 전체 소스 코드를 볼 수 있습니다.

위 내용은 캔버스의 고정점 확대 축소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!