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

結果