FancyProductDesignerView
Classes
- FancyProductDesignerView ⇐
EventTarget
Functions
- init()
This method needs to be called to initialize the generation.
- loadElements(elements, callback)
Removes the current elements and loads a set of new elements into the view.
- toDataURL(callback, [options], [deselectElement])
Creates a data URL of the view.
- toSVG([options], [fontsToEmbed]) ⇒
String
Returns the view as SVG.
- toggleLock(toggle) ⇒
Boolean
Toggles the lockment of view. If the view is locked, the price of the view will not be added to the total product price.
- changePrice(price, operator) ⇒
Number
Changes the price by an operator, + or -.
Events
- "priceChange" (event)
Gets fired as soon as the price has changed.
FancyProductDesignerView ⇐ EventTarget
Kind: global class
Extends: EventTarget
- FancyProductDesignerView ⇐
EventTarget
- new FancyProductDesignerView(container, [viewData], [callback], [fabricCanvasOptions])
- ~totalPrice :
Number
- ~truePrice :
Number
- ~additionalPrice :
Number
- ~mask :
Object
new FancyProductDesignerView(container, [viewData], [callback], [fabricCanvasOptions])
Creates a new FancyProductDesignerView.
Param | Type | Default | Description |
---|---|---|---|
container | HTMLElement | The container for the Fancy Product Designer View. | |
[viewData] | Object | {} | The initial view data. |
[callback] | function | Callback when view is created. | |
[fabricCanvasOptions] | Object | {} | Options for fabricJS canvas. |
FancyProductDesignerView~totalPrice : Number
The total price for the view without max. price.
Kind: inner property of FancyProductDesignerView
Default: 0
Read only: true
FancyProductDesignerView~truePrice : Number
The total price for the view including max. price and corrert formatting.
Kind: inner property of FancyProductDesignerView
Default: 0
Read only: true
FancyProductDesignerView~additionalPrice : Number
Additional price for the view.
Kind: inner property of FancyProductDesignerView
Default: 0
Read only: true
FancyProductDesignerView~mask : Object
The properties for the mask object (url, left, top, width, height).
Kind: inner property of FancyProductDesignerView
Default: null
Read only: true
init()
This method needs to be called to initialize the generation.
Kind: global function
loadElements(elements, callback)
Removes the current elements and loads a set of new elements into the view.
Kind: global function
Param | Type | Description |
---|---|---|
elements | Array | An array containing elements. |
callback | function | A function that will be called when all elements have beed added. |
toDataURL(callback, [options], [deselectElement])
Creates a data URL of the view.
Kind: global function
Param | Type | Default | Description |
---|---|---|---|
callback | function | A function that will be called when the data URL is created. The function receives the data URL. | |
[options] | Object | See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toDataURL. | |
[options.onlyExportable] | Boolean | false | If true elements with excludeFromExport=true are not exported in the image. |
[options.backgroundColor] | String | "transparent" | The background color as hexadecimal value. For 'png' you can also use 'transparent'. |
[options.watermarkImg] | fabric.Image | A fabricJS image that includes the watermark image. | |
[deselectElement] | Boolean | true | Deselect current selected element. |
toSVG([options], [fontsToEmbed]) ⇒ String
Returns the view as SVG.
Kind: global function
Returns: String
- A XML representing a SVG.
Param | Type | Default | Description |
---|---|---|---|
[options] | Object | See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toSVG | |
[options.watermarkImg] | fabric.Image | A fabricJS image that includes the watermark image. | |
[options.reviver] | function | See fabricjs documentation http://fabricjs.com/docs/fabric.Canvas.html#toSVG | |
[options.respectPrintingBox] | Boolean | false | Only generate SVG from printing box |
[fontsToEmbed] | Array | [] | Aan array containing fonts to embed in the SVG. You can use getUsedFonts method |
toggleLock(toggle) ⇒ Boolean
Toggles the lockment of view. If the view is locked, the price of the view will not be added to the total product price.
Kind: global function
Returns: Boolean
- The toggle state.
Param | Type | Description |
---|---|---|
toggle | Boolean | The toggle state. |
changePrice(price, operator) ⇒ Number
Changes the price by an operator, + or -.
Kind: global function
Returns: Number
- The total price of the view.
Param | Type | Description |
---|---|---|
price | Number | Price as number. |
operator | String | "+" or "-". |
"priceChange" (event)
Gets fired as soon as the price has changed.
Kind: event emitted
Param | Type | Description |
---|---|---|
event | Event | |
event.detail.elementPrice | number | The price of the added element. |
event.detail.truePrice | number | The total price. |