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. |