Table of Contents

Hot Spots and Editor

TTMSFNCHotSpotImage displays an image with interactive regions. Each hot spot can be selectable, named, and styled separately for hover, down, and selected states.

Hot spot image editor

Add Hot Spots in Code

Use AddRectangleHotSpot, AddEllipseHotSpot, AddPathHotSpot, or AddPolygonHotSpot to create regions. Set Name, Selectable, and display flags to control how each region behaves.

var
  hs: TTMSFNCHotSpot;
begin
  TMSFNCHotSpotImage1.HotSpots.Clear;

  hs := TMSFNCHotSpotImage1.AddRectangleHotSpot(RectF(40, 40, 180, 120), 'Header');
  hs.Selectable := True;
  hs.ShowOnHover := True;
  hs.ShowHoverName := True;

  TMSFNCHotSpotImage1.SelectedHotSpot := TMSFNCHotSpotImage1.GetHotSpotIndexByName('Header');
end;

Configure Appearance and Selection

Use DefaultHotSpotAppearance for shared styling and per-hot-spot Appearance for overrides. Handle selection events to accept or reject selection changes and to react after a region is selected.

Hot spot state controls 
procedure TForm1.TMSFNCHotSpotImage1SelectedHotSpotChange(Sender: TObject; AIndex: Integer; var Allow: Boolean);
begin
  Allow := AIndex >= 0;
end;

procedure TForm1.TMSFNCHotSpotImage1SelectedHotSpotChanged(Sender: TObject; AIndex: Integer);
begin
  Caption := TMSFNCHotSpotImage1.HotSpots[AIndex].Name;
end;

Open the Runtime Editor

TTMSFNCHotSpotImageEditor can edit regions at runtime. Assign HotSpotImage before calling Execute; accepted changes are applied back to the image.

Hot spot editor list and settings 
var
  Editor: TTMSFNCHotSpotImageEditor;
begin
  Editor := TTMSFNCHotSpotImageEditor.Create(Self);
  try
    Editor.HotSpotImage := TMSFNCHotSpotImage1;
    Editor.Execute;
  finally
    Editor.Free;
  end;
end;

Edit Fill, Stroke, and Font

The editor exposes state-specific appearance pages for polygon points, fill, stroke, and font. Users can edit default appearance when no hot spot is selected, or the selected hot spot's appearance when one is active.

Hot spot editor fill settings
Hot spot editor font settings

Combining hot-spot creation, appearance, selection, and the runtime editor

The following example adds a named region with a custom hover colour, handles the selection event to update a status label, and opens the runtime editor when the user requests changes:

procedure TForm1.FormCreate(Sender: TObject);
var
  hs: TTMSFNCHotSpot;
begin
  TMSFNCHotSpotImage1.Bitmap.LoadFromFile('map.png');

  hs := TMSFNCHotSpotImage1.AddRectangleHotSpot(RectF(50, 60, 200, 140));
  hs.Name        := 'region-north';
  hs.Selectable  := True;
  hs.Appearance.HoverFill.Color := gcYellow;
end;

procedure TForm1.TMSFNCHotSpotImage1HotSpotSelected(
  Sender: TObject; AHotSpot: TTMSFNCHotSpot);
begin
  lblInfo.Caption := 'Selected: ' + AHotSpot.Name;
end;

procedure TForm1.btnEditClick(Sender: TObject);
begin
  TMSFNCHotSpotImageEditor1.HotSpotImage := TMSFNCHotSpotImage1;
  TMSFNCHotSpotImageEditor1.Execute;
end;

See Also