Fabricjs позволяет вращать и редактировать только первое нажатое изображение - PullRequest
Новая
       3

Fabricjs позволяет вращать и редактировать только первое нажатое изображение

1 голос
/ 29 марта 2019

Я запрограммировал код, который реализует canvas, caman и fabricjs. Это должно вращать, редактировать цвета и сохранять изображение, когда я нажимаю на кнопку. Работает нормально, но только с первым нажатием на изображение. Когда я снова нажимаю на кнопку, чтобы показать другое изображение для издания, на экране отображается изображение, но не разрешается мне его редактировать. Другими словами, если я нажимаю на изображение, то первое нажатое изображение снова показывает для редактирования. Я вызываю команду оповещения, чтобы увидеть, по какому пути возвращалось изображение, и оно возвращается правильно.

Вот мой код: 

TScript::create("
    temp_img_id = '{$id}';
    temp_img = '{$filename->path_filename}';

    var canvas = this.__canvas = new fabric.Canvas('imgFilePreview');
    fabric.Object.prototype.transparentCorners = false;
    fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

    canvas.setHeight(500);
    canvas.setWidth(500);

    fabric.Image.fromURL(temp_img, function(objects){
        var obj = objects.scale(0.75);
        obj.scaleToHeight(350);
        obj.scaleToWidth(350);
        canvas.centerObject(obj);
        canvas.add(obj);

        $('.canvas-container').css({
            'width': '900px',
            'height': '900px',
            'position': 'relative',
            'user-select': 'none'
        });
        $('#canvas').css({
            'border': '1px solid rgb(204, 204, 204)',
            'width': '500px',
            'height': '500px',
            'left': '0px',
            'top': '0px', 
            'touch-action': 'manipulation',
            'user-select': 'none'
        });
        $('.upper-canvas').css({
            'border': '1px solid rgb(204, 204, 204)',
            'width': '500px',
            'height': '500px',
            'left': '0px',
            'top': '0px',
            'touch-action': 'manipulation',
            'user-select': 'none',
            'cursor': 'default'
        });

        $('#canvas').attr({'width': '500', 'height': '500'});
        $('.upper-canvas').attr({'width': '500', 'height': '500'});
        canvas.renderAll();
    });
");

Я запускаю этот код, чтобы выполнить редактирование образа. Я использую платформу adianti, разработанную Пабло Далл'Ольо. Я просто проверяю, возвращались ли пути к изображениям с правильным содержимым. Я не знаю, как я могу решить это. Я искал решения, но безуспешно.

...