Modify Crop
In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to modify a blocks crop through the block
API.
Setup#
This example uses the headless CreativeEngine. See the Setup article for a detailed guide.
To get started right away, you can also access the block
API within a running CE.SDK instance via cesdk.engine.block
.
Check out the APIs Overview to see that illustrated in more detail.
Common Properties#
Common properties are properties that occur on multiple block types. For instance, fill color properties are available for all the shape blocks and the text block. That's why we built convenient setter and getter functions for these properties. So you don't have to use the generic setters and getters and don't have to provide a specific property path. There are also has*
functions to query if a block supports a set of common properties.
Crop#
Manipulate the cropping region of a block by setting its scale, rotation, and translation.
hasCrop(id: number): boolean
checks if the block has a crop.
setCropScaleX(id: number, property: string, scaleX: number): void
sets the x scale of the block's crop.
setCropScaleY(id: number, property: string, scaleY: number): void
sets the y scale of the block's crop.
setCropScaleRatio(id: number, scaleRatio: number): number
sets the scale ratio between the crop frame and the content.
This will uniformly scale the content up or down. The center of the scale operation is the center of the crop frame.
setCropRotation(id: number, property: string, rotation: number): void
sets the rotation of the block's crop.
The angle is specified in radians. The rotation happens around the center of the crop frame.
setCropTranslationX(id: number, property: string, TranslationX: number): void
sets the x translation of the block's crop.
The x value is relative to the block's size where 1 means 100% of the block's width.
setCropTranslationY(id: number, property: string, TranslationY: number): void
sets the y translation of the block's crop.
The y value is relative to the block's size where 1 means 100% of the block's height.
setContentFillMode(id: number, mode: 'Crop' | 'Cover' | 'Contain'): void
Sets the current content fill mode.'Crop'
is for manual crop,'Cover'
for the content to fill the entire frame, and'Contain'
to automatically contain whole content inside the frame with possibly transparent areas above and below or left and right.
resetCrop(id: number): void
Resets the manually set crop of the given design block.
The block's content fill mode is set to cover.
adjustCropToFillFrame(id: number, minScaleRatio: number): void
moves and scales the cropped content to at least fill the crop frame.
The rotation angle will stay unaffected. The resulting crop will at least have a crop scale ratio of minScaleRatio. But can be larger if it's necessary to fill the frame.
getCropScaleX(id: number): number
gets the x scale of the block's crop.
getCropScaleY(id: number): number
gets the y scale of the block's crop.
getCropScaleRatio(id: number): number
gets the scale ratio between the crop frame and the content.
getCropRotation(id: number): number
gets the rotation of the block's crop.
The returned angle is specified in radians.
getCropTranslationX(id: number): number
gets the x translation of the block's crop.
The x value is relative to the block's size where 1 means 100% of the block's width.
getCropTranslationY(id: number): number
gets the y translation of the block's crop.
The y value is relative to the block's size where 1 means 100% of the block's height.
getContentFillMode(id: number): 'Crop' | 'Cover' | 'Contain'
returns the current content fill mode.
engine.block.hasCrop(image);engine.block.setCropScaleX(image, 2.0);engine.block.setCropScaleY(image, 1.5);engine.block.setCropScaleRatio(image, 3.0);engine.block.setCropRotation(image, Math.PI);engine.block.setCropTranslationX(image, -1.0);engine.block.setCropTranslationY(image, 1.0);engine.block.adjustCropToFillFrame(image, 1.0);engine.block.setContentFillMode(image, 'Contain');engine.block.resetCrop(image);engine.block.getCropScaleX(image);engine.block.getCropScaleY(image);engine.block.getCropScaleRatio(image);engine.block.getCropRotation(image);engine.block.getCropTranslationX(image);engine.block.getCropTranslationY(image);engine.block.getContentFillMode(image);