Question

我只是需要一个关于在哪里查看或从哪里开始的建议我现在很困惑。不确定这是CSS问题，javascript还是fabric.js

问题： - 我正在为画布添加背景图像，有时它表现得很奇怪。并且画布有时会在点击时扭曲，有时在调整大小时，有时只是没有做任何事情。但这并不总是发生。

这是两个有问题的视频：

https://jumpshare.com/v/4FU3xWjqk4h6j0OwqaFs（这是没有的什么也不做）。
https://jumpshare.com/v/tBS7NJC5VgccWnIssETw（这是我点击画布）

这是我向canvas添加图片的方式（通过API获取网址）：

  $scope.openBlob = function($event, imageURL) {

            $rootScope.isLoading();
            $rootScope.centerSpinner();

            if ($rootScope.currentTab === 1) {
                var upload_thumb = angular.element($event.target.parentElement);
                var circular = angular.element('<md-progress-circular md-mode="indeterminate" id="circular-images" md-diameter="30" ng-show="isAlsoLoading"></md-progress-circular>');
                $compile(circular)($scope);
                upload_thumb.prepend(circular);

            } else {
                var upload_thumb = angular.element($event.target.parentElement);
                var circular = angular.element('<md-progress-circular md-mode="indeterminate" id="circular-new-middle" md-diameter="30" ng-show="isAlsoLoading"></md-progress-circular>');
                $compile(circular)($scope);
                upload_thumb.prepend(circular);
            }

            $rootScope.isAlsoLoading = true;

            $http({
                method: "GET",
                url: imageURL.full,
                responseType: "blob"
            }).then(
                function(res) {
                    var reader = new FileReader();
                    reader.readAsDataURL(res.data);
                    reader.onload = function(e) {
                        canvas.loadMainImage(e.target.result);
                        $rootScope.started = true;
                        $rootScope.uploaded = true;
                        $rootScope.changeStyling();
                    };
                },
                function(res) {
                    console.log("For some reasons it failed to open", res);
                });

            if ($rootScope.currentTab === 1) {
                $rootScope.$on('editor.mainImage.loaded', function() {
                    $rootScope.isAlsoLoading = false;
                    upload_thumb.find("#circular-images").remove();
                    $rootScope.resetFilters();
                    $rootScope.isNotLoading();
                });
            } else {
                $rootScope.$on('editor.mainImage.loaded', function() {
                    $rootScope.isAlsoLoading = false;
                    upload_thumb.find("#circular-new-middle").remove();
                    $rootScope.resetFilters();
                    $rootScope.isNotLoading();
                });
            }
        }

LoadMainImage函数内容：

  loadMainImage: function(url, height, width, dontFit, callback) {
                var object;

                fabric.util.loadImage(url, function(img) {

                    //img.crossOrigin = 'anonymous';

                    object = new fabric.Image(img, canvas.imageStatic);
                    object.name = 'mainImage';

                    if (width && height) {
                        object.width = width;
                        object.height = height;
                    }

                    canvas.mainImage = object;

                    canvas.fabric.forEachObject(function(obj) {
                        console.log('image object', obj);
                        if (obj && obj.name == 'mainImage') {
                            canvas.fabric.remove(obj);
                        }
                    });

                    canvas.fabric.add(object);
                    object.top = -0.5;
                    object.left = -0.5;
                    object.moveTo(0);

                    canvas.fabric.setHeight(object.height);
                    canvas.fabric.setWidth(object.width);

                    canvas.original.height = object.height;
                    canvas.original.width = object.width;

                    $rootScope.canvaswidth = canvas.original.width;
                    $rootScope.canvasheight = canvas.original.height;

                    $rootScope.calculateImageType(canvas.original.width, canvas.original.height);

                    if ($rootScope.gridadded) {
                        $rootScope.removeGrid();
                        $rootScope.addGrid();
                    }

                    if (!dontFit) {
                        canvas.fitToScreen();
                    }

                    $rootScope.$apply(function() {
                        $rootScope.$emit('editor.mainImage.loaded');
                    });

                    if (callback) {
                        callback();
                    }
                });
            },

适合屏幕功能：

   $scope.fitToScreen = function () {
        $scope.zoom = canvas.currentZoom * 100;

        if (canvas.mainImage) {
            var oWidth = canvas.mainImage.width,
                oHeight = canvas.mainImage.height;
        } else {
            var oWidth = canvas.original.width,
                oHeight = canvas.original.height;
        }

        var maxScale = Math.min(3582 / oHeight, 5731 / oWidth) * 100,
            minScale = Math.min(141 / oHeight, 211 / oWidth) * 100;

        $scope.maxScale = Math.ceil(maxScale);
        $scope.minScale = Math.ceil(minScale);

        canvas.zoom(canvas.currentZoom);
    };

更新：我假设它可能正在缩放（放大和缩小问题）

画布扭曲自己和移动（fabric.js）

0 个答案: