Всем привет. Начал изучать AngularJs и ради первого опыта хотел попробовать совместить его с fabric.js.
Только начал вот что у меня получилось.
<div ng-app>
<div ng-controller="FabricJsCtrl">
<table>
<tr>
<td><div id='canvas_container'><canvas style='height:400px;width:400px;border:1px solid #ddd' id="canvas">You have a very old browser... (It does not support HTML5 canvas)</canvas></div></td>
<td>
<div id='layers_menu'>
<button ng-click='addRect()'>Add rect</button>
<div id='shapes_list_conatiner'>
<div>{{canvasShapes().length}} total</div>
<div id="shapes_list" ng-repeat="shape in canvasShapes()">
<div ng-class="{active: shape.get('active')}" class="shape " ng-click='selectShape()'>{{shape.get('fill')}}</div>
</div>
</div>
</div>
</td>
<td>
<div id='timeline'>X: {{currentShape().get('left')}}, Y: {{currentShape().get('top')}}</div>
<div>Test{{activeObject.get('left')}}
</td>
</tr>
</table>
</div>
</div>
function FabricJsCtrl( $scope ) {
var canvas = new fabric.Canvas('canvas');
canvas.setHeight(400);
canvas.setWidth(400);
$scope.canvas = canvas;
$scope.activeObject = null;
$scope.canvasShapes = function() {
if(typeof canvas !== 'undefined') {
return canvas.getObjects();
}
return [];
};
$scope.addRect = function() {
var rect = new fabric.Rect({
left: 20 * $scope.canvasShapes().length,
top: 20 * $scope.canvasShapes().length,
fill: '#000',
width: 30,
height: 30
});
canvas.add(rect);
};
$scope.selectShape = function() {
var shape = this.shape;
canvas.setActiveObject(shape);
$scope.activeObject = shape
};
$scope.currentShape = function() {
if(typeof canvas !== 'undefined') return canvas.getActiveObject();
};
canvas.on("object:selected", function (options, event) {
var object = options.target; //This is the object selected
$scope.$apply(function () {
$scope.activeObject = object;
});
});
canvas.on("object:moving", function (options, event) {
var object = options.target; //This is the object selected
$scope.$apply(function () {
$scope.activeObject = object;
});
});
}
Меня интересует правильное ли начало моих мыслей. Или для работы с канвасом лучше добавить фабрику или сервис.
Спасибо всем откликнувшимся