Правильность написания.
Всем привет. Начал изучать 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; }); }); } Меня интересует правильное ли начало моих мыслей. Или для работы с канвасом лучше добавить фабрику или сервис. Спасибо всем откликнувшимся |
Часовой пояс GMT +3, время: 20:22. |