ImageEn, unit iexLayers

TIELayer

TIELayer


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 of by the 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 (rectangles, ellipses, stars, etc)
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
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 miCreateImageLayers and miClickCreatePolylineLayers.

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+< or Ctrl+> Decrease/Increase the size of the font of a text or line layer
Ctrl+Enter Display the Properties Dialog
Ctrl+F Select the font for a text or line layer
Ctrl+L/M/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



Layer Viewer Component


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




Demos


Name Location Description
Layer Editing (All Layer Types) \Demos\LayerEditing\Layers_AllTypes\ Usage of image, shape, text and line layers
Layer Editing (Image Layers) \Demos\LayerEditing\Layers_Images\ Usage of image layers
Layer Editing (Image Layers) \Demos\LayerEditing\Layers_Lines\ Usage of line and polyline layers
Layer Rotation \Demos\LayerEditing\RotateLayers\ Free rotation and resizing of layers of a TImageEnView
ImageEn Layer Actions \Demos\Actions\Actions_Layers\ Image Layering application built using only ImageEnView layer actions
Dragging to Create Layers \Demos\LayerEditing\DragDropLayers\ Dragging text, images and shapes onto a TImageEnView to create layers
Magic Fill to Polygon \Demos\LayerEditing\MagicFillToPolygon\ Creates a polygon (closed TIEPolylineLayer) by performing a magic selection on an image (matching color range)
User Data in Layer \Demos\LayerEditing\UserDataInLayer\UserDataInLayer.dpr Store your own custom data with layers in a TImageEnView



Methods and Properties


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


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


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

 Provide generic access to properties in descendent classes


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.MouseInteract := [ miCreateImageLayers ];

// 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.MouseInteract := [ miMoveLayers, miResizeLayers ];

A selected text layer with resize grips:


// Allow user to rotate layers (allow multiple layer selection and ensure masks are moved with layers)
ImageEnView1.LayerOptions := ImageEnView1.LayerOptions + [ loAllowMultiSelect, loAutoSelectMask ];
ImageEnView1.MouseInteract := [ miRotateLayers ];

// Allow the user to create, size and select red arrows
ImageEnView1.MouseInteract := [ miCreateLineLayers, miMoveLayers, miResizeLayers ];
ImageEnView1.LayerDefaults.Clear();
ImageEnView1.LayerDefaults.Add( IELP_LineColor +'=clRed' );
ImageEnView1.LayerDefaults.Add( IELP_LineWidth +'=6' );
ImageEnView1.LayerDefaults.Add( IELP_LineShapeSize +'=20' );
ImageEnView1.LayerDefaults.Add( IELP_LineStartShape +'=1' );
ImageEnView1.LayerDefaults.Add( IELP_Rotate +'=235' );

 Allow user to create star shapes
IEGlobalSettings().DefaultLayerShape := iesStar5;
ImageEnView1.MouseInteract := [ miCreateShapeLayers ];

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

// Allow users to create and edit a polyline
ImageEnView1.LayersAutoClosePolylines := iecmManual;
ImageEnView1.MouseInteract := [ miClickCreatePolylineLayers, miEditLayerPoints ];



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




See Also


- LayersAdd
- LayersInsert
- TIELayerKind
- MouseInteract
- LayerOptions