Question

我正在尝试使用fabric.js kitchensink示例的代码库在photoshop中实现类似于图层列表的可排序ojact列表。对于列表的可排序功能，我也使用JQuery UI。我正在尝试从另一个项目中采用一些代码，但显然我正在做一些根本错误的事情，因为我无法获得一个填充的列表。

我的控制器看起来像这样：

kitchensink.controller('LayersController', ['$scope', '$rootScope', '$timeout', 'canvas', function($scope, $rootScope, $timeout, canvas) {

    $scope.objects = canvas._objects || [];

    $scope.sortableOptions = {
        items: '.object:visible',
        scroll: false,
        containment: 'parent',
        start: function(e, ui) {
            ui.item.data('start', ui.item.index());
        },
        update: function(e, ui) {
            var start = ui.item.data('start'),
            end   = ui.item.index();


            obj = canvas.getObjects()[start];

            if ( ! obj) return;

            if (end > start) {
                //send object forwards by the amount of objects it passed
                for (var i = 0; i < (end - start); i++) {
                    canvas.bringForward(obj);
                }
            } else {
                //send object backwards by the amount of objects it passed
                for (var i = 0; i < (start - end); i++) {
                    canvas.sendBackwards(obj);
                }
            }

            $timeout(function() {
                canvas.renderAll();
                start = false; end = false;
            });
        },
    }

    $scope.setAsActive = function(object) {
        if (object) {
            canvas.setActiveObject(object);
        }
    };

    $scope.toggleVisibility = function(object) {
        if ( ! object) return;

        if (object.visible) {
            object.set({ visible: false, evented: false, selectable: false, hasBorders: false, hasCorners: false });
        } else {
            object.set({ visible: true, evented: true, selectable: true, hasBorders: true, hasCorners: true });
            canvas.setActiveObject(object);
        }

        canvas.fabric.renderAll();
    };

    $scope.deleteObject = function(object) {
        if (object) {
            canvas.remove(object);
            canvas.renderAll();
        }
    };

    $scope.toggleLock = function(object) {
        if ( ! object) return;

        if (object.locked) {
            object.set({
                locked: false,
                selectable: true,
                evented: true,
                lockMovementX: false,
                lockMovementY: false,
                lockRotation: false,
                lockScalingX: false,
                lockScalingY: false,
                lockUniScaling: false,
                hasControls: true,
                hasBorders: true
            });

            canvas.setActiveObject(object);
        } else {
            object.set({
                locked: true,
                selectable: false,
                evented: false,
                lockMovementX: true,
                lockMovementY: true,
                lockRotation: true,
                lockScalingX: true,
                lockScalingY: true,
                lockUniScaling: true,
                hasControls: false,
                hasBorders: false
            });
        }

        canvas.renderAll();
    }
}])

这就是我试图在我的模板中获取列表的方法 - 我从这里删除了一些与show / hide和delete相关的代码，我在控制器中使用它来保持更简单：

<div id="objects" class="">
    <ul class="objects-panel list-unstyled" ui-sortable="sortableOptions" ng-model="objects">
        <li class="" ng-repeat="object in objects" ng-click="setAsActive(object)" ng-if="!object.ignore">
            <p>Blah</p>
        </li>

        <li ng-if="!canvas.fabric._objects.length" class="text-center">
            <p>No layers yet.</p>
        </li>
    </ul>
</div>

修改

问题出现在代码中。在这里声明画布是错误的：

kitchensink.controller('LayersController', ['$scope', '$rootScope', '$timeout', 'canvas', function($scope, $rootScope, $timeout, canvas)

AngularJS，Fabric.js对象作为列表

0 个答案: