Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2014, 12:10
Новичок на форуме
Отправить личное сообщение для dramoturg Посмотреть профиль Найти все сообщения от dramoturg
 
Регистрация: 25.02.2014
Сообщений: 2

Правильность написания.
Всем привет. Начал изучать 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;
               });
            });
        }

Меня интересует правильное ли начало моих мыслей. Или для работы с канвасом лучше добавить фабрику или сервис.
Спасибо всем откликнувшимся
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Функции для упрощения написания кода Bebarr Swallow Общие вопросы Javascript 2 28.01.2013 03:08
Ищется человек для написания плагина $$ Dobbs Работа 1 09.11.2012 15:19
Какой язык лучше выбрать для написания скрипта? D534364 Общие вопросы Javascript 4 31.07.2012 22:02
Манера написания кода Max01 Серверные языки и технологии 5 07.11.2009 02:09
Совершествуем стиль написания скриптов Mitrandir Events/DOM/Window 6 16.06.2008 09:02