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

Zoom

In this example, we will show you how to use the CreativeEditor SDK's CreativeEngine to undo and redo steps in the scene 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.

Functions#

  • getZoomLevel(): number Returns the current zoom level of the scene in unit 1/px, i.e., how large a pixel of the camera resolution is shown on the screen. A zoom level of 2.0f results in one pixel in the design to be two pixels on the screen.
  • setZoomLevel(value: number): void Sets the zoom level of the scene for the headless version to a new value with unit 1/px, i.e., how large a pixel of the camera resolution is shown on the screen. A zoom level of 2.0f results in one pixel in the design to be two pixels on the screen. This only shows an effect if the zoom level is not handled/overwritten by the UI.
  • zoomToBlock(block: Block, paddingLeft: number, paddingTop: number, paddingRight: number, paddingBottom: number): Promise<void> Sets the zoom and focus of the scene to a given block with some optional padding in screen pixels around the block. This is an asynchronous method returning a Promise.
  • onZoomLevelChanged(callback: () => void): () => void Subscribe to changes to the zoom level. Returns a function that can be called to unsubscribe from receiving events.
File:
// Zoom to 100%
engine.scene.setZoomLevel(1.0);


// Zoom to 50%
engine.scene.setZoomLevel(0.5 * engine.scene.getZoomLevel());


// Bring entire scene in view with padding of 20px in all directions
await engine.scene.zoomToBlock(scene, 20.0, 20.0, 20.0, 20.0);


// Get notified when the zoom level changes
const unsubscribeZoomLevelChanged = engine.scene.onZoomLevelChanged(
  () => {
    const zoomLevel = engine.scene.getZoomLevel();
    console.log('Zoom level is now: ', zoomLevel);
  }
);
unsubscribeZoomLevelChanged();