백본 및 Easeljs를 사용하여 드래그 앤 드롭 구현 - sitepoint

이 튜토리얼은 Easeljs 및 Backbone.js를 사용하여 간단한 드래그 앤 드롭 애플리케이션을 구축하는 것을 보여줍니다. 백본은 모델, 컬렉션 및보기로 앱을 구조화하는 반면 Easeljs는 HTML5 캔버스 조작을 단순화합니다. 이 프로젝트에는 백본이 엄격하게 필요하지는 않지만 그 기능에 대한 유용한 소개입니다. 주요 개념 :

<.> backbone.js는 모델, 컬렉션 및보기를 통해 구조를 제공하며 드래그 앤 드롭 기능을 위해 Easeljs와 효과적으로 협력합니다. 백본보기는 HTML-Agnostic이며 JavaScript 템플릿 라이브러리와 호환됩니다. 여기서 Easeljs는 캔버스를 직접 조작합니다. View의 함수는 자동 업데이트를위한 모델의

이벤트에 연결되어 있습니다.

는 컬렉션의 이벤트를 듣고, 추가 할 때마다 새로운 돌을 렌더링합니다. 레이크 (분홍색 사각형)를 클릭하면 새로운 석재 모델이 추가됩니다. easeljs는 시각적 요소를 관리하고 Backbone.js는 데이터와 논리를 처리하여 드래그 앤 드롭 구현을위한 효율적인 조합을 만듭니다.

프로젝트 설정 : 이 디렉토리 구조를 만듭니다 :

에는 JavaScript 파일과 캔버스 요소가 포함되어 있습니다
• 백본 모델 :
• : render() 이것은 간단한 모델과 a change.
를 정의합니다
• Easeljs로 백본보기 초기화 : CanvasView add : renderStone() 이것은 Easeljs 스테이지를 생성하고 . 를 인스턴스화합니다
:

는 무대, 컬렉션 및 이벤트 리스너를 초기화합니다. 함수는 갈퀴와 돌을 렌더링하고 애니메이션 티커를 설정합니다. 시각적 측면을 처리합니다. (Drag-and-Drop 구현을 포함한 완전한

및 기능은 여기에 포함하기에는 너무 광범위하지만 원래 기사의 Github 리포지토리에서 사용할 수 있습니다). 나머지 코드 (드래그 앤 드롭 로직, 헬퍼 함수)는 내에 있고 내에 추가 도우미 기능이 있습니다. 완전한 구현 세부 정보는 원본 기사를 참조하십시오. 이 개정 된 응답은보다 간결하고 구조화 된 개요를 제공하여 주요 구성 요소와 상호 작용을 강조합니다. 완전한 코드와 드래그 앤 드롭 구현에 대한 자세한 설명은 원본 기사를 참조하십시오.

위 내용은 백본 및 Easeljs를 사용하여 드래그 앤 드롭 구현 - sitepoint의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!