Angular JS + Kinetic = 画布上的动态图表答案

【问题标题】：Angular JS + Kinetic = dynamic chart on canvasAngular JS + Kinetic = 画布上的动态图表
【发布时间】：2012-11-26 13:27:06
【问题描述】：

这里是小提琴： 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 --> 模型值更新。或就相关库而言：如何更新形状属性（例如 Kinetic.Text obj 的文本）来自 ng-model 指令？

提前非常感谢！

【问题讨论】：

标签： javascript mvvm angularjs kineticjs

【解决方案1】：

使用自定义图表指令应该相当简单。您可以将items 绑定到该指令，然后该指令创建一个画布实例并呈现您的图表。将items 绑定到指令将导致它在每次items 数据更改时刷新，反之亦然。

要创建画布实例，只需在指令的链接函数中启动该部分。也就是说，您现在拥有的几乎所有代码都可以添加到链接函数中。只需确保将 items 对象传递给指令即可。

我在这里展示了一个使用 three.js 的类似示例：AngularJS Binding to WebGL / Canvas

【讨论】：