Z-order in the EJ2 TypeScript Image Editor control

25 Mar 20256 minutes to read

We are excited to introduce z-order support in the Image Editor. It’s a powerful tool that allows users to adjust the positioning of annotations. This feature is particularly useful for designing personalized templates like greeting cards or posters, where managing the layering of multiple annotations is crucial for a polished final product.

Types of adjustment in the Image Editor z-order support.

  • Bring forward - Switch the selected annotation with the annotation one layer ahead of it.

  • Sent Backward - Switch the selected annotation with the annotation one layer behind it.

  • Bring to Front - Move the selected annotation to ahead of all other annotations.

  • Send to Back - Move the selected annotation to behind all other annotations.

In the following example, you can use the z-order support.

import { ImageEditor } from '@syncfusion/ej2-image-editor';
import { Browser } from '@syncfusion/ej2-base';

//Image Editor items definition

let imageEditorObj: ImageEditor = new ImageEditor({
    width: '550px',
    height: '330px',
    created: () => {
        if (Browser.isDevice) {
            imageEditorObj.open('bee-eater.png');
        } else {
            imageEditorObj.open('bee-eater.png');
        }
    }
});
imageEditorObj.appendTo('#imageeditor');

(document.getElementById('drawShapes') as HTMLElement).onclick = function () {
    let dimension: any = imageEditorObj.getImageDimension();
    imageEditorObj.drawRectangle(dimension.x + 10, dimension.y + 10, 150, 70, null, null, 'red');
    imageEditorObj.drawRectangle(dimension.x + 20, dimension.y + 20, 150, 70, null, null, 'red');
    imageEditorObj.drawRectangle(dimension.x + 30, dimension.y + 30, 150, 70, null, null, 'green');
    imageEditorObj.drawRectangle(dimension.x + 40, dimension.y + 40, 150, 70, null, null, 'red');
};
(document.getElementById('bringForward') as HTMLElement).onclick = function () {
    imageEditorObj.bringForward('shape_3');
};
(document.getElementById('sendBackward') as HTMLElement).onclick = function () {
    imageEditorObj.sendBackward('shape_3');
};
(document.getElementById('bringToFront') as HTMLElement).onclick = function () {
    imageEditorObj.bringToFront('shape_3');
};
(document.getElementById('sendToBack') as HTMLElement).onclick = function () {
    imageEditorObj.sendToBack('shape_3');
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-image-editor/styles/material.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div class="control-section">
            <div id="imageeditor" class="row"></div>
            <div>
                <button id="drawShapes" class="e-btn e-primary">Draw Shapes</button>
                <button id="bringForward" class="e-btn e-primary">Bring Forward</button>
                <button id="sendBackward" class="e-btn e-primary">Sent Backward</button>
                <button id="bringToFront" class="e-btn e-primary">Bring to Front</button>
                <button id="sendToBack" class="e-btn e-primary">Send to Back</button>
            </div>
        </div>
    </div>
</body>

</html>