ホームページ >ウェブフロントエンド >jsチュートリアル >BackboneとEaseljsを使用してドラッグアンドドロップの実装-SitePoint
BackboneとEaseljsを使用してドラッグアンドドロップの実装-SitePoint
- Christopher Nolanオリジナル
- 2025-02-22 09:53:08584ブラウズ
backbone.jsは、モデル、コレクション、ビューを通じて構造を提供し、ドラッグアンドドロップ機能のためにEaseljsと効果的にコラボレーションします。
- バックボーンビューはHTMLに依存しており、JavaScriptテンプレートライブラリと互換性があります。ここでは、Easeljsがキャンバスを直接操作します。ビューの
- 関数は、自動更新用のモデルの イベントにリンクされています。
-
render()は、コレクションのchangeイベントを聴き、追加するたびに新しい石をレンダリングします。レーキ（ピンクの長方形）をクリックすると、新しい石のモデルが追加され、 。
- easeljsは視覚的要素を管理し、backbone.jsはデータとロジックを処理し、ドラッグアンドドロップ実装のための効率的な組み合わせを作成します。
CanvasViewaddrenderStone()プロジェクトのセットアップ： - このディレクトリ構造を作成します：
javaScriptファイルとキャンバス要素が含まれています：
バックボーンモデル：<code>.
|-- index.html
+-- js
|-- main.js
|-- models
| +-- stone.js
+-- views
+-- view.js</code>
index.html
<code class="language-html"><!DOCTYPE html> <title>Drag and Drop with Backbone and EaselJS</title> <canvas id="testcanvas" height="640" width="480"></canvas> </code>
これは、単純なモデルとa
。を定義します
js/models/stone.js
<code class="language-javascript">var Stone = Backbone.Model.extend({});
var StoneCollection = Backbone.Collection.extend({
model: Stone
});</code>
StoneStoneCollection：
これにより、Easeljsステージが作成され、
：js/main.js
<code class="language-javascript">$(document).ready(function() {
var stage = new createjs.Stage("testcanvas");
var view = new CanvasView({stage: stage}).render();
});</code> ステージ、コレクション、イベントのリスナーを初期化します。 CanvasView関数はレーキと石をレンダリングし、アニメーションティッカーをセットアップします。
視覚的な側面を処理します。 （ドラッグアンドドロップの実装を含む完全なjs/views/view.jsおよび
<code class="language-javascript">var CanvasView = Backbone.View.extend({
initialize: function(args) {
this.stage = args.stage;
this.stage.enableMouseOver(20);
this.collection = new StoneCollection();
this.rakeOffsets = { /* ... (rake dimensions) ... */ };
this.listenTo(this.collection, "add", this.renderStone, this);
this.listenTo(this.collection, "remove", this.renderRake, this);
this.listenTo(this.collection, "reset", this.renderRake, this);
},
render: function() {
this.renderRake();
this.stage.update();
createjs.Ticker.addEventListener("tick", this.stage);
createjs.Ticker.setInterval(25);
createjs.Ticker.setFPS(60);
},
renderRake: function() { /* ... (rake rendering and click handler) ... */ },
renderStone: function(model) { /* ... (stone rendering and drag-and-drop logic) ... */ }
});</code>残りのコード（ドラッグアンドドロップロジック、ヘルパー関数）は内にあり、追加のヘルパー関数はCanvasView内にあります。 完全な実装の詳細については、元の記事を参照してください。
render()この改訂された応答は、より簡潔で構造化された概要を提供し、重要なコンポーネントとその相互作用を強調します。 ドラッグアンドドロップの実装の完全なコードと詳細な説明については、元の記事を参照してください。
以上がBackboneとEaseljsを使用してドラッグアンドドロップの実装-SitePointの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
JavaScript html5 html for while include Directory using Event Collection JS function this animation canvas github
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。