자바스크립트 이미지 자르기 효과(돋보기)

이런 효과는 이전 버전에서 처음 접했고, 3가지 주요 기능을 함께 개발했기 때문에 능력치에 한계가 있어서 효과를 얻기만 하면 됐다.
최근에는 드래그 앤 드롭 효과와 확대/축소 효과를 별도로 연구했는데, 이를 정리하고 개선한 후 잘라내기 효과를 통합했는데, 개인적으로 효과가 좋다고 생각합니다.
실제 컷팅 사진이 아닌 효과일 뿐이라는 점에 유의하시기 바랍니다. 실제 컷팅 사진을 얻으려면 사진 컷팅 시스템을 참조하세요.

포스팅할 코드가 너무 많아 렌더링을 드려야 합니다:

프로그램 설명

이 효과는 크게 세 부분으로 나뉩니다: 드래그 레이어 드롭, 사진 자르기(미리보기 포함).
그 중 레이어 드래그 앤 드롭과 레이어 스케일링에 대해서는 다른 두 글에서 자세히 설명했습니다. 여기서는 사진 자르기 부분을 다루겠습니다.

사진 자르기

사진 자르기 디자인에는 세 가지 방법이 있습니다.

사진을 배경 이미지로 설정합니다. 배경 이미지 위치를 설정하면 됩니다. 이미지이지만 단점이 있습니다. 사진의 일반적인 비율에 따라서만 구현할 수 있어 유연성이 부족합니다.
사진을 자르기 대상에 넣고 사진의 상단과 왼쪽을 설정합니다. 가능하지만 아래에 더 간단한 방법이 있습니다.
이는 이미지 클립을 설정하여 달성됩니다.
방법 3의 구현 방법은 다음과 같습니다. 이 방법은 올해의 "수집" 코드에서 볼 수 있습니다. 먼저 클립에 대해 이야기해 보겠습니다.
클립의 기능은 "표시 영역을 검색하거나 설정하는 것입니다." ​Visible 영역 밖의 부분은 투명합니다.”
(0,0) 좌표에 대해 객체의 왼쪽 상단에서 계산된 4개의 오프셋 값을 상단-오른쪽-하단-왼쪽으로 제공합니다. 클립합니다.
예:

코드 복사 코드는 다음과 같습니다.

p { 위치:절대 너비:60px; 60px; 클립: ret(0 20 50 10) }

position:absolute 설정이 필요합니다(자세한 내용은 설명서 참조).
구체적인 구현 원리에 대해 이야기해 보겠습니다.

먼저 세 개의 레이어가 삽입될 컨테이너(_Container)가 필요합니다.

기본 레이어(_layBase): 반투명 이미지 ;
컷 레이어(_layCropper) : 정상적으로 표시되는 부분
컨트롤 레이어(_layHandle) : 표시를 제어하는 ​​부분.
그 중 기본 레이어와 커팅 레이어는 프로그램에 의해 자동으로 생성된 그림이고, 컨트롤 레이어는 자체 정의된 레이어(프로그램 내 p)입니다.
기본 레이어와 커팅 레이어는 완전히 겹쳐야 합니다. 두 레이어는 모두 프로그램의 왼쪽 상단에 절대적으로 위치해야 합니다.

코드를 복사하세요 코드는 다음과 같습니다. 다음은:

this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0

각 레이어의 순서가 보장되도록 스태킹 순서도 설정해야 합니다.