Having trouble getting help?
Contact Support
Contact Support
Z-Order in Image Editor component
25 Mar 202511 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 { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
imgObj;
imageEditorCreated() {
if (Browser.isDevice) {
this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
}
else {
this.imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
}
}
drawShapes() {
let dimension = this.imgObj.getImageDimension();
this.imgObj.drawRectangle(dimension.x + 10, dimension.y + 10, 150, 70, null, null, 'red');
this.imgObj.drawRectangle(dimension.x + 20, dimension.y + 20, 150, 70, null, null, 'red');
this.imgObj.drawRectangle(dimension.x + 30, dimension.y + 30, 150, 70, null, null, 'green');
this.imgObj.drawRectangle(dimension.x + 40, dimension.y + 40, 150, 70, null, null, 'red');
}
bringForward() {
this.imgObj.bringForward('shape_3');
}
sendBackward() {
this.imgObj.sendBackward('shape_3');
}
bringToFront() {
this.imgObj.bringToFront('shape_3');
}
sendToBack() {
this.imgObj.sendToBack('shape_3');
}
render() {
return (<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { this.imgObj = img; }} height="350px" created={this.imageEditorCreated.bind(this)}></ImageEditorComponent>
<div>
<ButtonComponent cssClass='e-primary' content='Draw Shapes' onClick={this.drawShapes.bind(this)} />
<ButtonComponent cssClass='e-primary' content='Bring Forward' onClick={this.bringForward.bind(this)} />
<ButtonComponent cssClass='e-primary' content='Sent Backward' onClick={this.sendBackward.bind(this)} />
<ButtonComponent cssClass='e-primary' content='Bring to Front' onClick={this.bringToFront.bind(this)} />
<ButtonComponent cssClass='e-primary' content='Send to Back' onClick={this.sendToBack.bind(this)} />
</div>
</div>);
}
}
ReactDOM.render(<App />, document.getElementById('image-editor'));import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { Browser } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
let imgObj: ImageEditorComponent;
function imageEditorCreated(): void {
if (Browser.isDevice) {
imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/flower.png');
} else {
imgObj.open('https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png');
}
}
function drawShapes(): void {
let dimension = imgObj.getImageDimension();
imgObj.drawRectangle(dimension.x + 10, dimension.y + 10, 150, 70, null, null, 'red');
imgObj.drawRectangle(dimension.x + 20, dimension.y + 20, 150, 70, null, null, 'red');
imgObj.drawRectangle(dimension.x + 30, dimension.y + 30, 150, 70, null, null, 'green');
imgObj.drawRectangle(dimension.x + 40, dimension.y + 40, 150, 70, null, null, 'red');
}
function bringForward(): void {
imgObj.bringForward('shape_3');
}
function sendBackward(): void {
imgObj.sendBackward('shape_3');
}
function bringToFront(): void {
imgObj.bringToFront('shape_3');
}
function sendToBack(): void {
imgObj.sendToBack('shape_3');
}
return (
<div className='e-img-editor-sample'>
<ImageEditorComponent ref={(img) => { imgObj = img }} created={imageEditorCreated}></ImageEditorComponent>
<div>
<ButtonComponent cssClass='e-primary' content='Draw Shapes' onClick={drawShapes} />
<ButtonComponent cssClass='e-primary' content='Bring Forward' onClick={bringForward} />
<ButtonComponent cssClass='e-primary' content='Sent Backward' onClick={sendBackward} />
<ButtonComponent cssClass='e-primary' content='Bring to Front' onClick={bringToFront} />
<ButtonComponent cssClass='e-primary' content='Send to Back' onClick={sendToBack} />
</div>
</div>
);
}
export default App;
ReactDOM.render(<App />, document.getElementById('image-editor'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Image Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<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-splitbuttons/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-inputs/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-image-editor/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/material.css"rel="stylesheet">
<link href="index.css" rel="stylesheet" />
<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='image-editor'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>