Здравейте!

Нуждая се от помощ за един редактор на изображения.

Накратко: Качила съм предварително обработени Стикери с еднакъв размер за да се наслагват правилно, както в по долното изображение, когато се качват самостоятелно се получава. Пример:

http://bg-art.in/test/img/2.gif

 

Но, когато ползвам опцията Стикери си ги преоразмерява по друг начин... намалени и изместени....

 

Търся решение за изваждането на Стикерите в реален размер, а ако може да се преоразмеряват автоматично спрямо първоначално зададените стойности - още по-добре.

 

Естествено срещу всички Нормални изисквания за заплащане 👍

 

Редактирано 12 май 20224 г. от Ice_Star (преглед на промените)

• Програмиране 
•  
• Javascript/CSS

Каква е връзката?

преди 32 минути, Ice_Star написа:

един редактор на изображения.

Кой?

Нямаме никаква представа какво се случва точно след като сложиш такъв стикер. Има ли как да покажеш релевантно парче от кода? Опитай да сложиш breakpoint/debugger в този момент и да огледаш какво става.

преди 19 минути, killchain написа:

Нямаме никаква представа какво се случва точно след като сложиш такъв стикер. Има ли как да покажеш релевантно парче от кода? Опитай да сложиш breakpoint/debugger в този момент и да огледаш какво става.

Като гледам, това не е код, но най-вероятно това ще е поредната тема, която ще остане без отговор на въпросите от автора...

преди 9 минути, Raze написа:

Като гледам, това не е код, но най-вероятно това ще е поредната тема, която ще остане без отговор на въпросите от автора...

Е, все нещо трябва да я движи тази цялата интерактивност, не става само със CSS.

Пробвах с дебъгера, какво ли не променях...

Ето Ви линк: https://bg-art.in/test/

Най-интересното е, че стикерите са с размер 711 х 499 пх и когато задам първоначално 800 х 900 що годе ги преоразмерява правилно, а при 800 х 600 ги намалява - точно там пропускам нещо...

Това на двата скрийншота е част от стиловете (CSS). Интересуваше ме какво става в JavaScript кода при натискане на бутона "Създайте" - коя функция се вика, с какви параметри, как се създава и подава обектът, който държи стикера и т.н.

преди 6 часа, Ice_Star написа:

Най-интересното е, че стикерите са с размер 711 х 499 пх и когато задам първоначално 800 х 900 що годе ги преоразмерява правилно, а при 800 х 600 ги намалява - точно там пропускам нещо...

Прегледах бегло как работи това нещо.
Останах с впечатление, че при позиционирането на графичните компоненти се използва много активно
position: absolute а не, да кажем position: relative

Става въпрос за общия начин на мислене.
Когато се разполага някой графичен компонент вътре в някоя правоъгълна област,
неговите размери и координати трябва да са относителни (relative) спрямо координатната система на обхващащия го правоъгълник.

Би трябвало преди да програмирате да обмислите внимателно как работите с координатите на всеки графичен елемент.
Ако общия подход е с използване предимно на absolute вместо relative разполагане,
тогава могат да бъдат допуснати куп грешки, които да се проявяват на някои места.

Ако общата логика е правилна не би се стигнало до такива моменти да работи правилно при една конкретна 
стойност, например 900, а при друга да не работи правилно.
А сега би могло да има и други скрити грешки, които при по-внимателно тестване да се открият.
 

преди 5 часа, killchain написа:

Това на двата скрийншота е част от стиловете (CSS). Интересуваше ме какво става в JavaScript кода при натискане на бутона "Създайте" - коя функция се вика, с какви параметри, как се създава и подава обектът, който държи стикера и т.н.

Ето целия контролер, но не мисля, че е от JavaScript

Spoiler

angular.module('image.shapes')

.controller('StickersController', ['$scope', '$rootScope', 'canvas', 'simpleShapes', 'history', 'settings', function($scope, $rootScope, canvas, simpleShapes, history, settings) {
	$scope.shapes = simpleShapes;
    $scope.opacity = 0.9;

    $rootScope.$on('settings.ready', function() {
        var stickers = settings.get('stickers');

        for (var i = stickers.length - 1; i >= 0; i--) {
            stickers[i].items = new Array(stickers[i].items);
        };

        $scope.categories = stickers;
    });

    $scope.activeCategory = 'doodles';

    $scope.activeStickerIsSvg = function() {
        var obj = canvas.fabric.getActiveObject();

        return obj && angular.isDefined(obj.svgUid);
    };

    $scope.isPanelEnabled = function() {
        var obj = canvas.fabric.getActiveObject();
        return obj && obj.name === 'sticker' && $rootScope.activeTab === 'stickers';
    };

    $scope.setActiveCategory = function(name) {
        if ($scope.activeCategory === name) {
            $scope.activeCategory = false;
        } else {
            $scope.activeCategory = name;
        }
    };

    $scope.setOpacity = function(opacity) {
        simpleShapes.getShape('sticker').setOpacity(opacity);
        canvas.fabric.renderAll();
    };

    $scope.setColor = function(color) {
        var obj = simpleShapes.getShape('sticker');

        if (obj.isSameColor && obj.isSameColor() || ! obj.paths) {
            obj.setFill(color);
        }
        else if (obj.paths) {
            for (var i = 0; i < obj.paths.length; i++) {
                obj.paths[i].setFill(color);
            }
        }

        canvas.fabric.renderAll();
    };

    $scope.addToCanvas = function(category, index, e) {
        if ($scope.loading) return;
        $scope.loading = true;
        $scope.openPanel('stickers', e);

        if (category.type === 'svg') {
            fabric.loadSVGFromURL('assets/images/stickers/'+category.name+'/'+index+'.'+category.type, function (objects, options) {
                var image = fabric.util.groupSVGElements(objects, options);
                //var image = new fabric.Image(img);
                image.name = 'sticker';
                canvas.fabric.add(image);
                image.scaleToHeight((40 / 100) * canvas.fabric.getHeight());

                image.center();
                image.setCoords();
                canvas.fabric.setActiveObject(image);
                canvas.fabric.renderAll();

                $scope.$apply(function() {
                    $scope.loading = false;
                });

                history.add('Added: Sticker', 'favorite');
            });
        } else {
            fabric.util.loadImage('assets/images/stickers/'+category.name+'/'+index+'.'+category.type, function(img) {
                var image = new fabric.Image(img);
                image.name = 'sticker';
                canvas.fabric.add(image);
                image.center();
                image.setCoords();
                image.scaleToHeight((40 / 100) * canvas.original.height);

                canvas.fabric.setActiveObject(image);
                canvas.fabric.renderAll();

                $scope.$apply(function() {
                    $scope.loading = false;
                });

                history.add('Added: Sticker', 'favorite');
            });
        }
    }
}]);

А това е на canvas.js първоначално зададения размер

Spoiler

angular.module('ImageEditor')

.service('canvas', ['$rootScope', '$mdDialog', 'keybinds', function($rootScope, $mdDialog, keybinds) {

	var canvas = {

        original: {},

        //store window width and height so we don't execute
        //functions unnecessarily on resize event if they didn't change
        oldWindowDimensions: {
            width: window.innerWidth,
            height: window.innerHeight
        },

		mainImage: false,
		fabric: false,
		ctx: false,
		container: false,
		viewport: false,
		offset: false,
		element: false,

        minWidth: 50,
        minHeight: 50,

		imageStatic: {
            locked: true,
			selectable: false,
	      	evented: false,
	      	lockMovementX: true,
	      	lockMovementY: true,
	      	lockRotation: true,
	      	lockScalingX: true,
	      	lockScalingY: true,
	      	lockUniScaling: true,
	      	hasControls: false,
	      	hasBorders: false
		},

        destroy: function() {
            this.fabric.dispose();
            this.mainImage = false;
            this.fabric = false;
            this.ctx = false;
            this.container = false;
            this.viewport = false;
            this.offset = false;
            this.element = false;
            this.original = {};
            this.currentZoom = 1;
            $rootScope.editorCustomActions = {};
            $(window).off('resize');
            keybinds.destroy();
        },

		start: function(url) {
            this.element = document.getElementById('canvas');
            this.fabric = new fabric.Canvas('canvas');
            this.ctx = this.fabric.getContext('2d');
            this.container = $('.canvas-container');
            this.viewport = document.getElementById('viewport');
            $rootScope.editorCustomActions = {};

            this.fabric.selection = false; 
            this.fabric.renderOnAddRemove = false;

            fabric.Object.prototype.borderColor = '#2196F3';
            fabric.Object.prototype.cornerColor = '#2196F3';
            fabric.Object.prototype.transparentCorners = false;

            if ( ! url) url = $rootScope.getParam('url');

            if (url) {
                this.loadMainImage(url);
                $rootScope.started = true;
            } else if ($rootScope.getParam('blankCanvasSize')) {
                var size = $rootScope.getParam('blankCanvasSize');
                this.openNew(size.width, size.height, 'newCanvas');
                $rootScope.started = true;
            }

            if ( ! $rootScope.started && ! $rootScope.isIntegrationMode && ! $rootScope.delayEditorStart) {
                $mdDialog.show({
                    template: $('#main-image-upload-dialog-template').html(),
                    controller: 'TopPanelController',
                    clickOutsideToClose: false
                });
            }

            $(window).off('resize').on('resize', function(e) {
                if (canvas.oldWindowDimensions.height !== e.target.innerHeight ||
                    canvas.oldWindowDimensions.width !== e.target.innerWidth) {
                    canvas.fitToScreen();
                }

                canvas.oldWindowDimensions.width = e.target.innerWidth;
                canvas.oldWindowDimensions.height = e.target.innerHeight;
            });

            $rootScope.$emit('canvas.init');

            keybinds.init(this.fabric);

            if ($rootScope.getParam('onLoad')) {
                $rootScope.getParam('onLoad')(this.viewport, $rootScope, window); 
            }
        },

        hideModals: function() {
            $mdDialog.hide();
        },

        mergeObjects: function() {
            canvas.zoom(1);
            this.fabric.deactivateAll();
            var data = this.fabric.toDataURL();
            this.fabric.clear();
            this.loadMainImage(data);
        },

        loadFromJSON: function(design, callback) {
            canvas.fabric.loadFromJSON(design.serialized_editor_state || design.state, function() {
                canvas.fabric.forEachObject(function(obj) {

                    //reapply any filters object used to have
                    if (obj.applyFilters && obj.filters.length) {
                        obj.applyFilters(canvas.fabric.renderAll.bind(canvas.fabric));
                    }

                    //assign new reference to mainImage property
                    if (obj.name == 'mainImage') {
                        canvas.mainImage = obj;
                    }
                });

                if (design.width && design.height) {
                    canvas.fabric.setWidth(design.width);
                    canvas.fabric.setHeight(design.height);
                    canvas.original.height = design.height;
                    canvas.original.width = design.width;
                }

                canvas.fabric.renderAll();
                canvas.fabric.calcOffset();
                canvas.fitToScreen();
                $rootScope.$emit('history.loaded');

                callback && callback(design);
            });
        },

        /**
         * Create a new image with given dimensions.
         *
         * @param {int|string} width
         * @param {int|string} height
         * @param {string|undefined} name
         */
        openNew: function(width, height, name) {
            width = width < this.minWidth ? this.minWidth : width;
            height = height < this.minHeight ? this.minHeight : height;

            this.fabric.clear();
            this.fabric.setWidth(width);
            this.fabric.setHeight(height);
            this.fabric.renderAll();
            canvas.fitToScreen();

            //save the dimensions so we can scale images opened later to them
            $rootScope.userPreset = {
                width: width,
                height: height,
                name: name
            };

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

            $rootScope.$emit('canvas.openedNew');
        },

        center: function(obj) {
            obj.center();

            if (canvas.zoom > 100) {
                obj.setLeft(10);
                obj.setTop(35);
            }

            obj.setCoords();
        },

        serialize: function() {
            return this.fabric.toJSON(['selectable', 'name']);
        },

		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) {
                    if (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;

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

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

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

        /**
         * Open image at given url in canvas.
         *
         * @param {string} url
         */
        openImage: function(url) {
            canvas.zoom(1);
            fabric.util.loadImage(url, function(image) {
                if ( ! image) return;

                var object = new fabric.Image(image);
                object.name = 'image';

                //use either main image or canvas dimensions as outter boundaries for scaling new image
                var maxWidth  = canvas.mainImage ? canvas.mainImage.getWidth() : canvas.fabric.getWidth(),
                    maxHeight = canvas.mainImage ? canvas.mainImage.getHeight() : canvas.fabric.getHeight();

                //if image is wider or heigher then the current canvas, we'll scale id down
                if (object.width >= maxWidth || object.height >= maxHeight) {

                    //calc new image dimensions (main image height - 10% and width - 10%)
                    var newWidth  = maxWidth - (0.1 * maxWidth),
                        newHeight = maxHeight - (0.1 * maxHeight),
                        scale     = 1 / (Math.min(newHeight / object.getHeight(), newWidth / object.getWidth()));

                    //scale newly uploaded image to the above dimesnsions
                    object.scaleX = object.scaleX * (1 / scale);
                    object.scaleY = object.scaleY * (1 / scale);
                }

                //center and render newly uploaded image on the canvas
                canvas.fabric.add(object);
                object.left = (canvas.fabric.getWidth() - object.getWidth()) / 2;
                object.top = (canvas.fabric.getHeight() - object.getHeight()) / 2;
                object.setCoords();
                canvas.fabric.setActiveObject(object);
                canvas.fabric.renderAll();

                canvas.fitToScreen();
            });
        },

        getDataURL: function(options) {
            if ( ! options) options = {};

            //ignore zoom when getting data url
            options.multiplier = 1 / canvas.currentZoom;

            return this.fabric.toDataURL(options);
        },

        currentZoom: 1,

        zoom: function(scaleFactor) {
            this.fabric.setZoom(scaleFactor);
            this.fabric.setHeight(this.original.height * scaleFactor);
            this.fabric.setWidth(this.original.width * scaleFactor);

            this.currentZoom = scaleFactor;
        },

        fitToScreen: function () {
            var maxWidth  = canvas.viewport.offsetWidth - 40,
                maxHeight = canvas.viewport.offsetHeight - 120,
                outter    = canvas.mainImage || canvas.fabric,
            	scale     = Math.min(maxHeight / outter.getHeight(), maxWidth / outter.getWidth());

            if (outter.getHeight() > maxHeight || outter.getWidth() > maxWidth) {
                canvas.zoom(scale); 
            }
        }
	};

	return canvas;

}]);

 

 

 

преди 5 часа, NVJ написа:

Прегледах бегло как работи това нещо.
Останах с впечатление, че при позиционирането на графичните компоненти се използва много активно
position: absolute а не, да кажем position: relative

Става въпрос за общия начин на мислене.
Когато се разполага някой графичен компонент вътре в някоя правоъгълна област,
неговите размери и координати трябва да са относителни (relative) спрямо координатната система на обхващащия го правоъгълник.

Би трябвало преди да програмирате да обмислите внимателно как работите с координатите на всеки графичен елемент.
Ако общия подход е с използване предимно на absolute вместо relative разполагане,
тогава могат да бъдат допуснати куп грешки, които да се проявяват на някои места.

Ако общата логика е правилна не би се стигнало до такива моменти да работи правилно при една конкретна 
стойност, например 900, а при друга да не работи правилно.
А сега би могло да има и други скрити грешки, които при по-внимателно тестване да се открият.
 

Това вече го опитах... но не съм пробвала с relative !important

Съвсем набързо като погледна - набиват ми се на очи някакви магически числа (тези 40 / 100), които не се знае какво правят. Можеш там, където се вика image.scaleToHeight() (на две места е според вида на картинката), да сложиш "debugger;" точно над него - така като го пуснеш в браузър с отворена конзола, изпълнението ще спре и ще можеш да видиш какво става с размерите на този canvas - може би от него идва грешката. А стиловете не са ми сила, там не мога да помогна много.

преди 6 минути, killchain написа:

Съвсем набързо като погледна - набиват ми се на очи някакви магически числа (тези 40 / 100), които не се знае какво правят. Можеш там, където се вика image.scaleToHeight() (на две места е според вида на картинката), да сложиш "debugger;" точно над него - така като го пуснеш в браузър с отворена конзола, изпълнението ще спре и ще можеш да видиш какво става с размерите на този canvas - може би от него идва грешката. А стиловете не са ми сила, там не мога да помогна много.

Ще опитам... аз пък точно от javascript не разбирам нищо.... веднъж открия ли от къде идва ще е по-лесно. Иначе да и на мен ми се набиха 40 / 100, но не видях нещо да се случва като ги промених. Благодаря!