Как нарисовать изображение из массива пути SVG, используя imageMagick в PHP - PullRequest
0 голосов
/ 01 октября 2018

Я работаю над веб-проектом, который позволяет пользователям создавать визитные карточки.и я использую библиотеку Fabric js в Codeigniter, я конвертирую Canvas в JSON для создания изображения с использованием imageMagick, и я могу печатать изображения, когда в дизайне использовались только изображения, но когда я использую svg-строку в canvas, и конвертироватьЯ получаю эти данные, и я не знаю, как создать изображение из этих данных с помощью imageMagick.Пожалуйста, помогите.

stdClass Object
            (
                [type] => path
                [version] => 2.3.6
                [originX] => left
                [originY] => top
                [left] => 460.41162159184
                [top] => 201.78296829576
                [width] => 6.04
                [height] => 7.7
                [fill] => rgb(0,0,0)
                [stroke] => 
                [strokeWidth] => 1
                [strokeDashArray] => 
                [strokeLineCap] => butt
                [strokeLineJoin] => miter
                [strokeMiterLimit] => 10
                [scaleX] => 1
                [scaleY] => 1
                [angle] => 0
                [flipX] => 
                [flipY] => 
                [opacity] => 1
                [shadow] => 
                [visible] => 1
                [clipTo] => 
                [backgroundColor] => 
                [fillRule] => nonzero
                [paintFirst] => fill
                [globalCompositeOperation] => source-over
                [transformMatrix] => 
                [skewX] => 0
                [skewY] => 0
                [path] => Array
                    (
                        [0] => Array
                            (
                                [0] => M
                                [1] => 466.95
                                [2] => 203.98
                            )

                        [1] => Array
                            (
                                [0] => c
                                [1] => -2.17
                                [2] => 1.5
                                [3] => -1.59
                                [4] => 5.74
                                [5] => -5
                                [6] => 6
                            )

                        [2] => Array
                            (
                                [0] => c
                                [1] => -1.37
                                [2] => -1.29
                                [3] => -0.99
                                [4] => -4.34
                                [5] => -0.99
                                [6] => -7
                            )

                        [3] => Array
                            (
                                [0] => C
                                [1] => 464
                                [2] => 201.73
                                [3] => 464.84
                                [4] => 202.22
                                [5] => 466.95
                                [6] => 203.98
                            )

                        [4] => Array
                            (
                                [0] => z
                            )

                    )

            )

А вот код JS, который публикует проекты в PHP ImageMagick

savePNG : function(e) {

            savedCanvas[getItem('activeView')] = canvas.toJSON();
            var datas = JSON.stringify(savedCanvas);
            $.ajaxSetup({

                beforeSend: function(){
                    show_loader('show');
                },
            });
            $.post('studio/api/save', {csrf_token_name:token,designs:datas} ).done( function(data){
                console.log(data);
            }).always( function(){
                show_loader('hide');
            })
            return false;
        },

1 Ответ

0 голосов
/ 01 октября 2018

Для графических элементов, таких как пути, прямоугольники, круги, вы можете использовать метод toSVG.Перепишите метод toObject и поместите туда параметр svg.

 toObject : function( propertiesToInclude ) {
        var o = extend( this.callSuper( 'toObject', ['sourcePath', 'pathOffset'].concat( propertiesToInclude ) ), {
            svg  : this.toSVG()
        } );
        return o;
    },

После этого у вас есть элемент svg в php.Попробуйте создать пустой файл SVG с этим содержимым.После этого вы можете использовать его в качестве графического или графического элемента (я предлагаю использовать его в качестве графического элемента, поскольку в результате он имеет векторную форму)

ОБНОВЛЕНИЕ

Расширитьметод toObject из ткани. Объект

//rewrite core
fabric.Object.prototype.toObject = (function (toObject) {
    return function () {

        return fabric.util.object.extend(toObject.call(this), {
            svgString: this.toSVG()
        });
    };
})(fabric.Object.prototype.toObject);

Пример: https://jsfiddle.net/6hbnjfw1/4/

Обновление 2: https://jsfiddle.net/6hbnjfw1/6/

...