motive-renderer v4.1.1
Motive Renderer
Library which allows you to render motives into product with any type of active zone
Install
npm install --save motive-renderer
or
yarn add motive-renderer
Demo
The actual usage can be seen in the storybook. To start the storybook, fetch this repository and run the command:
yarn storybook
or
npm run storybook
Documentation
The library exports two components: MotiveRenderer, DifferentZoneMotiveRenderer and a function getDesignAdjustments.
MotiveRenderer component
MotiveRenderer component renders the design into image with specified active zones. Allowed props, with deafult values are:
<MotiveRenderer
productImage={}
productImgWidth ={515}
productImgHeight={515}
activeZones={}
strokeColor="red"
renderActiveZone={false}
designImage={}
designMeta={}
/>
- productImage: Image that you want to render in the background, can be url or base64 encoded
- productImgWidth (optional): Width of the productImage, default value is 515
- productImgHeight (optional): Height of the productImage, default value is 515
- activeZones: Array containing active zones of the product,
- strokeColor (optional): Color of the stroke of active zone, only has effect if renderActiveZone is true
- renderActiveZone (optional): Boolean that specifies if the active zone should be visible or not
- designImage: Image of design that you want to render into the active zone
- designMeta: Meta information about the design
DifferentZoneMotiveRenderer component
DifferentZoneMotiveRenderer is a component, that allows you effectively render design, that was originally desinged in different active zone. Allowed props, with deafult values are:
<DifferentZoneMotiveRenderer
originalActiveZones={[]}
currentActiveZones={[]}
designMeta={{}}
productImage=""
designImage=""
renderActiveZone={true}
productImgWidth={515},
productImgHeight={515},
debug={false}
/>
- originalActiveZones: Active zones on which was the design originally designed
- currentActiveZones (optional): Current active zones, where you want the design to be rendered
- designMeta: Original meta information about the design
- productImage: Image that you want to render in the background, can be url or base64 encoded
- designImage: Image of design that you want to render into the active zone
- renderActiveZone (optional): Boolean that specifies if the active zone should be visible or not
- productImgWidth (optional): Width of the product image, default is 515
- productImgHeight (optional): Height of the product image, default is 515
- debug (optional): Switch, that allows you to see how was the originalActiveZone scaled, default is false
getDesignAdjustments
getDesignAdjustments is a function, which will calculate how is the design moved and scaled when being renderd into different zone. The semantics of the parameters is the same as in DifferentZoneMotiveRenderer component.
function getDesignAdjustments(
originalActiveZones: ActiveZone[],
currentActiveZones: ActiveZone[],
designMeta: DesignMeta,
productImageSize = 515)
Type of the return value type is following:
{
moveXPercent: number,
moveYPercent: number,
scalePercent: number
};
Active zones
This section will explain all the possible types of active zones that can be used within this library. When an array of active zones is required as a parameter, they do not have to be of the same type.
Rectangle active zone
type Rectangle = {
percentXTopLeftCorner: number;
percentYTopLeftCorner: number;
percentWidth: number;
percentHeight: number;
};
PercentXTopLeftCorner and percentYTopLeftCorner reference point is the top left corner of the productImage. Reference for width is width of the image and similliary reference for height is the height of a product image.
Polygon active zone
type Polygon = Point[];
type Point = {
xPercentage: number;
yPercentage: number;
};
Reference point for the xPercentage and yPercentage parameters of Point is the top left corner of the product image
Ellipse active zone
type Ellipse = {
radiusXPercentage: number;
radiusYPercentage: number;
percentXCenter: number;
percentYCenter: number;
};
Reference point for the percentXCenter and percentYCenter is the top left corner of the productImage, radiusXPercentage specifies percentage of width and radiusYPercentage is referring to width.
Design meta
The design meta specifies the meta information about the design, especially its position, and size.
type DesignMeta = {
xPercentage: number;
yPercentage: number;
percentWidth: number;
percentHeight: number;
};
Author
Adam Laurenčík