鼠标进入时使图像向下和左移动3个像素，鼠标离开时返回原始位置

Question

我有一个包含大约 168 个 Timage 对象的表单，其中包含用户可选择的图标。

当鼠标悬停在 Timage 对象上时，我希望每个图标向下和向右移动 3 个像素。当鼠标离开 Timage 时，我希望它返回到原来的位置。这将为用户界面添加令人愉悦的效果。

我知道我可以在 OnMouseEnter 和 OnMouseLeave 事件中做到这一点，并且效果很好 - 但是我不禁认为必须有一种更优雅/更有效的方法来为所有 168 个 Timage 对象产生这种效果，而不是创建 168 个OnMouseEnter 程序和 168 个 OnMouseLeave 程序。

非常感谢任何帮助...

Answer 1

创建一个OnMouseEnter 事件处理程序并将其分配给每个组件就足够了（OnMouseLeave 类似）。

如果这些组件是在设计时创建的（很难想象），那么您可以在表单设计器中选择所有 168 个图像，然后转到对象检查器并在一个正如 Remy Lebeau 在 cmets 中所写的那样，单打独斗。替代方式 - 使用现有的组件列表（假设所有者是表单并且表单上没有其他 TImage）：

for i := 0 to Components.Count - 1 do
  if Components[i] is TImage then  //perhaps more conditions to separate needed images
     TImage(Components[i]).OnMouseEnter := EnterHandler;

如果组件是在运行时创建的并且它们存储在数组或列表中，则处理程序分配更简单：

for i := 0 to Images.Length - 1 do
   Images[i].OnMouseEnter := EnterHandler;

---

然后您可以使用事件的Sender 参数处理每个组件：

procedure TMyForm.EnterHandler(Sender: TObject);
begin
  TImage(Sender).Left := TImage(Sender).Left + 3;
  TImage(Sender).Top := TImage(Sender).Top + 3;
end;

procedure TMyForm.LeaveHandler(Sender: TObject);
begin
  TImage(Sender).Left := TImage(Sender).Left - 3;
  TImage(Sender).Top := TImage(Sender).Top - 3;
end;

Answer 2

这里最简洁的解决方案是创建一个自定义组件，并让您的设计远离如此繁重且扁平的设计时布局。这些自然变得难以维护和修改。

也就是说，如果您想要快速破解以节省大量打字和点击，您可以使用插入器类来注入此鼠标行为。

在表单单元的interface 部分，在表单的类声明上方添加以下类：

type
  TImage = class(Vcl.ExtCtrls.TImage)
  private
    procedure CMMouseEnter(var Message: TMessage); message CM_MOUSEENTER;
    procedure CMMouseLeave(var Message: TMessage); message CM_MOUSELEAVE;
  end;       

  TForm1 = class(TForm)
    { ... rest of your form as normal }
  end;

然后，在implementation 部分中，添加以下内容：

procedure TImage.CMMouseEnter(var Message: TMessage);
begin
  inherited;
  Top := Top + 3;   
  Left := Left + 3;
end;

procedure TImage.CMMouseLeave(var Message: TMessage);
begin
  inherited;
  Top := Top - 3;   
  Left := Left - 3;
end;

像这样定义插入器会有效地导致您修改后的TImage 类替换在设计时放置在表单上的所有现有TImage 组件。

请注意，此示例仅适用于 Windows 上的 VCL。对于使用 FMX 的跨平台解决方案，所有 UI 控件都有虚拟的 DoMouseEnter() 和 DoMouseLeave() 方法，您可以使用 override 代替，例如：

type
  TImage = class(FMX.Objects.TImage)
  protected
    procedure DoMouseEnter; override;
    procedure DoMouseLeave; override;
  end;       

...

procedure TImage.DoMouseEnter;
begin
  inherited;
  Top := Top + 3;   
  Left := Left + 3;
end;

procedure TImage.DoMouseLeave;
begin
  inherited;
  Top := Top - 3;   
  Left := Left - 3;
end;