Layer configuration
Position
The Position config gives you a variety of ways to position your layer in the frame by specifying x
, y
and isRelative
attributes. isRelative
is set to false
by default, but if set to true
, will treat decimal values provided to x
and y
as fractions of composition height
and width
, respectively. For example, {isRelative: true, x: 0.5}
positions the layer at 50% of the composition width.
Interface
interface Position {
position?: {
// defaults to false
isRelative?: boolean;
// number of pixels from left, or auto-position
// defaults to 0
x?: number | "left" | "center" | "right";
// number of pixels from top, or auto-position
// defaults to 0
y?: number | "top" | "center" | "bottom";
};
}
Configuring Position
You can modify a layer's position-related settings by passing a configuration object or by calling its setters. You can read the layer's position-related settings by calling its getters
Configuration Object
const image = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
isRelative: false, // boolean
// number of pixels from the left of the composition,
// or one of "left", "center", "right"
// or a decimal value if \`isRelative\` is set to true
x: "left",
// number of pixels from the top of the composition,
// or one of "top", "center", "bottom"
// or a decimal value if \`isRelative\` is set to true
y: "center",
},
}
);
Output
Setters
const image = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png"
);
image.setIsRelative(true).setX("center").setY(0.25);
Output
Getters
image.isRelative; // -> true
image.x; // -> "left"
image.y; // -> "center"
Example
const leftTop = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
x: "left",
y: "top",
},
trim: {
end: 0.1,
},
}
);
const centerTop = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
x: "center",
y: "top",
},
trim: {
end: 0.1,
},
}
);
const rightTop = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
x: "right",
y: "top",
},
trim: {
end: 0.1,
},
}
);
const leftCenter = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
x: "left",
y: "center",
},
trim: {
end: 0.1,
},
}
);
const centerCenter = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
x: "center",
y: "center",
},
trim: {
end: 0.1,
},
}
);
const rightCenter = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
x: "right",
y: "center",
},
trim: {
end: 0.1,
},
}
);
const leftBottom = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
x: "left",
y: "bottom",
},
trim: {
end: 0.1,
},
}
);
const centerBottom = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
x: "center",
y: "bottom",
},
trim: {
end: 0.1,
},
}
);
const rightBottom = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
x: "right",
y: "bottom",
},
trim: {
end: 0.1,
},
}
);
const relativeRelative = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
isRelative: true,
x: 0.25,
y: 0.25,
},
trim: {
end: 0.1,
},
}
);
const leftRelative = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
isRelative: true,
x: "left",
y: 0.25,
},
trim: {
end: 0.1,
},
}
);
const relativeBottom = await composition.addImage(
"https://editframe.com/docs/layer-configuration/position/editframe-logo.png",
{
position: {
isRelative: true,
x: 0.25,
y: "bottom",
},
trim: {
end: 0.1,
},
}
);
await composition.addSequence([
leftTop,
centerTop,
rightTop,
leftCenter,
centerCenter,
rightCenter,
leftBottom,
centerBottom,
rightBottom,
relativeRelative,
leftRelative,
relativeBottom,
]);