2

ここにフィドルがあります： http://jsfiddle.net/paska27/L6VAe/5/

コード（そうでなければ不平を言う）：

<div ng-app ng-controller="MainCtrl"
ng-init="list = [
{name: 'Sergey', age: 26},
{name: 'Johan', age: 27},
{name: 'Iwan', age: 28}
];">
    <div id="box" ng-controller="PlaneCtrl"></div>       
    <input ng-model="currentItem.name" />
</div>

/** an extention of Kinetic shape (group, rect or what ever) **/
var Item = function(planeScope, item){
Kinetic.Group.call(this, {
    draggable: true
});

var self = this;

var text = new Kinetic.Text({
    x: 0,
    y: 0,
    text: item.name,
    fontSize: 20,
    fontFamily: 'Calibri',
    textFill: 'green',
    draggable: true
});

self.add(text);

self.name = text.getText();

self.on('dragstart', function(){
   planeScope.$parent.currentItem = self;
   planeScope.$apply();       
});
}
Kinetic.Global.extend(Item, Kinetic.Group);

var MainCtrl = function($scope){
    $scope.currentItem;
}

var PlaneCtrl = function($scope, $element){
    var stage = new Kinetic.Stage({
    container: 'box',
    width: 200,
    height: 200
}),
layer = new Kinetic.Layer();

angular.forEach($scope.list, function(item){
    item = new Item($scope, item);
    layer.add(item);
});

stage.add(layer);   
}

タスク：

  • アイテムを含むある種のチャートを作成する必要があります（ここでは単純にするために、アイテムのみです）
  • アイテムは将来、どのような形状になる可能性があります (実際には、Kinetic.Group の形状)
  • だからキャンバスが必要なんだ
  • アイテム/シェイプは、プロパティを更新するという意味で非常に動的である必要があります (現時点ではテキストと x/y 座標)
  • そのため、いわゆる MVVM フレームワークが必要です

一般的な質問：これをすべて構築する方法は？

私が選択した実現に特定のスタック: veiw を作成する方法 --> モデル値の更新。または問題のライブラリに関して: ng-model ディレクティブから形状プロパティ (Kinetic.Text obj のテキストなど) を更新する方法は?

よろしくお願いします！

4

1 に答える 1

0

これは、カスタム チャート ディレクティブを使用して達成するのはかなり簡単です。をディレクティブにバインドしitemsて、キャンバス インスタンスを作成し、チャートをレンダリングできます。ディレクティブにバインドitemsすると、データが変更されるたびに更新されitemsます。逆の場合も同様です。

キャンバス インスタンスを作成するには、ディレクティブのリンク関数内でその部分を開始するだけです。つまり、現在持っているほとんどすべてのコードをリンク関数に追加できます。itemsオブジェクトをディレクティブに 渡していることを確認してください。

AngularJS Binding to WebGL / Canvas をthree.js使用 した同様の例をここに示します

于 2013-10-22T18:49:36.237 に答える