Rotate

What you’ll learn#

• How to rotate an image as a user using the handles
• Rotate an image block by a specific angle
• How to lock image rotation
• How to rotate multiple images as a group

Rotating an Image Using the UI#

By default selecting a block will show handles for resizing and rotating. You can freeform rotate a block by draging the rotation handle.

Rotating an Image Using Code#

You can rotate an image block using the setRotation function. It takes the id of the block and a rotation amount in radians.

try engine.block.setRotation(star, radians: .pi / 4)

If you need to convert between radians and degrees, multiply the number in degrees by pi and divide by 180.

let angleInRadians: Double = angleInDegrees * Double.pi / 180

let angleInDegrees: Double = angleInRadians * 180 / Double.pi

You can discover the current rotation of a block using the getRotation function.

let rotationOfStar = try engine.block.getRotation(star)

Locking Rotation#

You can remove the rotation handle from the UI by changing the setting for the engine. This will affect all blocks.

try engine.editor.setSettingBool("controlGizmo/showRotateHandles", value: false)

Though the handle is gone, the user can still use the two finger rotation gesture on a touch device. You can disable that gesture with the following setting.

try engine.editor.setSettingBool("touch/rotateAction", value: false)

When you want to lock only certain blocks, you can toggle the transform lock property. This will apply to all transformations for the block.

try engine.block.setTransformLocked(star, locked: true)

Rotating As a Group#

To rotate multiple elements together, first add them to a group and then rotate the group.

let groupId = try engine.block.group([star, textBlock])
engine.block.setRotation(groupId, radians: pi / 2)

Troubleshooting#

Troubleshooting