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

```txt:動作確認
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;
}
//---------------------------------------------------------------------------
```

### 結果

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/366cd838-4a66-6494-661a-cf182e459b17.png)

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

### 結果

![qiita.png](https://qiita-image-store.s3.amazonaws.com/0/32870/e68f57b0-0566-2aa5-e6da-a40e2b45dd56.png)