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