Question

我正在尝试在Angular.js应用程序中使用Fabric.js进行画布操作，而我甚至无法使用基础知识。我只是想设置背景图像，但在这一点上，我无法在画布上显示甚至是基本对象。我真的希望将背景图像的大小调整为this question中设置的缩放，但是这个答案也会为我创建一个空白的画布，我想如果我可以的话我可以稍后再做首先得到那里的背景。

这是指令：

app.directive('canvasDirective', function() {
    return {
        restrict: 'A',
        require: '^ngModel',
        link : function ($scope, elem, attrs) {
            var setBackground = function (src) {
                $scope.origImage.src = src;

                //This gives me a blank canvas:
                //$scope.canvas.setBackgroundImage(src, $scope.canvas.renderAll.bind($scope.canvas));

                //This also gives me a blank canvas:
                $scope.origImage.onload = function () {
                    var zoomCanvas = document.createElement("canvas");
                    var zoomCtx = zoomCanvas.getContext("2d");

                    zoomCanvas.width = $scope.origImage.width*$scope.zoom;
                    zoomCanvas.height = $scope.origImage.height*$scope.zoom;
                    // draw a scaled version of fullBk to zoomCanvas
                    zoomCtx.drawImage($scope.origImage,
                        0,0,$scope.origImage.width,$scope.origImage.height,
                        0,0,zoomCanvas.width,zoomCanvas.height);
                    $scope.canvas.setBackgroundImage( zoomCanvas.toDataURL(), function(){
                        $scope.canvas.backgroundImageStretch=true;
                        $scope.canvas.renderAll();
                    });
                };

                //This rectangle does not appear on the canvas
                var rect = new fabric.Rect({
                    left: 100,
                    top: 100,
                    fill: 'red',
                    width: 200,
                    height: 200
                });

                $scope.canvas.add(rect);
                $scope.canvas.renderAll();
            };
            setBackground($scope.pageSrc);

            $scope.$watch(attrs.ngModel, function (newVal, oldVal) {
                if (oldVal !== newVal) {
                    setBackground(newVal);
                }
            }, true);
        }
    };
});

这是部分：

<div>
    <canvas canvas-directive id="editPageArea"
            width="{{zoom*origImage.width}}" height="{{zoom*origImage.height}}"
            ng-model="pageSrc"
            style="border:1px solid red">
    </canvas>

</div>

如果我将图像源传递给我的setBackground函数，那么由于红色边框，我可以看到画布的宽度和高度正确设置。 origImage图像，如果我显示它，显示正确的图像，所以我知道src网址是正确的。如果我使用调试器，我可以验证是否正在调用所有代码行，直到canvas.setBackgroundImage的内部。但是，画布仍为空白。画布内也没有绘制红色矩形。我做错了什么？

Answer 1

我的问题与问题中的任何内容无关。上面的代码工作正常。问题是，我在说这个：

$scope.canvas = new fabric.Canvas('editPageArea');

在上面部分加载之前。我之前没有意识到这一点的原因是，如果我尝试使用不存在的元素启动FabricJS画布对象，我预计会发生错误。此外，作为Angular的新手，我仍然无法理解事物加载的顺序。

Fabric JS在Angular JS中无法正常运行

1 个答案: