c++ builder XE4, 10.2 Tokyo > TImage > 異なるサイズのTImageの位置を揃える > 左右方向センター / 右端揃え


動作確認
C++ Builder XE4
RAD Studio 10.2 Tokyo Update 2 (追記: 2017/12/28)

以下のファイルがあるとする。

  • 001_110x110.jpg : W110 x H110の画像
  • 002_90x90.jpg : W90 x H90の画像

左右中央で揃える

両者を縦に並べた時に、センター(定義:左右の中央のこと)で揃えたい。

ClientWidthあたりを使えば良さそうだ。

code

Unit1.h
//---------------------------------------------------------------------------

#ifndef Unit1H
#define Unit1H
//---------------------------------------------------------------------------
#include <System.Classes.hpp>
#include <Vcl.Controls.hpp>
#include <Vcl.StdCtrls.hpp>
#include <Vcl.Forms.hpp>
#include <Vcl.ExtCtrls.hpp>
//---------------------------------------------------------------------------
class TForm1 : public TForm
{
__published:    // IDE で管理されるコンポーネント
    TImage *Image1;
    TImage *Image2;
    TButton *Button1;
    void __fastcall Button1Click(TObject *Sender);
private:    // ユーザー宣言
public:     // ユーザー宣言
    __fastcall TForm1(TComponent* Owner);
};
//---------------------------------------------------------------------------
extern PACKAGE TForm1 *Form1;
//---------------------------------------------------------------------------
#endif
Unit1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include <Jpeg.hpp>
#include <memory>
#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
    : TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
    String file1 = L"001_110x110.jpg";
    String file2 = L"002_90x90.jpg";

    // 1. Load Images
    std::unique_ptr<TPicture> pict(new TPicture);

    pict->LoadFromFile(file1);
    Image1->Width = pict->Width;
    Image1->Height = pict->Height;
    Image1->Picture->LoadFromFile(file1);

    pict->LoadFromFile(file2);
    Image2->Width = pict->Width;
    Image2->Height = pict->Height;
    Image2->Picture->LoadFromFile(file2);

    // 2. Align with the center position
    int img1center = Image1->ClientWidth / 2 + Image1->Left;
    Image2->Left = img1center - Image2->ClientWidth / 2;
}
//---------------------------------------------------------------------------

結果

ScaleBy()使用時

this->ScaleBy(140,100);
のようにしてフォームの表示倍率を変更している場合、上記のコードでは左右のずれが発生する。

以下の対応をすれば「ずれ」は解消するようだ。

  • TImageのプロパティ「Center」をTrueにする

右端で揃える

読込み画像が様々な横幅の場合に対応できる。

計算式としては

  • Image2->Left = Image1->Left + Image1->Width - Image2->Width
Utni1.cpp
//---------------------------------------------------------------------------

#include <vcl.h>
#pragma hdrstop

#include <Jpeg.hpp>
#include <memory>
#include "Unit1.h"
//---------------------------------------------------------------------------
#pragma package(smart_init)
#pragma resource "*.dfm"
TForm1 *Form1;
//---------------------------------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
    : TForm(Owner)
{
}
//---------------------------------------------------------------------------
void __fastcall TForm1::FormShow(TObject *Sender)
{

    String file1 = L"001_110x110.jpg";
    String file2 = L"002_90x90.jpg";

    // 1. Load Images
    std::unique_ptr<TPicture> pict(new TPicture);

    pict->LoadFromFile(file1);
    Image1->Width = pict->Width;
    Image1->Height = pict->Height;
    Image1->Picture->LoadFromFile(file1);

    pict->LoadFromFile(file2);
    Image2->Width = pict->Width;
    Image2->Height = pict->Height;
    Image2->Picture->LoadFromFile(file2);

    // 2. Align with the center position
    Image2->Left = Image1->Left + Image1->ClientWidth - Image2->ClientWidth;
}
//---------------------------------------------------------------------------

結果