FancyProductDesignerView Class
The class to create a view. A view contains the canvas. You need to call setup to set up the canvas with all elements, after setting an instance of FancyProductDesignerView.
Constructor
-
elem
-
view
-
callback
-
fabricjsCanvasOptions
Parameters:
-
elem
JQuery- jQuery object holding the container.
-
view
Object- The default options for the view.
-
callback
Function- This function will be called as soon as the view and all initial elements are loaded.
-
fabricjsCanvasOptions
Object- Options for the fabricjs canvas.
Methods
- addElement
- addElements
- alignElement
- centerElement
- changeColor
- changePrice
- deselectElement
- duplicate
- getBoundingBoxCoords
- getElementByReplace
- getElementByTitle
- getElementJSON
- getIndex
- getJSON
- getOptions
- getUploadZone
- getZIndex
- loadElements
- redo
- removeElement
- reset
- resetCanvasSize
- setElementParameters
- setMask
- setup
- toDataURL
- toggleLock
- toSVG
- undo
Properties
Events
- FancyProductDesignerView#beforeElementAdd
- FancyProductDesignerView#boundingBoxToggle
- FancyProductDesignerView#canvas:mouseDown
- FancyProductDesignerView#canvas:mouseMove
- FancyProductDesignerView#canvas:mouseOut
- FancyProductDesignerView#canvas:mouseOver
- FancyProductDesignerView#canvas:mouseUp
- FancyProductDesignerView#elementAdd
- FancyProductDesignerView#elementChange
- FancyProductDesignerView#elementCheckContainemt
- FancyProductDesignerView#elementColorChange
- FancyProductDesignerView#elementIn
- FancyProductDesignerView#elementModify
- FancyProductDesignerView#elementOut
- FancyProductDesignerView#elementRemove
- FancyProductDesignerView#elementSelect
- FancyProductDesignerView#priceChange
- FancyProductDesignerView#undoRedoSet
-
type
-
source
-
title
-
parameters
Adds a new element to the view.
Parameters:
-
type
StringThe type of an element you would like to add, 'image' or 'text'.
-
source
StringFor image the URL to the image and for text elements the default text.
-
title
StringOnly required for image elements.
-
[parameters]
Object optionalAn object with the parameters, you would like to apply on the element.
-
elements
-
callback
Adds a set of elements into the view.
Parameters:
-
elements
ArrayAn array containing elements.
-
callback
FunctionA function that will be called when all elements have beed added.
-
pos
-
element
Aligns an element.
Parameters:
-
pos
StringAllowed values: left, right, top or bottom.
-
[element]
fabric.Object optionalThe element to center. If not set, it centers the current selected element.
-
h
-
v
-
element
Centers an element horizontal or/and vertical.
Parameters:
-
h
BooleanCenter horizontal.
-
v
BooleanCenter vertical.
-
[element]
fabric.Object optionalThe element to center. If not set, it centers the current selected element.
-
element
-
hex
-
colorLinking
Changes the color of an element.
Parameters:
-
element
fabric.ObjectThe element to colorize.
-
hex
StringThe color.
-
colorLinking
BooleanUse color linking.
-
price
-
operator
Changes the price by an operator, + or -.
Parameters:
-
price
NumberPrice as number.
-
operator
String"+" or "-".
Returns:
The total price of the view.
-
discardActiveObject=true
Deselects the current selected element.
Parameters:
-
[discardActiveObject=true]
Boolean optionalDiscards the active element.
-
element
Removes the canvas and resets all relevant view properties.
Parameters:
-
[element]
fabric.Object optionalThe element to duplicate. If not set, it duplicates the current selected element.
-
element
Returns the bounding box of an element.
Parameters:
-
element
fabric.ObjectA fabric object
Returns:
The bounding box object with x,y,width and height or false.
-
title
Returns an fabric object by title.
Parameters:
-
title
StringThe title of an element.
Returns:
FabricJS Object.
-
element
-
addPropertiesToInclude=false
Gets the JSON of an element.
Parameters:
-
[element]
String optionalThe target element. If not set, it it will use the current selected.
-
[addPropertiesToInclude=false]
Boolean optionalInclude the properties from propertiesToInclude.
Returns:
An object with properties.
Returns all options with the keys that are set in FancyProductDesignerView.relevantOptions property.
Returns:
An object containing all relevant options.
-
title
Gets an upload zone by title.
Parameters:
-
title
StringThe target title of an element.
Returns:
A fabric object representing the upload zone.
-
element
Gets the z-index of an element.
Parameters:
-
[element]
fabric.Object optionalThe element to center. If not set, it centers the current selected element.
Returns:
The index.
-
elements
-
callback
Removes the current elements and loads a set of new elements into the view.
Parameters:
-
elements
ArrayAn array containing elements.
-
callback
FunctionA function that will be called when all elements have beed added.
-
element
Removes an element using the fabric object or the title of an element.
Parameters:
-
element
Object | StringNeeds to be a fabric object or the title of an element.
-
parameters
-
element
-
saveUndo=true
Sets the parameters for a specified element.
Parameters:
-
parameters
ObjectAn object with the parameters that should be applied to the element.
-
[element]
fabric.Object | string optionalA fabric object or the title of an element. If no element is set, the parameters will be applied to the current selected element.
-
[saveUndo=true]
Boolean optionalSave new parameters also in undos.
-
maskOptions
Use a SVG image as mask for the whole view. The image needs to be a SVG file with only one path. The method toSVG() does not include the mask.
Parameters:
-
maskOptions
Object | NullAn object containing the URL to the svg. Optional: scaleX, scaleY, left and top.
This method needs to be called after the instance of FancyProductDesignerView is set.
-
callback
-
backgroundColor=transparent
-
options
-
watermarkImg=null
-
deselectElement=true
Creates a data URL of the view.
Parameters:
-
callback
FunctionA function that will be called when the data URL is created. The function receives the data URL.
-
[backgroundColor=transparent]
String optionalThe background color as hexadecimal value. For 'png' you can also use 'transparent'.
-
[options]
Object optionalSee fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL.
-
[onlyExportable=false]
Boolean optionalIf true elements with excludeFromExport=true are not exported in the image.
-
-
[watermarkImg=null]
fabric.Image optionalA fabricJS image that includes the watermark image.
-
[deselectElement=true]
Boolean optionalDeselect current selected element.
-
toggle
Toggles the lockment of view. If the view is locked, the price of the view will not be added to the total product price.
Parameters:
-
toggle
BooleanThe toggle state.
Returns:
The toggle state.
-
options
-
reviver
-
respectPrintingBox
-
watermarkImg=null
-
fontsToEmbed=[]
Returns the view as SVG.
Parameters:
-
options
ObjectSee fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toSVG
-
reviver
FunctionSee fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toSVG
-
respectPrintingBox
BooleanOnly generate SVG from printing box
-
[watermarkImg=null]
fabric.Image optionalA fabricJS image that includes the watermark image.
-
[fontsToEmbed=[]]
Array optionalAan array containing fonts to embed in the SVG. You can use getUsedFonts method
Returns:
A XML representing a SVG.
fCanv
fabric.CanvasAn instance of fabricJS canvas class. It allows to interact with the fabricjs API.
Default: null
maskObject
fabric.ImageThe image object that is going to be used as mask for this view.
Default: null
propertiesToInclude
Array staticProperties to include when using the getJSON or getElementJSON.
Default: ['_isInitial', 'lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY', 'lockScalingFlip', 'lockUniScaling', 'resizeType', 'clipTo', 'clippingRect', 'boundingBox', 'boundingBoxMode', 'selectable', 'evented', 'title', 'editable', 'cornerColor', 'cornerIconColor', 'borderColor', 'isEditable', 'hasUploadZone']
relevantOptions
Array staticRelevant options for the view when saving order data.
Default: ['stageWidth',
'stageHeight',
'customAdds',
'customImageParameters',
'customTextParameters',
'maxPrice',
'optionalView',
'designCategories',
'printingBox',
'output',
'layouts',
'usePrintingBoxAsBounding']
stage
fabric.Canvas deprecatedAn instance of fabricjs canvas class. It allows to interact with the fabricjs API.
Default: null
FancyProductDesignerView#beforeElementAdd
Gets fired as soon as an element has beed added.
Event Payload:
-
event
Event -
type
String- The element type.
-
source
String- URL for image, text string for text element.
-
title
String- The title for the element.
-
params
Object- The default properties.
FancyProductDesignerView#boundingBoxToggle
Gets fired when bounding box is toggling.
Event Payload:
-
event
Event -
currentBoundingObject
fabric.Object- The current bounding box object.
-
state
Boolean
FancyProductDesignerView#canvas:mouseDown
Gets fired when the mouse/touch gets down on fabricJS canvas.
Event Payload:
-
event
Event -
instance
String- The view instance.
-
opts
Event- FabricJS event options.
FancyProductDesignerView#canvas:mouseMove
Gets fired when the mouse/touch is moving on fabricJS canvas.
Event Payload:
-
event
Event -
instance
String- The view instance.
-
opts
Event- FabricJS event options.
FancyProductDesignerView#canvas:mouseOut
Gets fired when the mouse gets over on fabricJS canvas.
Event Payload:
-
event
Event -
instance
String- The view instance.
-
opts
Event- FabricJS event options.
FancyProductDesignerView#canvas:mouseOver
Gets fired when the mouse gets over on fabricJS canvas.
Event Payload:
-
event
Event -
instance
String- The view instance.
-
opts
Event- FabricJS event options.
FancyProductDesignerView#canvas:mouseUp
Gets fired when the mouse/touch gets up on fabricJS canvas.
Event Payload:
-
event
Event -
instance
String- The view instance.
-
opts
Event- FabricJS event options.
FancyProductDesignerView#elementAdd
Gets fired as soon as an element has beed added.
Event Payload:
-
event
Event -
object
fabric.Object- The fabric object.
FancyProductDesignerView#elementChange
Gets fired when an element is changing via drag, resize or rotate.
Event Payload:
-
event
Event -
modifiedType
String- The modified type.
-
element
fabric.Object- The fabricJS object.
FancyProductDesignerView#elementCheckContainemt
Gets fired when the containment of an element is checked.
Event Payload:
-
event
Event -
target
fabric.Object -
boundingBoxMode
Boolean
FancyProductDesignerView#elementColorChange
Gets fired when the color of an element is changing.
Event Payload:
-
event
Event -
element
fabric.Object -
hex
String -
colorLinking
Boolean
FancyProductDesignerView#elementIn
Gets fired as soon as an element is inside of its bounding box again.
Event Payload:
-
event
Event
FancyProductDesignerView#elementModify
Gets fired when an element is modified.
Event Payload:
-
event
Event -
element
fabric.Object- The fabricJS object.
-
modifiedParameters
Object- The modified parameters.
FancyProductDesignerView#elementOut
Gets fired as soon as an element is outside of its bounding box.
Event Payload:
-
event
Event
FancyProductDesignerView#elementRemove
Gets fired as soon as an element has been removed.
Event Payload:
-
event
Event -
element
fabric.Object- The fabric object that has been removed.
FancyProductDesignerView#elementSelect
Gets fired as soon as an element is selected.
Event Payload:
-
event
Event -
currentElement
fabric.Object- The current selected element.