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.

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.

Create Hot SpotsPascalC++

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;

TTMSFNCHotSpot *hs;

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");

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.

Configure Appearance and SelectionPascalC++

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;

void __fastcall TForm1::TMSFNCHotSpotImage1SelectedHotSpotChange(TObject *Sender, int AIndex, bool &Allow)
{
  Allow = AIndex >= 0;
}

void __fastcall TForm1::TMSFNCHotSpotImage1SelectedHotSpotChanged(TObject *Sender, int AIndex)
{
  Caption = TMSFNCHotSpotImage1->HotSpots->Items[AIndex]->Name;
}

Open the Runtime Editor

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

Open the EditorPascalC++

var
  Editor: TTMSFNCHotSpotImageEditor;
begin
  Editor := TTMSFNCHotSpotImageEditor.Create(Self);
  try
    Editor.HotSpotImage := TMSFNCHotSpotImage1;
    Editor.Execute;
  finally
    Editor.Free;
  end;
end;

TTMSFNCHotSpotImageEditor *Editor;

Editor = new TTMSFNCHotSpotImageEditor(this);
try
{
  Editor->HotSpotImage = TMSFNCHotSpotImage1;
  Editor->Execute();
}
__finally
{
  delete Editor;
}

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.

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:

Combining hot-spot creation, appearance, selection, and the runtime editorPascalC++

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
  Caption := 'Selected: ' + AHotSpot.Name;
end;

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

void __fastcall TForm1::FormCreate(TObject *Sender)
{
  TTMSFNCHotSpot *hs;

  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;
}

void __fastcall TForm1::TMSFNCHotSpotImage1HotSpotSelected(
  TObject *Sender, TTMSFNCHotSpot *AHotSpot)
{
  Caption = "Selected: " + AHotSpot->Name;
}

void __fastcall TForm1::btnEditClick(TObject *Sender)
{
  TMSFNCHotSpotImageEditor1->HotSpotImage = TMSFNCHotSpotImage1;
  TMSFNCHotSpotImageEditor1->Execute();
}