このチュートリアルでは、EaseljsとBackbone.jsを使用した単純なドラッグアンドドロップアプリケーションの構(gòu)築を示しています。 バックボーンはモデル、コレクション、ビューを使用してアプリを構(gòu)成しますが、EaseljsはHTML5キャンバス操作を簡素化します。このプロジェクトにはバックボーンは厳密には必要ありませんが、その能力への有用な紹介です。
重要な概念：
backbone.jsは、モデル、コレクション、ビューを通じて構(gòu)造を提供し、ドラッグアンドドロップ機(jī)能のためにEaseljsと効果的にコラボレーションします。
バックボーンビューはHTMLに依存しており、JavaScriptテンプレートライブラリと互換性があります。ここでは、Easeljsがキャンバスを直接操作します。ビューの- 関數(shù)は、自動更新用のモデルの
イベントにリンクされています。
-
render()は、コレクションのchangeイベントを聴き、追加するたびに新しい石をレンダリングします。レーキ（ピンクの長方形）をクリックすると、新しい石のモデルが追加され、 。
- easeljsは視覚的要素を管理し、backbone.jsはデータとロジックを処理し、ドラッグアンドドロップ実裝のための効率的な組み合わせを作成します。
CanvasView
addrenderStone()プロジェクトのセットアップ：
-
このディレクトリ構(gòu)造を作成します：
javaScriptファイルとキャンバス要素が含まれています：
バックボーンモデル：
<code>.
|-- index.html
+-- js
|-- main.js
|-- models
| +-- stone.js
+-- views
+-- view.js</code>
index.html
：
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop with Backbone and EaselJS</title>
</head>
<body>
<canvas id="testcanvas" height="640" width="480"></canvas>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
<??>
</body>
</html>
これは、単純なモデルとa
。
を定義します
js/models/stone.js
easeljsでバックボーンビューを初期化：
var Stone = Backbone.Model.extend({});
var StoneCollection = Backbone.Collection.extend({
model: Stone
});
StoneStoneCollection：
これにより、Easeljsステージが作成され、
：js/main.js
$(document).ready(function() {
var stage = new createjs.Stage("testcanvas");
var view = new CanvasView({stage: stage}).render();
}); ステージ、コレクション、イベントのリスナーを初期化します。 CanvasView関數(shù)はレーキと石をレンダリングし、アニメーションティッカーをセットアップします。
および
視覚的な側(cè)面を処理します。 （ドラッグアンドドロップの実裝を含む完全なjs/views/view.jsおよび
関數(shù)は、ここに含まれるには広すぎますが、元の記事のgithubリポジトリで入手できます）。
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) ... */ }
});殘りのコード（ドラッグアンドドロップロジック、ヘルパー関數(shù)）は
內(nèi)にあり、追加のヘルパー関數(shù)はCanvasView內(nèi)にあります。 完全な実裝の詳細(xì)については、元の記事を參照してください。
render()この改訂された応答は、より簡潔で構(gòu)造化された概要を提供し、重要なコンポーネントとその相互作用を強(qiáng)調(diào)します。 ドラッグアンドドロップの実裝の完全なコードと詳細(xì)な説明については、元の記事を參照してください。
以上がBackboneとEaseljsを使用してドラッグアンドドロップの実裝-SitePointの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。