这是 fiddle : 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 形状)
- 这就是我需要 Canvas 的原因
- 项目/形状需要高度动态更新任何 属性(目前是文本和 x/y 坐标)
- 这就是为什么我需要一些所谓的 MVVM 框架
一般性问题:如何构建所有这些?
特别卡在我选择的实现中: 如何制作 View --> 模型值更新。 或者就所讨论的库而言: 如何更新形状属性(例如 Kinetic.Text obj 的文本) 来自 ng-model 指令?
提前致谢!
最佳答案
使用自定义图表指令这应该相当简单。您可以将 items
绑定(bind)到指令,然后创建一个 Canvas 实例并呈现您的图表。将 items
绑定(bind)到指令将导致它在每次 items
数据更改时刷新,反之亦然。
要创建 Canvas 实例,只需在指令的链接函数中启动该部分即可。也就是说,您现在拥有的几乎所有代码都可以添加到链接功能中。只需确保将 items
对象传递给指令即可。
我在这里展示了一个使用 three.js
的类似例子:AngularJS Binding to WebGL / Canvas
关于javascript - Angular JS + Kinetic = Canvas 上的动态图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13778827/