Search
Loading...
Skip to content

Crop Images in iOS

In this example, we will show you how to use the CreativeEditor SDK’s CreativeEngine to modify a blocks crop through the block API.

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.

public func supportsCrop(_ id: DesignBlockID) throws -> Bool

Query if the given block has crop properties.

  • id:: The block to query.
  • Returns: true, if the block has crop properties.
public func setCropScaleX(_ id: DesignBlockID, scaleX: Float) throws

Set the crop scale in x direction of the given design block. Required scope: “layer/crop”

  • id: The block whose crop should be set.
  • scaleX: The scale in x direction.
public func setCropScaleY(_ id: DesignBlockID, scaleY: Float) throws

Set the crop scale in y direction of the given design block. Required scope: “layer/crop”

  • id: The block whose crop should be set.
  • scaleY: The scale in y direction.
public func setCropScaleRatio(_ id: DesignBlockID, scaleRatio: Float) throws

Set the crop scale ratio of the given design block. This will uniformly scale the content up or down. The center of the scale operation is the center of the crop frame. Required scope: “layer/crop”

  • id: The block whose crop should be set.
  • scaleRatio: The crop scale ratio.
public func setCropRotation(_ id: DesignBlockID, rotation: Float) throws

Set the crop rotation of the given design block. Required scope: “layer/crop”

  • id: The block whose crop should be set.
  • rotation: The rotation in radians.
public func setCropTranslationX(_ id: DesignBlockID, translationX: Float) throws

Set the crop translation in x direction of the given design block. Required scope: “layer/crop”

  • id: The block whose crop should be set.
  • translationX: The translation in x direction.
public func setCropTranslationY(_ id: DesignBlockID, translationY: Float) throws

Set the crop translation in y direction of the given design block. Required scope: “layer/crop”

  • id: The block whose crop should be set.
  • translationY: The translation in y direction.
public func adjustCropToFillFrame(_ id: DesignBlockID, minScaleRatio: Float) throws

Adjust the crop position/scale to at least fill the crop frame. Required scope: “layer/crop”

  • id: The block whose crop scale ratio should be queried.
  • minScaleRatio: The minimal crop scale ratio to go down to.
public func setContentFillMode(_ id: DesignBlockID, mode: ContentFillMode) throws

Set a block’s content fill mode. Required scope: “layer/crop”

  • id: The block to update.
  • mode: The content fill mode.
public func resetCrop(_ id: DesignBlockID) throws

Resets the manually set crop of the given design block. The block’s content fill mode is set to .cover. If the block has a fill, the crop values are updated so that it covers the block. Required scope: “layer/crop”

  • id:: The block whose crop should be reset.
public func getCropScaleX(_ id: DesignBlockID) throws -> Float

Get the crop scale on the x axis of the given design block.

  • id:: The block whose scale should be queried.
  • Returns: The scale on the x axis.
public func getCropScaleY(_ id: DesignBlockID) throws -> Float

Get the crop scale on the x axis of the given design block.

  • id:: The block whose scale should be queried.
  • Returns: The scale on the y axis.
public func flipCropHorizontal(_ id: DesignBlockID) throws

Adjusts the crop in order to flip the content along its own horizontal axis.

  • id:: The block whose crop should be updated.
public func flipCropVertical(_ id: DesignBlockID) throws

Adjusts the crop in order to flip the content along its own vertical axis.

  • id:: The block whose crop should be updated.
public func getCropScaleRatio(_ id: DesignBlockID) throws -> Float

Get the crop scale ratio of the given design block.

  • id:: The block whose crop scale ratio should be queried.
  • Returns: The crop scale ratio.
public func getCropRotation(_ id: DesignBlockID) throws -> Float

Get the crop rotation of the given design block.

  • id:: The block whose crop rotation should be queried.
  • Returns: The crop rotation.
public func getCropTranslationX(_ id: DesignBlockID) throws -> Float

Get the crop translation on the x axis of the given design block.

  • id:: The block whose translation should be queried.
  • Returns: The translation on the x axis.
public func getCropTranslationY(_ id: DesignBlockID) throws -> Float

Get the crop translation on the y axis of the given design block.

  • id:: The block whose translation should be queried.
  • Returns: The translation on the y axis.
public func supportsContentFillMode(_ id: DesignBlockID) throws -> Bool

Query if the given block has a content fill mode.

  • id:: The block to query.
  • Returns: true, if the block has a content fill mode.
public func getContentFillMode(_ id: DesignBlockID) throws -> ContentFillMode

Query a block’s content fill mode.

  • id:: The block to query.
  • Returns: The current mode.

Full Code#

Here’s the full code:

try engine.block.supportsCrop(image)
try engine.block.setCropScaleX(image, scaleX: 2.0)
try engine.block.setCropScaleY(image, scaleY: 1.5)
try engine.block.setCropScaleRatio(image, scaleRatio: 3.0)
try engine.block.setCropRotation(image, rotation: .pi)
try engine.block.setCropTranslationX(image, translationX: -1.0)
try engine.block.setCropTranslationY(image, translationY: 1.0)
try engine.block.adjustCropToFillFrame(image, minScaleRation: 1.0)
try engine.block.setContentFillMode(image, mode: .contain)
try engine.block.resetCrop(image)
try engine.block.getCropScaleX(image)
try engine.block.getCropScaleY(image)
try engine.block.flipCropHorizontal(image)
try engine.block.flipCropVertical(image)
try engine.block.getCropScaleRatio(image)
try engine.block.getCropRotation(image)
try engine.block.getCropTranslationX(image)
try engine.block.getCropTranslationY(image)
try engine.block.supportsContentFillMode(image)
try engine.block.getContentFillMode(image)