Firemonkey 實現簡單的圖片拉伸不變形,是利用原始圖片的 "固定區" 及 "位伸區" 來達到此目的,因此必需要有此結構的圖片才適合。
下面以聊天氣泡為例,下圖四個角為固定區,就是拉伸時,這四個區是不變的,而拉伸區,會自動依位伸的大小自動位伸:
//------------------------------------------------------------------------------
// Design by 龜山阿卍 -
// http://www.cnblogs.com/onechen/ -
//------------------------------------------------------------------------------
unit FMX.Graphics.Helper;
interface
uses
System.Types,
FMX.Graphics;
type
TCanvasHelper = class helper for TCanvas
// 圖片四角張縮
procedure DrawBitmapCapInsets(
const Bitmap1: TBitmap; // 圖片
const DesRect: TRectF; // 目的區域
const CapInsetsRect: TRectF; // 四角區域
const Opacity: Single = 1.0; // 透明度
const HighSpeed: Boolean = False); // 高速
end;
implementation
// 圖片四角張縮
procedure TCanvasHelper.DrawBitmapCapInsets(
const Bitmap1: TBitmap; // 圖片
const DesRect: TRectF; // 目的區域
const CapInsetsRect: TRectF; // 四角區域
const Opacity: Single = 1.0; // 透明度
const HighSpeed: Boolean = False); // 高速
var SrcRect: TRectF;
begin
SrcRect := RectF(0, 0, Bitmap1.Width, Bitmap1.Height);
//-------------------------------------------------------------------------
// 最內圈 (不張縮) -
//-------------------------------------------------------------------------
// 左上
Self.DrawBitmap(Bitmap1,
RectF(SrcRect.Left,
SrcRect.Top,
SrcRect.Left + CapInsetsRect.Left,
SrcRect.Top + CapInsetsRect.Top),
RectF(DesRect.Left,
DesRect.Top,
DesRect.Left + CapInsetsRect.Left,
DesRect.Top + CapInsetsRect.Left),
Opacity, HighSpeed);
// 右上
Self.DrawBitmap(Bitmap1,
RectF(SrcRect.Right - CapInsetsRect.Right,
SrcRect.Top,
SrcRect.Right,
SrcRect.Top + CapInsetsRect.Top),
RectF(DesRect.Right - CapInsetsRect.Right,
DesRect.Top,
DesRect.Right,
DesRect.Top + CapInsetsRect.Top),
Opacity, HighSpeed);
// 左下
Self.DrawBitmap(Bitmap1,
RectF(SrcRect.Left,
SrcRect.Bottom - CapInsetsRect.Bottom,
SrcRect.Left + CapInsetsRect.Left,
SrcRect.Bottom),
RectF(DesRect.Left,
DesRect.Bottom - CapInsetsRect.Bottom,
DesRect.Left + CapInsetsRect.Left,
DesRect.Bottom),
Opacity, HighSpeed);
// 右下
Self.DrawBitmap(Bitmap1,
RectF(SrcRect.Right - CapInsetsRect.Right,
SrcRect.Bottom - CapInsetsRect.Bottom,
SrcRect.Right,
SrcRect.Bottom),
RectF(DesRect.Right - CapInsetsRect.Right,
DesRect.Bottom - CapInsetsRect.Bottom,
DesRect.Right,
DesRect.Bottom),
Opacity, HighSpeed);
// 左
Self.DrawBitmap(Bitmap1,
RectF(SrcRect.Left,
SrcRect.Top + CapInsetsRect.Top,
SrcRect.Left + CapInsetsRect.Left,
SrcRect.Bottom - CapInsetsRect.Bottom),
RectF(DesRect.Left,
DesRect.Top + CapInsetsRect.Top,
DesRect.Left + CapInsetsRect.Left,
DesRect.Bottom - CapInsetsRect.Bottom),
Opacity, HighSpeed);
// 上
Self.DrawBitmap(Bitmap1,
RectF(SrcRect.Left + CapInsetsRect.Left,
SrcRect.Top,
SrcRect.Right - CapInsetsRect.Right,
SrcRect.Top + CapInsetsRect.Top),
RectF(DesRect.Left + CapInsetsRect.Left,
DesRect.Top,
DesRect.Right - CapInsetsRect.Right,
DesRect.Top + CapInsetsRect.Top),
Opacity, HighSpeed);
// 右
Self.DrawBitmap(Bitmap1,
RectF(SrcRect.Right - CapInsetsRect.Right,
SrcRect.Top + CapInsetsRect.Top,
SrcRect.Right,
SrcRect.Bottom - CapInsetsRect.Bottom),
RectF(DesRect.Right - CapInsetsRect.Right,
DesRect.Top + CapInsetsRect.Top,
DesRect.Right,
DesRect.Bottom - CapInsetsRect.Bottom),
Opacity, HighSpeed);
// 下
Self.DrawBitmap(Bitmap1,
RectF(SrcRect.Left + CapInsetsRect.Left,
SrcRect.Bottom - CapInsetsRect.Bottom,
SrcRect.Right - CapInsetsRect.Right,
SrcRect.Bottom),
RectF(DesRect.Left + CapInsetsRect.Left,
DesRect.Bottom - CapInsetsRect.Bottom,
DesRect.Right - CapInsetsRect.Right,
DesRect.Bottom),
Opacity, HighSpeed);
// 中
Self.DrawBitmap(Bitmap1,
RectF(SrcRect.Left + CapInsetsRect.Left,
SrcRect.Top + CapInsetsRect.Top,
SrcRect.Right - CapInsetsRect.Right,
SrcRect.Bottom - CapInsetsRect.Bottom),
RectF(DesRect.Left + CapInsetsRect.Left,
DesRect.Top + CapInsetsRect.Top,
DesRect.Right - CapInsetsRect.Right,
DesRect.Bottom - CapInsetsRect.Bottom),
Opacity, HighSpeed);
end;
end.
使用方法:
uses FMX.Graphics.Helper; procedure TForm1.PaintBox2Paint(Sender: TObject; Canvas: TCanvas); begin Canvas.DrawBitmapCapInsets(Image2.Bitmap, PaintBox2.LocalRect, RectF(17, 14, 24, 16)); end;
源碼下載:
[原創]TestImageCapInsets_圖片拉伸不變形.zip
參考資料:
resizableImageWithCapInsets