Move Images - Angular

Position images on the canvas using absolute pixel coordinates or percentage-based positioning for responsive layouts.

Move images example showing positioned images with labels

8 mins

estimated time

Position images on the canvas using coordinates that start at the top-left corner (0, 0). X increases right, Y increases down. Values are relative to the parent block, simplifying nested layouts.

import CreativeEditorSDK, {
  type EditorPlugin,
  type EditorPluginContext
} from '@cesdk/cesdk-js';

class Example implements EditorPlugin {
  name = 'guides-edit-image-transform-move-browser';

  version = CreativeEditorSDK.version;

  async initialize({ cesdk }: EditorPluginContext): Promise<void> {
    if (!cesdk) {
      throw new Error('CE.SDK instance is required for this plugin');
    }

    // Setup: Load assets and create scene
    await cesdk.addDefaultAssetSources();
    await cesdk.addDemoAssetSources({
      sceneMode: 'Design',
      withUploadAssetSources: true
    });
    await cesdk.createDesignScene();

    const engine = cesdk.engine;
    const page = engine.block.findByType('page')[0];

    // Set page dimensions
    engine.block.setWidth(page, 800);
    engine.block.setHeight(page, 500);

    // Demo 1: Movable Image - Can be freely repositioned by user
    const movableImage = await engine.block.addImage(
      'https://img.ly/static/ubq_samples/sample_3.jpg',
      {
        size: { width: 200, height: 200 }
      }
    );
    engine.block.appendChild(page, movableImage);
    engine.block.setPositionX(movableImage, 0);
    engine.block.setPositionY(movableImage, 100);

    const text1 = engine.block.create('text');
    engine.block.setString(text1, 'text/text', 'Movable');
    engine.block.setFloat(text1, 'text/fontSize', 32);
    engine.block.setEnum(text1, 'text/horizontalAlignment', 'Center');
    engine.block.setWidth(text1, 200);
    engine.block.setPositionX(text1, 50);
    engine.block.setPositionY(text1, 360);
    engine.block.appendChild(page, text1);

    // Demo 2: Percentage Positioning - Responsive layout
    const percentImage = await engine.block.addImage(
      'https://img.ly/static/ubq_samples/sample_5.jpg',
      {
        size: { width: 200, height: 200 }
      }
    );
    engine.block.appendChild(page, percentImage);

    // Set position mode to percentage (0.0 to 1.0)
    engine.block.setPositionXMode(percentImage, 'Percent');
    engine.block.setPositionYMode(percentImage, 'Percent');

    // Position at 37.5% from left (300px), 30% from top (150px)
    engine.block.setPositionX(percentImage, 0.375);
    engine.block.setPositionY(percentImage, 0.3);

    const text2 = engine.block.create('text');
    engine.block.setString(text2, 'text/text', 'Percentage');
    engine.block.setFloat(text2, 'text/fontSize', 32);
    engine.block.setEnum(text2, 'text/horizontalAlignment', 'Center');
    engine.block.setWidth(text2, 200);
    engine.block.setPositionX(text2, 300);
    engine.block.setPositionY(text2, 360);
    engine.block.appendChild(page, text2);

    // Demo 3: Locked Image - Cannot be moved, rotated, or scaled
    const lockedImage = await engine.block.addImage(
      'https://img.ly/static/ubq_samples/sample_6.jpg',
      {
        size: { width: 200, height: 200 }
      }
    );
    engine.block.appendChild(page, lockedImage);
    engine.block.setPositionX(lockedImage, 550);
    engine.block.setPositionY(lockedImage, 150);

    // Lock the transform to prevent user interaction
    engine.block.setBool(lockedImage, 'transformLocked', true);

    const text3 = engine.block.create('text');
    engine.block.setString(text3, 'text/text', 'Locked');
    engine.block.setFloat(text3, 'text/fontSize', 32);
    engine.block.setEnum(text3, 'text/horizontalAlignment', 'Center');
    engine.block.setWidth(text3, 200);
    engine.block.setPositionX(text3, 550);
    engine.block.setPositionY(text3, 360);
    engine.block.appendChild(page, text3);

    // Get current position values
    const currentX = engine.block.getPositionX(movableImage);
    const currentY = engine.block.getPositionY(movableImage);
    console.log('Current position:', currentX, currentY);

    // Move relative to current position
    const offsetX = engine.block.getPositionX(movableImage);
    const offsetY = engine.block.getPositionY(movableImage);
    engine.block.setPositionX(movableImage, offsetX + 50);
    engine.block.setPositionY(movableImage, offsetY + 50);
  }
}

export default Example;

This guide covers positioning images with absolute or percentage coordinates, configuring position modes, and locking transforms to prevent repositioning.

Position Coordinates#

Coordinates originate at the top-left (0, 0) of the parent container. Use absolute mode for fixed pixel values or percentage mode (0.0 to 1.0) for responsive layouts that adapt to parent size changes.

Positioning Images#

Position images using engine.block.setPositionX() and engine.block.setPositionY() with absolute pixel coordinates:

engine.block.appendChild(page, movableImage);
engine.block.setPositionX(movableImage, 0);
engine.block.setPositionY(movableImage, 100);

Getting Current Position#

Read current position values using engine.block.getPositionX() and engine.block.getPositionY(). Values are returned in the current position mode (absolute pixels or percentage 0.0-1.0):

// Get current position values
const currentX = engine.block.getPositionX(movableImage);
const currentY = engine.block.getPositionY(movableImage);

Configuring Position Modes#

Control how position values are interpreted using engine.block.setPositionXMode() and engine.block.setPositionYMode(). Set to 'Absolute' for pixels or 'Percent' for percentage values (0.0 to 1.0). Check the current mode using engine.block.getPositionXMode() and engine.block.getPositionYMode(). The Percentage Positioning section below demonstrates setting these modes.

Percentage Positioning#

Position images using percentage values (0.0 to 1.0) for responsive layouts. Set the position mode to 'Percent', then use values between 0.0 and 1.0:

// Set position mode to percentage (0.0 to 1.0)
engine.block.setPositionXMode(percentImage, 'Percent');
engine.block.setPositionYMode(percentImage, 'Percent');

Percentage positioning adapts automatically when the parent block dimensions change, maintaining relative positions in responsive designs.

Relative Positioning#

Move images relative to their current position by getting the current coordinates and adding offset values:

// Move relative to current position
const offsetX = engine.block.getPositionX(movableImage);
const offsetY = engine.block.getPositionY(movableImage);
engine.block.setPositionX(movableImage, offsetX + 50);
engine.block.setPositionY(movableImage, offsetY + 50);

Locking Transforms#

Lock transforms to prevent repositioning, rotation, and scaling by setting transformLocked to true:

// Lock the transform to prevent user interaction
engine.block.setBool(lockedImage, 'transformLocked', true);

Troubleshooting#

Image Not Moving#

Check if transforms are locked using engine.block.getBool(block, 'transformLocked'). Ensure the image block exists and values are within parent bounds.

Unexpected Position Values#

Check position mode using engine.block.getPositionXMode() and engine.block.getPositionYMode(). Verify if using absolute (pixels) vs percentage (0.0-1.0) values. Review parent block dimensions if using percentage positioning.

Positioned Outside Visible Area#

Verify parent block dimensions and boundaries. Check coordinate system: origin is top-left, not center. Review X/Y values for calculation errors.

Percentage Positioning Not Responsive#

Ensure position mode is set to 'Percent' using engine.block.setPositionXMode(block, 'Percent'). Verify percentage values are between 0.0 and 1.0. Check that parent block dimensions can change.

API Reference#

Method	Description
`engine.block.addImage()`	Create and position image in one operation
`engine.block.setPositionX()`	Set X coordinate value
`engine.block.setPositionY()`	Set Y coordinate value
`engine.block.getPositionX()`	Get current X coordinate value
`engine.block.getPositionY()`	Get current Y coordinate value
`engine.block.setPositionXMode()`	Set position mode for X coordinate
`engine.block.setPositionYMode()`	Set position mode for Y coordinate
`engine.block.getPositionXMode()`	Get position mode for X coordinate
`engine.block.getPositionYMode()`	Get position mode for Y coordinate
`engine.block.setBool()`	Set transform lock state
`engine.block.getBool()`	Get transform lock state