Skip to main content
PESDK/Web/Configuration
Language:

Custom Configuration Settings of PhotoEditor SDK

In this example, we will show you how to configure the PhotoEditor SDK.

Snapping Configuration#

The PE.SDK comes with a set of configuration parameters that let's you change the snapping behaviour of sprites in the Sticker, Text and Text Design tool.

index.js
snapping: {
position: {
enabled: true,
threshold: 20,
snapToHorizontalCenter: true,
snapToVerticalCenter: true,
snapToLeft: 0.1,
snapToRight: 0.1,
snapToTop: 0.1,
snapToBottom: 0.1,
},
rotation: {
enabled: true,
threshold: 20,
angles: [0, 45, 90, 135, 180, 225, 270, 315],
},
},

position object#

Snapping options for positioning sprites.

index.js
position: {
enabled: true,
threshold: 20,
snapToHorizontalCenter: true,
snapToVerticalCenter: true,
snapToLeft: 0.1,
snapToRight: 0.1,
snapToTop: 0.1,
snapToBottom: 0.1,
},

enabled boolean#

Whether sprites should snap to specific positions during pan interactions.

index.js
enabled: true,

threshold number#

This threshold defines the distance of a pan gesture where snapping at a snap point occurs (value in pixels).

index.js
threshold: 20,

snapToHorizontalCenter boolean#

If enabled a sprite's center snaps to the horizontal line through the center of the edited image.

index.js
snapToHorizontalCenter: true,

snapToVerticalCenter boolean#

If enabled a sprite's center snaps to the vertical line through the center of the edited image.

index.js
snapToVerticalCenter: true,

snapToLeft number | null#

The left side of a sprite's bounding box snaps to a vertical line which is shifted by this value from the left side of the edited image towards its center. This value is measured in normalized coordinates relative to the smaller side of the edited image. If this value is explicitly set to null this snapping line is disabled.

index.js
snapToLeft: 0.1,

snapToRight number | null#

The right side of a sprite's bounding box snaps to a vertical line which is shifted by this value from the right side of the edited image towards its center. This value is measured in normalized coordinates relative to the smaller side of the edited image. If this value is explicitly set to null this snapping line is disabled.

index.js
snapToRight: 0.1,

snapToTop number | null#

The top side of a sprite's bounding box snaps to a vertical line which is shifted by this value from the top side of the edited image towards its center. This value is measured in normalized coordinates relative to the smaller side of the edited image. If this value is explicitly set to null this snapping line is disabled.

index.js
snapToTop: 0.1,

snapToBottom number | null#

The bottom side of a sprite's bounding box snaps to a vertical line which is shifted by this value from the bottom side of the edited image towards its center. This value is measured in normalized coordinates relative to the smaller side of the edited image. If this value is explicitly set to null this snapping line is disabled.

index.js
snapToBottom: 0.1,

rotation object#

Snapping options for rotating sprites.

index.js
rotation: {
enabled: true,
threshold: 20,
angles: [0, 45, 90, 135, 180, 225, 270, 315],
},

enabled boolean#

Whether sprites should snap to specific orientations during rotation interactions.

index.js
enabled: true,

threshold number#

This threshold defines the arc length of a rotation gesture where snapping at a snap angle occurs (value in pixels).

index.js
threshold: 20,

angles array#

Enabled snapping angles in degrees for rotating a sprite. The rotation angle is defined clockwise.

index.js
angles: [0, 45, 90, 135, 180, 225, 270, 315],
File:
PhotoEditorSDK.PhotoEditorSDKUI.init({
license: '',
container: '#editor',
image: '',
snapping: {
position: {
enabled: true,
threshold: 20,
snapToHorizontalCenter: true,
snapToVerticalCenter: true,
snapToLeft: 0.1,
snapToRight: 0.1,
snapToTop: 0.1,
snapToBottom: 0.1,
},
rotation: {
enabled: true,
threshold: 20,
angles: [0, 45, 90, 135, 180, 225, 270, 315],
},
},
});