자바스크립트 이미지 돋보기(드래그 앤 드롭, 확대/축소 효과) 페이지 1/4_javascript 기술

얼마 전 문득 렌즈 효과를 만들어보고 싶다가 문득 이 효과가 생각나서 '보장'되는 코드를 발견하고 한번 시도해 보기로 했습니다.
머리말:
이 프로그램은 크게 레이어 드래그 앤 드롭, 레이어 크기 조정, 사진 자르기(미리보기 포함)의 세 부분으로 구성됩니다.
레이어 드래그 앤 드롭은 매우 일반적인 효과이며, 레이어 크기 조정은 약간 어렵고, 사진 자르기는 눈부시게 보이지만 원리도 매우 간단합니다.
하지만 구현 과정에서 저는 이전에 몰랐던 많은 것들을 배웠습니다. 아래에서 모두가 배울 수 있기를 바랍니다.
원리:

[드래그 앤 드롭 프로그램]

기본 원리는 매우 간단합니다. 모르면 코드를 보면 알 수 있습니다. Yue Rabbit과 BlueDestiny의 기사를 참조했습니다.

더 유용한 부분에 대해 이야기해 보겠습니다.

[범위 제한]

물론 드래그 앤 드롭 범위 매개변수가 있는데, 이는 mxLeft(최소 왼쪽의 왼쪽 값), mxRight(오른쪽 왼쪽의 최대값), mxTop(위쪽의 최소값), mxBottom(아래쪽 위쪽의 최대값).
그런 다음 드래그 프로그램 Move()에서 초과되었는지 확인하세요. 초과된 경우 제한 값으로 다시 설정하세요.

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

if(this.Limit){
//초과 길이 가져오기
var iRight = iLeft this._obj.offsetWidth - this .mxRight, iBottom = iTop this._obj.offsetHeight - this.mxBottom;
//여기서는 오른쪽 하단이 먼저 설정되고 그 다음 왼쪽 상단이 설정되므로 부정확할 수 있습니다.
if(iRight > 0) iLeft -= iRight;
if(iBottom > 0) iTop -= iBottom;
if(this.mxLeft > iLeft) iLeft = this.mxLeft;
if(this.mxTop > iTop) = this.mxTop;
}

[Release Selection]
이전에 사용한 방법은 ie의 onselectstart와 ff의 MozUserSelect를 설정하는 것이었습니다.
그런데 BlueDestiny가 그러더군요. "user-select를 사용하는 것은 event.preventDefault와 동일합니다. 기본 작업 방지를 사용하면 특정 작업 중에 mouseup이 손실됩니다. "
가장 좋은 방법은 ie 및 window.getSelection(에 대해 document.selection.empty()를 사용하는 것입니다. ).removeAllRanges()(ff의 경우).
Move()에 다음을 추가할 수 있습니다.

window.getSelection && window.getSelection().removeAllRanges(); 이 작성 방법은 Yue Rabbit 프로그램에서 배웠습니다.
IE의 마우스 캡처에는 기본적으로(아래 설명 참조) 이 기능이 포함되어 있으므로 IE에는 필요하지 않습니다.
[마우스 캡처]

JS에 이런 기능이 있는지 몰랐습니다. 사용이 매우 간단합니다.
캡처 설정: this.Drag.setCapture()
캡처 취소 : this.Drag.releaseCapture().
하는 일: 지정된 개체에 마우스 캡처를 설정합니다. 이 개체는 현재 응용 프로그램이나 전체 시스템에 대한 모든 마우스 입력을 받습니다.
그래도 이해가 안 되시면 드래그 앤 드롭 시 브라우저 밖으로 마우스를 드래그해 보시고 드래그가 계속되는 것을 확인하실 수 있습니다.
마우스 캡쳐가 없으면 무효가 됩니다.
그러나 mouseup은 브라우저 외부에서 트리거될 수 없지만 대신 losscapture 이벤트를 사용할 수도 있습니다.

addEventHandler(this.Drag, "losecapture", this._fS)
this.Drag. setCapture();
ff 창에 흐림을 추가하면 이벤트가 중지됩니다. Yuetu는 Alt 탭으로 인한 mouseup 손실을 감지하는 것이 완벽하다고 추가했습니다.

드래그 앤 드롭 프로그램이 완성되었습니다.