delphi - 如何创建一个不慢的环绕/滚动平铺区域？

Question

想象一个使用单个位图水平和垂直平铺的 Canvas ，例如:

上述内容是通过以下方式实现的:

procedure TForm1.PaintBox1Paint(Sender: TObject);
var
  X, Y: Integer;
begin
  Y := 0;
  while Y < PaintBox1.Height do
  begin
    X := 0;
    while X < PaintBox1.Width do
    begin
      PaintBox1.Canvas.Draw(X, Y, Image1.Picture.Bitmap);
      Inc(X, Image1.Picture.Bitmap.Width);
    end;
    Inc(Y, Image1.Picture.Bitmap.Height);
  end;

  PaintBox1.Canvas.Brush.Style := bsClear;
  PaintBox1.Canvas.Rectangle(PaintBox1.ClientRect);
end;

现在我想做的是扩展上面的内容以允许水平和垂直偏移来模拟使用滚动条等时平铺图像被包裹/滚动的效果。

这个想法是，例如，当更改水平偏移时，平铺图像将向左移动，从右侧您应该看到平铺图像看起来好像它们已从油漆盒的一侧缠绕到另一侧。其他。

我已经成功制作了一个测试项目，它确实按照我想要的方式工作，它看起来像这样:

我已经在 Lazarus 中编写了这个测试项目，但它可以轻松地适应在 Delphi 中进行测试。

下面是lfm:

object Form1: TForm1
  Left = 0
  Height = 625
  Top = 0
  Width = 782
  Caption = 'Form1'
  ClientHeight = 625
  ClientWidth = 782
  OnCreate = FormCreate
  Position = poScreenCenter
  Visible = False
  object Label1: TLabel
    Left = 25
    Height = 15
    Top = 16
    Width = 40
    Caption = 'Regular'
    ParentColor = False
  end
  object Label2: TLabel
    Left = 361
    Height = 15
    Top = 16
    Width = 32
    Caption = 'Offset'
    ParentColor = False
  end
  object PaintBox1: TPaintBox
    Left = 24
    Height = 320
    Top = 40
    Width = 320
    OnPaint = PaintBox1Paint
  end
  object PaintBox2: TPaintBox
    Left = 361
    Height = 320
    Top = 40
    Width = 320
    OnPaint = PaintBox2Paint
  end
  object Image1: TImage
    Left = 25
    Height = 48
    Top = 544
    Width = 48
    AutoSize = True
    Picture.Data = {
      1754506F727461626C654E6574776F726B47726170686963830A000089504E47
      0D0A1A0A0000000D49484452000000300000003008060000005702F98700000A
      4A494441546881CD997F8C5C5515C73FF7BE376F66F6C77477DBEDF677A9A4EC
      A2056D34223110C0468A091122CA822151227FD45F31C400898A1AF803635249
      C4F40F883424842A46A28480A6828AD820581A1A4B7F125AFBBBDBFD313BBB33
      F3DEBBF7F8C77D333B3F763B3BBB267A9297B9F7BD7BDF3BDF7BCEF99E73EF28
      6B85FF3779FA6F87552E1B749C199B5AD1BF24BB6A595766C5D989D286209559
      7DEDE0C0536BBABCFD95B17E3B2FDEF1EA81A67B294FD3DB95E1CCD8147DDD19
      B2299F53A385BA766F57864CCAE3E4C5C9A4ED7366AC90EEEDCAF4766782DEF1
      E9F2DABECEF4FA251DE9354664DD47D72D5DDFD3915E7DFDE0409FA7BDDE13E3
      9167BC6E56F7A4F8F99F8E8EFEE4F3830B03B0EDA60FCF7BECCE378EA4D3BE74
      A53CBDD2F7D4EAEE6CB06AC3F225EB7B3A830D3D1DE9B557ADED5D9ECB0403D9
      C0EBCBFA9E4EA73CB452D5F916383C1272AE10D19DF1185A11E06B087CDD5DFB
      9D455B402BB57A656FE7A6E9305ED7D795599FCB066B7DAD567D7AE3C09A8EC0
      1FE84CFB5D595FA73C4FE36BDDF21BB1B11CBA18727E322697F5D9D89F21E529
      26C398D800A06AC72FCA023B5E3D70E5351B07760F2ECFADCA066DBDAA49CAB1
      E5E048999129434FD667E34016AD15B115E248304E798CAD9FB7600B182BEC3B
      7C7ACBBDD75DB12A9D5A9CF28747CABC3F1AD2DF9D62437F06AD15A1018C54D7
      5B002B601703A0D102F71E3A65622BA4012B8ECD2A7EDCD89F4BF265C39EE3D3
      5CB7B19B5814A111748D923A21C9C8088803B160004FECFE57B56DAC45A49982
      6DC3BD5A20B5CF1C30E1743E647434C4A228C782566044A8C5AD05E20454BC18
      0B7C73CB47EAFA5F3D7C7ADE736B95B722942343680CE3D365AC80566E7545EA
      A3546B88C4B1921230A67E81DA02B0FD9577AB6D6305D31851F304321DC64C96
      62AC588C1504B7B2612C68A5D015040AB475734293805C8C05EEDF7A755DFF9E
      C7E76F818A9423C3443122328257C3AAD60AC68255159723F955587131E06B17
      D70B06F0D88BEFD47DB0D1DF5B8915A16CDCAAD78940642116E7264ACD28AA11
      626BB1C9F3C64FB605E0A15B37D7F5EFDEFE52132BB40651C32452B927C406A2
      58507AC68534CEF7232358014F2F320F3CF2C2DBD5B6B182B582D026824651EE
      8AAD10092833E3429E5208E2005820E5D86FC1007E70FB27EAFA77FEF445C0AD
      A01569C9F9738958B7C2462C4A5442A52E1E8C08C6385A350667920503F8F59B
      D5B61167815A69E6F9D65289E3589C825AD5D854C0183BE3F7162C8BA0D147BE
      744D5DFF8EC77E37E7D8762C22022282A904A9024F25F4190B2A798FD2B2381A
      7DE8B93DD5B6313661A2B9C737B2945899357B4342A346B02AA14E208A6DF20E
      97A151AAC9EAEDD1E85DD7D6F56F7BF4B7ED4CAF4A158476E5851117A871A29C
      46B008C68ACBCA0AC4B81831F122007C67E75FAB6DC742ED67E27A20954692D9
      AD73178B101B41251CA7948B95624928858B00F0F857AEAFEBDFFAE3E7EB154A
      5650E9F6D8C8E27283490A1E93B88ED60A57F281AF61AC685D55BA5000DF78EA
      B56A3B36B6EAFF56A4AA7C2D905A309264EE590F11923A3F322E464CB20F5022
      E86AB6538C4C5A6431007EF1B51BEBFAB73CFCAB96736416852BC1ED55EA4EE5
      4A89C8D494E82E763149069E2C19268BA66143D92680FB76ECAEB68DB5583393
      C0CC0232B2B5E2283451BE1C591433855C8585B5C085494B1C0BB2181A7D72DB
      96BAFECDDF7B6E469959E8713E794029B058F2C53809DC99FB5A293C0DF992E5
      623E464410594429B1FE96EF73ED673E45269D228A0DC658EB8AB339B87D9664
      168B5437305AE1AC6884C8B8CD8A02D06ED545095614A74663577E57227AA100
      8EBFFC685DFFEB4FBE96F55B304EFD4EACFE5939364C873146847CD1602D7404
      9A5264B1CA31CF48DE30316550B878688CA9B600745D7E3B9B6EDECAE0D0FAA0
      A73B7BC34D9B2FDB96CB386B342B3EE3CBB5A20144988A0C2282D230D09FE6D8
      C922FDFD198C5862EB363BE3D3C2D9F188DAB85ED4A6BE70EC05001E78F6EF3B
      1EB8EDE3F72EEB4C530C63A7989A51BC1644ED3370543915C6D5673D198FCBFB
      04A533BCF77E910FADCD622C144A8673E33171ECE2412A001A10B43E2AAB91DC
      E09D74ACDD4AAE33BD6959679AA97254A7EC5C759115088D5BF562546F2DAD14
      EB7B35FDD910C4920934A39311A74762A2A46C90A45C1769DE925DD202B9A1E1
      CADAE9E4523A9551B1B1552D5A9DFF44D6129A9903806CCAC35A4B313255C0B1
      71C561A11873763CE2C2B841254B2BB8F32057A54AEB723A515A250A7BC9AF9F
      B415A044A4C972B540625B29D06C93C9D3BE46A91446C4056BA57E568A722894
      CA33AB5ED1B576D12F99077243C3C12C4AD7025180B2B61E8015B752715290B5
      FACFC1D7CA156D8DE576E2268DF3DD30690D00C8004183D2F500C422222AB696
      E9C49FE7FB274945E1B9868B50BF00CD8717D816892C063A80748DF28D16C088
      780B51FC929204A8A599EBA5F29CA6186E02504C940D12103E33F15005803496
      540B50B83A36711D35D39E6BBE4053355AE7CBF983BB042800A3409800C92457
      BA72999A18A89C48D45EF31191E6EDA85857ACD958DC65672E1171ABE8296F4E
      003520A680F3403E1993AEBD444455EAFB76E552B59324C02AE7123A2927B482
      52D916CF8D44E70BA5DC91DA39B3E681FCC15D921B1A9E06C68125407715AC63
      8AB612E07C4245092804AD04CF8352D9469313F18589317B267F313E519AB4A3
      D1B41D11237F6C09209114D00FF430C34C00182B2D62A0B5C2E07242E06BBA02
      0FA5C3383F194FC8D9E8C2FE7D8523A5097B269AB679890981349A69A578E6FC
      1F361F9D2F00838B8718E8023C944A08A11E403BE7A356045F2B966483E89DE3
      178FEE3D7AF6CD7FEE3FFAC67B47CC581C5EF9C5E51BFDA9890FC273CA531E0A
      8D56392C23589E3EB77BF389C6F7CD09207F70579C1B1A3E0D9481CB811538AB
      48CAF702CFF7E6AD7C39B64C14C3786CAAFCBE15D9F3EEF191BF3CB5F3E57746
      3E387E6AFAC29982298E84C1B22D9B7AAFB8120C018AC0E51B9D41CC49A4BC53
      791D67677BF7256BA1FCC15D06389F1B1A0E7114BB1E48BDBDEFD89E939FFBD8
      CA8EB4DF618CAD9EE7D42A3C3E5D666C3A3C3A5628BD558CCC6B22F20F84431B
      57F694BEFDD94DDCBFF56ABA37DE91D17ED0E9752F4DEB742A4070078BC662F1
      324878CCE45F797A6CDF8FC6E7D251CD3719E5868633C05A609D9898CE156BB2
      7D6B56AD7BE287F7FCEC86C115C1DE13A38C4E95FF9D9F2EBF558CCC9F813780
      C33837444408523E5D81CF7DDFDA4EE1F471941F68208B943C2FF7C9C1DCDA2D
      DF5D7A592E3CF1D6545EA474C0E45FDA69CBFBA6505D2031F943CD0769F30690
      80F070F1A0252A174C794AAEBAF50B776FFBF28D03FD4B3A5EBF38593C70597F
      777EAEF97D9D6936ADEA6D7EA7943C2F77CDD5DDABB73C3875569F4315F69AC2
      CBCF8EEF7FACDC4AA776FFE035C004804AA5F15369F63DBFF3991D08BF7C7898
      8B93458E8F14005795766752F47406F474A4E9C906746553FC7EDF09EEB9EB41
      C41A929AD9803248398F8895F0D4EBA6F4C26FB0E32637345CF7F1FCC15D4D0A
      B565814BC98542893313457AB201B96C8A9E6CD0D6FCDCE0B0EF77AE5A3ABA77
      FBB976E6FDD700FCAFE43F765B2B40A722D3C30000000049454E44AE426082
    }
    Visible = False
  end
  object Label3: TLabel
    Left = 645
    Height = 15
    Top = 376
    Width = 36
    Alignment = taRightJustify
    AutoSize = False
    Caption = '0'
    ParentColor = False
  end
  object ScrollBar1: TScrollBar
    Left = 361
    Height = 17
    Top = 374
    Width = 273
    Max = 5000
    PageSize = 0
    TabOrder = 0
    OnChange = ScrollBar1Change
  end
  object ScrollBar2: TScrollBar
    Left = 696
    Height = 320
    Top = 40
    Width = 17
    Kind = sbVertical
    Max = 5000
    PageSize = 0
    TabOrder = 1
    OnChange = ScrollBar2Change
  end
  object Label4: TLabel
    Left = 720
    Height = 15
    Top = 40
    Width = 34
    Caption = 'Label4'
    ParentColor = False
  end
end

以及来源

unit Unit1;

{$mode delphi}

interface

uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, StdCtrls,
  ExtCtrls;

{ TForm1 }

type
  TForm1 = class(TForm)
    Image1: TImage;
    Label1: TLabel;
    Label2: TLabel;
    Label3: TLabel;
    Label4: TLabel;
    PaintBox1: TPaintBox;
    PaintBox2: TPaintBox;
    ScrollBar1: TScrollBar;
    ScrollBar2: TScrollBar;
    procedure FormCreate(Sender: TObject);
    procedure PaintBox1Paint(Sender: TObject);
    procedure PaintBox2Paint(Sender: TObject);
    procedure ScrollBar1Change(Sender: TObject);
    procedure ScrollBar2Change(Sender: TObject);
  private
    FOffsetX: Integer;
    FOffsetY: Integer;
  public
    { public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.lfm}

{ TForm1 }

procedure TForm1.FormCreate(Sender: TObject);
begin
  FOffsetX := 0;
  FOffsetY := 0;
end;

procedure TForm1.PaintBox1Paint(Sender: TObject);
var
  X, Y: Integer;
begin
  Y := 0;
  while Y < PaintBox1.Height do
  begin
    X := 0;
    while X < PaintBox1.Width do
    begin
      PaintBox1.Canvas.Draw(X, Y, Image1.Picture.Bitmap);
      Inc(X, Image1.Picture.Bitmap.Width);
    end;
    Inc(Y, Image1.Picture.Bitmap.Height);
  end;

  PaintBox1.Canvas.Brush.Style := bsClear;
  PaintBox1.Canvas.Rectangle(PaintBox1.ClientRect);
end;

// needs improvement
procedure TForm1.PaintBox2Paint(Sender: TObject);
var
  X, Y: Integer;
begin
  Y := -FOffsetY;
  while Y < PaintBox2.Height do
  begin
    X := -FOffsetX;
    while X < PaintBox2.Width do
    begin
      PaintBox2.Canvas.Draw(X, Y, Image1.Picture.Bitmap);
      Inc(X, Image1.Picture.Bitmap.Width);
    end;
    Inc(Y, Image1.Picture.Bitmap.Height);
  end;

  PaintBox2.Canvas.Brush.Style := bsClear;
  PaintBox2.Canvas.Rectangle(PaintBox2.ClientRect);
end;

procedure TForm1.ScrollBar1Change(Sender: TObject);
begin
  FOffsetX := ScrollBar1.Position;
  Label3.Caption := IntToStr(FOffsetX);
  PaintBox2.Invalidate;
end;

procedure TForm1.ScrollBar2Change(Sender: TObject);
begin
  FOffsetY := ScrollBar2.Position;
  Label4.Caption := IntToStr(FOffsetY);
  PaintBox2.Invalidate;
end;

end.

我的问题是如何改进我现有的代码以及是否有更好的方法来做到这一点，我的任务可能过于复杂了？

对于小偏移量，油漆盒绘制速度相当快，但对于较大的偏移量，例如 5000(我当前正在测试的)，滚动变得相当慢，我想知道我是否错过了一些明显的东西？

Answer 1

无需绘制所有不可见的位图。对于任何给定的位图宽度/高度(我们称之为“图 block ”)，您只需要开始/完成绘制，最多超出 Canvas 边缘 1 个图 block 宽度或高度。

即计算第一个可见的图 block 并开始用它进行绘制。

上图试图说明我的意思...只有绿色图 block 位于可见区域(蓝色阴影)，因此即使偏移量包括那些显示为红色的图 block ，也没有必要绘制它们。

Windows(操作系统)无论如何都会剪辑这些，但您仍然花时间迭代那些不可见的图 block ，这就是为什么较大的偏移量会导致性能下降......您花时间通过“不可见的图 block 进行计数” "空间，然后到达您实际需要绘制的图 block 。

计算开始绘画的“原点”是简单的算术，不需要循环迭代。不要将 Y 和 X 初始化为绝对偏移量，而是使用简单的 mod 将它们设置为该偏移量的图 block 高度/宽度的第一个倍数操作:

Y := -FOffsetY mod Image1.Height;

X := -FOffseXY mod Image1.Width;

或类似

Jerry 使用屏幕外位图进行观察，然后将其传输到您的控件中，这也将优化实际的绘画。