Pre-made designs allows users to pick a graphic from a library.
[ { "source": "images/designs/swirl.png", "title": "Swirl", "parameters": { "zChangeable": true, "left": 215, "top": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "boundingBox": "Base", "autoCenter": true } }, { "source": "images/designs/swirl2.png", "title": "Swirl 2", "parameters": { "left": 215, "top": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "boundingBox": "Base", "autoCenter": true } }, { "source": "images/designs/swirl3.png", "title": "Swirl 3", "parameters": { "left": 215, "top": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "autoCenter": true } }, { "source": "images/designs/heart_blur.png", "title": "Heart Blur", "parameters": { "left": 215, "top": 200, "colors": "#bf0200", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "boundingBox": "Base", "autoCenter": true } }, { "source": "images/designs/converse.png", "title": "Converse", "parameters": { "left": 215, "top": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "autoCenter": true } }, { "source": "images/designs/crown.png", "title": "Crown", "parameters": { "left": 215, "top": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "autoCenter": true } } ]
Instructions:
- Wrap everything inside square brackets set [].
- Each curly bracket set {} directly under square bracket set [] represent a design.
- Each product layer has 2 main properties. Each property and its value will be inside quotes “” and separated by colon. There are 2 main properties for each layer;
- “source”: Image path for design.
- “title”: Title to identify the design.
- Each layer will need some “parameters”. The parameters will be inside their own curly brackets. Here are the available parameters.
- “left”: Distance from left in pixels.
- “top”: Distance from top in pixels.
- “colors”: Available colors for the layer.
- “removable”: Should the layer be removable.
- “rotatable”: Should the layer be rotatable.
- “resizable”: Should the layer be resizable.
- “autoCenter”: Should the layer auto center itself in canvas.