Firemonkey 圖片顯示拉伸不變形

Firemonkey 實現簡單的圖片拉伸不變形，是利用原始圖片的 "固定區" 及 "位伸區" 來達到此目的，因此必需要有此結構的圖片才適合。

下面以聊天氣泡為例，下圖四個角為固定區，就是拉伸時，這四個區是不變的，而拉伸區，會自動依位伸的大小自動位伸：

實作效果：

 

代碼，直接擴展 Canvas 功能：

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