2021SC@SDUSC
검토
지난 시간 기하학적 의미에서 선에 대해 논의한 후 그래픽 패키지 아래의 파일에 대해 논의하겠습니다.주로 드래그, 그라데이션, 선, 링크, 모양, 변형 및 기타 폴더가 있으며 다양한 이미지 이미지 조작을 나타냅니다. 아래에서 주로 공부합니다. 이 패키지의 Node.js 콘텐츠입니다.
그래픽 패키지
드래그 패키지
이 패키지에는 DragDropMgr.js 및 Draggable.js 파일이라는 두 가지 기본 파일이 있습니다. 이 파일에서 DragDropMgr은 여러 요소를 동시에 드래그 앤 드롭하는 것을 지원하는 글로벌 드래그 관리자이며 Ctrl 키를 누른 상태에서 다중 선택을 실현할 수 있습니다. key; js 파일은 끌어서 놓기 기능을 구현하기 위한 것입니다. 끌어서 놓기 기능이 필요한 모든 요소는 mixin으로 구현할 수 있습니다. 이 구현은 앞서 언급한 이벤트 처리 메커니즘에 따라 다릅니다. mixin으로 구현된 클래스는 이벤트 지원을 제공하려면 미리 mixin eventful 인터페이스의 기본 구현이어야 합니다. 아래에서 이 두 클래스에 대해 별도로 자세히 설명합니다.
DragDropMgr.js
이것은 전역 드래그 앤 드롭 관리자로서 도구 클래스이며 주로 생성자, 모니터링 설정, 모니터링 중지, 드래그 시작, 드래그 중, 드래그 종료, 선택 지우기 및 현재 선택 가져오기 이러한 메서드의 기능은 다음과 같습니다. 시스템의 모든 요소로서 다음의 주요 정보를 분석합니다.
시작목록
모니터링을 시작하는 주요 목적은 마우스를 모니터에 바인딩하고 마우스를 눌러 이벤트를 트리거하는 것입니다. 구체적으로 다음 코드: mousedown 이벤트가 바인딩됩니다.
startListen() {
this.dispatcher.on('mousedown', this.dragStart, this);
return this;
}
중지듣기
이 기능의 주요 기능은 모니터링을 중지하는 것입니다.이 기능은 주로 모든 모니터링을 삭제하는 동시에 다음과 같이 모두 0으로 되돌립니다.
stopListen() {
this.clearSelectionMap();
this._draggingItem = null;
this._dropTarget = null;
this._x = 0;
this._y = 0;
this.dispatcher.off('mousedown', this.dragStart, this);
this.dispatcher.off('pagemousemove', this.dragging, this);
this.dispatcher.off('pagemouseup', this.dragEnd, this);
return this;
}
이 함수의 주요 목적은 mousedown 모니터, pagemousemove 모니터 및 pagemouseup 모니터의 세 모니터를 해제한 다음 해제된 개체를 반환하는 것입니다.
dragStart, 드래그, 드래그 종료
이 세 가지 기능은 끌기 시작, 끌기 중, 끌기 끝에서 발생하는 주기로 발생합니다. 드래그가 시작될 때 먼저 객체를 이벤트에 바인딩하고 먼저 이벤트가 발송되었는지 여부를 판단한 다음 이벤트를 판단하고 Ctrl 키를 누르고 요소를 선택할지 여부를 판단한 다음 선택 작업을 수행하여 각각의 좌표를 결정하고 그런 다음 pagemousemove 및 pagemouseup 바인딩 작업을 수행한 다음 루프를 통해 모든 디스패처를 순회하고 해당 작업 이벤트로 디스패치합니다.
dragStart(e) {
let el = e.target;
let event = e.event;
this._draggingItem = el;
if (!el) {
this.clearSelectionMap();
return;
}
if (!el.draggable) {
return;
}
if (!event.ctrlKey && !this.selectionMap.get(el.id)) {
this.clearSelectionMap();
}
el.dragging = true;
this.selectionMap.set(el.id, el);
this._x = e.offsetX;
this._y = e.offsetY;
this.dispatcher.on('pagemousemove', this.dragging, this);
this.dispatcher.on('pagemouseup', this.dragEnd, this);
this.selectionMap.forEach(el => {
this.dispatcher.dispatchToElement(this.normalizeParam(el, e), 'dragstart', e.event);
});
}
그 다음에는 내용이 없는 드래그가 있는데 주로 현재 위치 정보를 파악한 다음 마우스 위치를 바인딩하여 현재 드래그 개체를 재할당합니다.항상 현재 개체의 draggingTtem이 동일한지 판단하는 데 주의하십시오. 현재 디스패처로서 현재 객체의 디스패처의 이벤트 분배 에이전트에서 캔버스에 그려진 요소들에게 이벤트를 분배한다. 이러한 방식으로 실시간 끌어서 놓기 작업이 실현됩니다.
마지막은 드래그 앤 드롭을 끝내는 것으로 프로세스는 더 간단하며 주로 pagemousemove 및 pagemouseup을 해제한 다음 현재 디스패처를 판단하여 이벤트 배포 에이전트를 바인딩하여 캔버스에 그려진 요소에 이벤트를 배포합니다.
dragEnd(e) {
this.selectionMap.forEach(el => {
el.dragging = false;
this.dispatcher.dispatchToElement(this.normalizeParam(el, e), 'dragend', e.event);
});
this.dispatcher.off('pagemousemove', this.dragging, this);
this.dispatcher.off('pagemouseup', this.dragEnd, this);
if (this._dropTarget) {
this.dispatcher.dispatchToElement(this.normalizeParam(this._dropTarget, e), 'drop', e.event);
}
this._dropTarget = null;
}
dragDropMgrSummary
js는 주로 글로벌 드래그 앤 드롭 관리자로, 듣기 시작, 듣기 중지, 끌기 시작, 진행 중인 끌기, 끌기 종료 등과 같은 이벤트 처리를 포함하여 일반적으로 드래그 앤 드롭을 처리합니다. 글로벌 드래그 달성에 대한 일반적인 개요.
Draggable.js
이 파일은 주로 끌어서 놓기 기능이며 모든 끌어서 놓기는 종속성 이벤트 메커니즘을 구현하는 이 클래스의 구현에 혼합될 수 있습니다. 그들 중 가장 중요한 것은 단 하나의 이동 방법입니다.
이 방식은 요소를 이동시켜 요소와 이벤트의 x, y좌표를 구한 후 수평인지 수직인지 일치시켜 x, y에 값을 할당한 후 트리거하는 것이 주 목적이다. 위치 속성 this.trigger('moving', this);애니메이션을 설정할 때 움직임 이벤트. this.dirty();요소를 더티로 표시한 다음 데이터를 업데이트하고 동시에 afterMove 이벤트를 트리거하고 afterMove 함수를 호출합니다.이 함수는 주로 요소가 이동한 후에 실행되는 후크 함수와 같습니다. Vue.js의 vm 수명 주기에 있는 후크와 비슷합니다.
요약하다
위에서 Drag에서 두 개의 js 파일을 주로 분석했는데, 이 두 파일은 주로 drag 기능을 구현하기 위해 설계되었으며, 주요 메소드부터 분석하여 처리한 다음, 이러한 내용은 이벤트 부분과 관련이 있습니다. 이벤트 처리를 이해한 후, 우리는 콘텐츠의 이 부분을 더 명확하게 이해하고 더 쉽게 분석할 수 있습니다.