Как использовать JQuery Fancy Product Designer - PullRequest
Новая
       30

Как использовать JQuery Fancy Product Designer

1 голос
/ 04 июля 2019

Я реализовал это https://fancyproductdesigner.com/jquery/, который отлично работает. Мой запрос, когда я загружал изображения на демонстрационный сайт , он фиксирует форму продукта. Например, когда я загружаю логотип на колпачок, он гибко фиксирует форму колпачка. Но в моей интеграции это не работает.

мой код: 

<!DOCTYPE HTML>
<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Fancy Product Designer</title>

    <!-- Style sheets -->
    <link rel="stylesheet" type="text/css" href="css/main.css">

    <!-- The CSS for the plugin itself - required -->
    <link rel="stylesheet" type="text/css" href="css/FancyProductDesigner-all.min.css" />

    <!-- Include required jQuery files -->
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>

    <!-- HTML5 canvas library - required -->
    <script src="js/fabric.min.js" type="text/javascript"></script>
    <!-- The plugin itself - required -->
    <script src="js/FancyProductDesigner-all.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        jQuery(document).ready(function() {

            var $yourDesigner = $('#clothing-designer'),
                pluginOpts = {
                    productsJSON: 'json/products.json', //see JSON folder for products sorted in categories
                    designsJSON: 'json/designs.json', //see JSON folder for designs sorted in categories
                    stageWidth: 1200,
                    editorMode: false,
                    smartGuides: true,
                    fonts: [{
                        name: 'Helvetica'
                    }, {
                        name: 'Times New Roman'
                    }, {
                        name: 'Pacifico',
                        url: 'Enter_URL_To_Pacifico_TTF'
                    }, {
                        name: 'Arial'
                    }, {
                        name: 'Lobster',
                        url: 'google'
                    }],
                    customTextParameters: {
                        colors: false,
                        removable: true,
                        resizable: true,
                        draggable: true,
                        rotatable: true,
                        autoCenter: true,
                        boundingBox: "Base"
                    },
                    customImageParameters: {
                        draggable: true,
                        removable: true,
                        resizable: true,
                        rotatable: true,
                        colors: '#000',
                        autoCenter: true,
                        boundingBox: "Base"
                    },
                    actions: {
                        'top': ['download', 'print', 'snap', 'preview-lightbox'],
                        'right': ['magnify-glass', 'zoom', 'reset-product', 'qr-code', 'ruler'],
                        'bottom': ['undo', 'redo'],
                        'left': ['manage-layers', 'info', 'save', 'load']
                    }
                },

                yourDesigner = new FancyProductDesigner($yourDesigner, pluginOpts);

        });
    </script>
</head>

<body>
    <div id="main-container">
        <h3 id="clothing">Clothing Designer</h3>
        <div id="clothing-designer" class="fpd-container fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left"> </div>
        <br />

    </div>
</body>

</html>
...