ImageEn, unit iexLayers

TIELayer


Declaration

TIETextLayer = class;


Description

TImageEnView supports layer editing, allowing your users to build complex images from text, shapes, lines, polygon and other images, and merge them. All layer types can be created, resized, rotated and moved, either programatically or by your end-user.



Note: If you are transitioning your code from TImageEnVect Objects to TIELayers, read our transition guide.


Loading and Saving

Standard image types such as JPEG and BMP, do not support layers, so to preserve your layer information you will need to use one of the following formats:
- ImageEn Native Format (*.ien): Maintains all layer information. Supported only by ImageEn (Loading and Saving)
- Photoshop (*.psd): Widely used layer format. Only image layers are supported; non-image layers will be converted when saving (Loading and Saving)
- Scalable Vector Graphics (*.svg): Vector image format for web browsers (Saving only)
- Adobe PDF document (*.pdf): Scalable document format (Saving only)


Overview




Layer Types

TIELayer is the ancestor of all layer classes:

Kind Class Description
ielkImage TIEImageLayer Layer that contains an image
ielkShape TIEShapeLayer Layer that displays standard shapes, such as rectangles, ellipses, stars, etc. One hundred built-in shapes are available.
ielkLine TIELineLayer Layer that displays a single line, optionally including a text label and start and ending arrows
ielkPolyline TIEPolylineLayer Layer that displays a polyline or polygon of multiple points
ielkAngle TIEAngleLayer Layer that displays an angle
ielkText TIETextLayer Layer that displays text


Layer Insertion and Editing

Layers can be inserted programatically using LayersAdd or LayersInsert, and manipulated using CurrentLayer or Layers.

You can also allow your users to add and edit layers using Mouse Interactions, such as mlCreateImageLayers and mlClickCreatePolylineLayers.

The following keyboard shortcuts are also available (if enabled in LayerOptions):

Shortcut Description
Cursor Keys Move layer (Hold Shift to move faster)
Ctrl+Cursor Keys Resize layer (Hold Shift to size faster)
Delete Remove the current layer
F2 Edit the text of the current layer
Ctrl+Tab Select next layer (Hold Shift to get previous)
Ctrl+[ or Ctrl+] Move layer back or forward (Hold Shift to move to very back/front)
Ctrl+Comma Decrease the size of the font of a text or line layer, or the border or line width
Ctrl+Period Increase the size of the font of a text or line layer, or the border or line width
Alt+Enter Display the Properties Dialog
Ctrl+A Select all layers
Ctrl+D Select the font for a text or line layer
Ctrl+B Toggle bold of the font of a text or line layer
Ctrl+I Toggle italics of the font of a text or line layer
Ctrl+U Toggle underline of the font of a text or line layer
Ctrl+L/E/R Align text left/center/right
Shift+Ctrl+L/M/R Align text top/vert center/bottom
Escape Cancel text editing or line or polyline insertion
Enter Enact text editing or polyline insertion
Ctrl+C/X/V Cut/Copy/Paste a layer
Alt+I Invert the angle of an layer (e.g. 90 will become 270)
Alt+Up/Down Increase/Decrease the curve of a line layer

Also, see the effect of Ctrl, Alt and Shift modifiers: ShiftKeyLock


Layer Components

You can preview and manipulate the layers in a TImageEnView using TImageEnLayerMView.



You can display and edit properties of the current layer using TIELayerProps.




Demos

Demo Description Demo Project Folder Compiled Demo
All Layer Editing Usage of image, shape, text and line layers \Demos\LayerEditing\Layers_AllTypes\Layers.dpr   
ImageEn Layer Actions Image Layering application built using only ImageEnView Layer actions \Demos\Actions\Actions_Layers\LayerActions.dpr   
Image Layer Editing Usage of image layers \Demos\LayerEditing\Layers_Images\Layers.dpr   
Line Layer Editing Creating and point editing line, poly-line and angle layers \Demos\LayerEditing\Layers_Lines\Layers.dpr   
Text Layers Adding and editing text layers, including rich formatting \Demos\LayerEditing\Layers_Text\TextLayers.dpr   
Adding Text to Images Draw text onto images using text layers \Demos\LayerEditing\Layers_TextOut\TextLayers.dpr   
Dragging to Create Layers Dragging text, images and shapes onto a TImageEnView to create layers \Demos\LayerEditing\DragDropLayers\Layers_DragDrop.dpr   
Custom Drawing Layers Custom drawing layers to highlight content in the background layer \Demos\LayerEditing\Layers_CustomDraw\LayersDraw.dpr   
Layer Masks Using a mask to hide portions of an image layer \Demos\LayerEditing\LayerMask\LayerMask.dpr   
Layer Rotation Free rotation and resizing of layers using mouse interactions \Demos\LayerEditing\RotateLayers\RotateLayers.dpr   
Magic Fill to Polygon Creates a polygon (closed TIEPolylineLayer) by performing a magic selection on an image (matching color range) \Demos\LayerEditing\MagicFillToPolygon\Magic2Polygon.dpr   
Stamp Layers Add text, shapes, images and arrows directly to an image by clicking and dragging \Demos\LayerEditing\StampTextAndShapes\StampLayers.dpr   
User Data in Layer Store your own custom data with layers in a TImageEnView \Demos\LayerEditing\UserDataInLayer\UserDataInLayer.dpr   
Database Layers Demo Adding annotations to an image stored within a database blob field using FireDAC and a TIEDBBitmap \Demos\Database\DBDemo_Layers\DBDemoLayers.dpr   


Examples

ImageEnView1.LayersAdd( ielkImage ); // Append an image layer
ImageEnView1.IO.LoadFromFile('C:\image.jpg'); // Load image into the new/active layer


// Add a yellow explosion shape layer at size 220 x 120
ImageEnView1.LayersAdd( iesExplosion, 50, 50, 220, 120 );
ImageEnView1.CurrentLayer.FillColor := clYellow;
ImageEnView1.CurrentLayer.BorderWidth := 0;
ImageEnView1.Update();




// Append an image layer and assign a pink border
ImageEnView1.LayersAdd( ielkImage ); // Append an image layer
ImageEnView1.IO.LoadFromFile('C:\New Zealand.jpg'); // Load image into the new/active layer
ImageEnView1.CurrentLayer.BorderColor := $008000FF;
ImageEnView1.CurrentLayer.BorderWidth := 3;




// Allow users to create image layers. Prompt for an image file after selection
ImageEnView1.LayerOptions := ImageEnView1.LayerOptions + [ loAutoPromptForImage ];
ImageEnView1.MouseInteractLayers := [ mlCreateImageLayers ];


// Allow user to move and resize layers (allow multiple layer selection and ensure masks are moved with layers)
ImageEnView1.LayerOptions := ImageEnView1.LayerOptions + [ loAllowMultiSelect, loAutoSelectMask ];
ImageEnView1.MouseInteractLayers := [ mlMoveLayers, mlResizeLayers ];

A selected text layer with resize grips:



// Allow user to rotate layers
// Enable multiple layer selection, ensure masks are moved with layers and show a rotation grip
ImageEnView1.LayerOptions := ImageEnView1.LayerOptions + [ loAllowMultiSelect, loAutoSelectMask, loShowRotationGrip ];
ImageEnView1.MouseInteractLayers := [ mlRotateLayers ];




// Allow the user to create, size and rotate red arrows
ImageEnView1.LayerOptions := ImageEnView1.LayerOptions + [ loShowRotationGrip ];
ImageEnView1.MouseInteractLayers := [ mlCreateLineLayers, mlMoveLayers, mlResizeLayers, mlRotateLayers ];
ImageEnView1.LayerDefaults.Clear();
ImageEnView1.LayerDefaults.Values[ IELP_LineColor ] := 'clRed';
ImageEnView1.LayerDefaults.Values[ IELP_LineWidth ] := '6';
ImageEnView1.LayerDefaults.Values[ IELP_LineShapeSize ] := '20';
ImageEnView1.LayerDefaults.Values[ IELP_LineStartShape ] := '1';
ImageEnView1.LayerDefaults.Values[ IELP_Rotate ] := '235';

 Allow user to create star shapes at preferred aspect ratio
ImageEnView1.LayersResizeAspectRatio := iearAlways;
IEGlobalSettings().DefaultLayerShape := iesStar5;
ImageEnView1.MouseInteractLayers := [ mlCreateShapeLayers ];


// Allow user to draw a polygon
ImageEnView1.LayersAutoClosePolylines := iecmAlways;
ImageEnView1.MouseInteractLayers := [ mlClickCreatePolylineLayers ];


// Allow users to create and edit a polyline
ImageEnView1.LayersAutoClosePolylines := iecmManual;
ImageEnView1.MouseInteractLayers := [ mlClickCreatePolylineLayers, mlEditLayerPoints ];



// Allow users to edit a polyline. Hold Alt key to turn line into a curve
ImageEnView1.MouseInteractLayers := [ mlEditLayerPoints ];



// Draw a Smiley Face

// make layer lines thicker
ImageEnView1.LayerDefaults.Values[ IELP_BorderWidth ] := '10';
ImageEnView1.LayerDefaults.Values[ IELP_FillColor ] := 'clWhite';

// LEFT EYE
// Add an ellipse shape layer
ImageEnView1.LayersAdd( iesEllipse, 100, 100, 30, 30 );

// RIGHT EYE
// Add an ellipse shape layer
ImageEnView1.LayersAdd( iesEllipse, 170, 100, 30, 30 );

// SMILE
// Add a line layer
ImageEnView1.LayersAdd( Point( 100, 150 ), Point( 200, 150 ));

// Curve it
TIELineLayer(ImageEnView1.CurrentLayer).Curve := 1;

// Show changes
ImageEnView1.Update();





Methods and Properties

General
Public Method  Assign
Public Property  Bitmap
Public Method  ConvertToImageLayer
Public Method  ConvertToPolylineLayer
Public Method  CopyToBitmap
Public Property  DrawingInfo
Public Method  DrawToCanvas
Public Property  DrawOuter
Public Method  GetDefaultName
Public Method  GetDescription
Public Method  GetLayerMask
Public Method  GetProperties
Public Property  Guid
Public Property  GroupIndex
Public Property  Hint
Public Property  IsMask
Public Property  Kind
Public Property  LayerIndex
Public Property  Locked
Public Property  Modified
Public Property  Name
Public Property  Selectable
Public Property  Selected
Public Method  SetProperties
Public Method  SetTextProperties
Public Method  Swap
Public Method  SupportsFeature
Public Property  Tag
Public Property  URL
Public Property  UserData
Public Property  UserDataLen
Public Property  Visible
Public Property  VisibleBox

Style
Public Property  AntiAlias
Public Property  AlphaEdgeFeathering
Public Property  BorderColor
Public Property  BorderWidth
Public Property  Cropped
Public Property  FillColor
Public Property  FillColor2
Public Property  FillGradient
Public Property  FillOpacity
Public Property  Flip
Public Property  InnerGlow
Public Property  Opacity
Public Property  Operation
Public Property  Rotate
Public Property  RotateCenterX
Public Property  RotateCenterY
Public Property  SoftShadow

Size and Position
Public Property  AspectRatioLocked
Public Property  ClientAreaBox
Public Method  ConvXBmp2Scr
Public Method  ConvXScr2Bmp
Public Method  ConvYBmp2Scr
Public Method  ConvYScr2Bmp
Public Property  Height
Public Property  LayerRect
Public Method  PointOverLayer
Public Property  PosX
Public Property  PosY
Public Method  PreferredAspectRatio
Public Method  RestoreAspectRatio
Public Property  Width

 Provides generic access to properties in descendent classes



See Also

- LayersAdd
- LayersInsert
- TIELayerKind
- MouseInteractLayers
- LayerOptions