Skip to main content
Contact SalesFree Trial
Contact SalesFree Trial
Platform:
Language:

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.
File:
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);