Skip to main content
PESDK/Web/Configuration
Language:

Snapping 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#

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#

Whether sprites should snap to specific positions during pan interactions.

index.js
enabled: true,

threshold#

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

index.js
threshold: 20,

snapToHorizontalCenter#

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

index.js
snapToHorizontalCenter: true,

snapToVerticalCenter#

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

index.js
snapToVerticalCenter: true,

snapToLeft#

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#

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#

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#

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#

Snapping options for rotating sprites.

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

enabled#

Whether sprites should snap to specific orientations during rotation interactions.

index.js
enabled: true,

threshold#

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#

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],
},
},
});