delphi 如何在FireMonkey中将图像绘制为旋转矩形?

oipij1gg  于 2022-12-03  发布在  其他
关注(0)|答案(1)|浏览(197)

在FireMonkey中,将位图绘制到源矩形非常简单:

Canvas.DrawBitmap(FBitmap, ImageSrcRect, ImageDstRect, 1);

我是在TPaintBox的画布上做的,我想画一个旋转的位图(和缩放的,因为目标尺寸可能和源尺寸不一样)。
具体而言:

  • 我有两点
  • 图像应放置在这两点之间的中心点下方
  • 图像应按照两点之间的Angular 旋转

如图所示:

剩下的一个是我目前能做的;右边的是我想做的
最好的办法是什么?
我所尝试的
为了保持现有代码的简单性(例如,绘制到目标矩形,从而缩放结果),我一直在尝试在调用现有DrawBitmap代码之前向画布的矩阵中添加一个旋转矩阵。例如,

OldMatrix := Canvas.Matrix; // Original, to restore

W := PointB.X - PointA.X;
H := PointA.Y - PointB.Y;
RotationMatrix := TMatrix.CreateRotation(-ArcTan2(H, W));
Canvas.SetMatrix(OldMatrix * RotationMatrix);

Canvas.DrawBitmap(FImage, ImageSrcRect, ImageDstRect, 1);

Canvas.SetMatrix(OldMatrix);

以及与现有矩阵相乘的几个变体,创建具有平移和旋转的全新矩阵,等等。所有这些 * 部分 * 工作:旋转Angular 是正确的,但我在使位置保持一致方面遇到了很多麻烦-例如,围绕中心点旋转(这甚至不是围绕点旋转位图的顶部,而不是围绕中心旋转。)我发现旋转后的图像在右下象限中偏移很好,但在其他三个象限中偏移/转换不正确,比如太靠左了,或者是被剪切到了两点的最左边或者最上面的X或者Y位置,我不知道为什么会这样,就在这个时候我请求SO的帮助。

详细信息

  • Delphi 10西雅图
  • FireMonkey(在Windows上)
  • 目标是TPaintBox的画布,任意放置。颜料盒本身可能在TScaledLayout上。
  • 目标是将位图绘制到颜料盒上的旋转目标矩形。
aamkag61

aamkag611#

就我所能理解的主要问题是在新的旋转坐标系中找到画面的角的坐标。这可以用下面的方法来解决:

procedure DrawRotatedBitmap(const Canvas : TCanvas; const Bitmap : TBitmap;
  const PointA, PointB : TPointF; const Offset : TPointF; const Scale : Single);
var
  OldMatrix, TranslationAlongLineMatrix, RotationMatrix, TranslationMatrix,
    ScaleMatrix, FinalMatrix: TMatrix;
  W, H : Single;
  SrcRect, DestRect: TRectF;
  Corner: TPointF;
  LineLength : Single;
  LineAngleDeg : Integer;
begin
  OldMatrix := Canvas.Matrix; // Original, to restore
  try
    {$ifdef DRAW_HELPERS}
      Canvas.Fill.Color := TAlphaColorRec.Black;
      Canvas.DrawLine(PointA, PointB, 0.5);
    {$endif}

    W := PointB.X - PointA.X;
    H := PointA.Y - PointB.Y;
    LineLength := abs(PointA.Distance(PointB));

    // Looking for the middle of the task line
    // and the coordinates of the image left upper angle
    // solving the proportion width/linelength=xo/0.5requireddimensions
    Corner := TPointF.Create((PointB.X + PointA.X) / 2, (PointA.Y + PointB.Y) / 2);// Middle
    {$ifdef DRAW_HELPERS}
      Canvas.Stroke.Color := TAlphaColorRec.Red;
      Canvas.DrawEllipse(TRectF.Create(Corner,2,2),1);
    {$endif}
    Corner.X := Corner.X - Bitmap.Width / 2 * W / LineLength;
    Corner.Y := Corner.Y + Bitmap.Width / 2 * H / LineLength;
    {$ifdef DRAW_HELPERS}
      Canvas.Stroke.Color := TAlphaColorRec.Green;
      Canvas.DrawEllipse(TRectF.Create(Corner,2,2),1);
    {$endif}

    // Account for scale (if the FMX control is scaled / zoomed); translation
    // (the control may not be located at (0, 0) in its parent form, so its canvas
    // is offset) and rotation
    ScaleMatrix := TMatrix.CreateScaling(Scale, Scale);
    TranslationMatrix := TMatrix.CreateTranslation(Offset.X, Offset.Y);
    RotationMatrix := TMatrix.CreateRotation(-ArcTan2(H, W));
    TranslationAlongLineMatrix := TMatrix.CreateTranslation(Corner.X, Corner.Y);
    FinalMatrix := ((RotationMatrix * ScaleMatrix) * TranslationMatrix) * TranslationAlongLineMatrix;

    // If in the top left or top right quadrants, the image will appear
    // upside down. So, rotate the image 180 degrees
    // This is useful when the image contains text, ie is an annotation or similar,
    // or needs to always appear "under" the line
    LineAngleDeg := Round(RadToDeg(-Arctan2(H, W)));
    case LineAngleDeg of
      -180..-90,
      90..180 : FinalMatrix := TMatrix.CreateRotation(DegToRad(180)) * TMatrix.CreateTranslation(Bitmap.Width, 0) * FinalMatrix;
    end;

    Canvas.SetMatrix(FinalMatrix);

    // And finally draw the bitmap
    DestRect := TRectF.Create(PointF(0, 0), Bitmap.Width, Bitmap.Height);
    SrcRect := TRectF.Create(0, 0, Bitmap.Width, Bitmap.Height);
    {$ifdef DRAW_HELPERS}
      Canvas.DrawBitmap(Bitmap, SrcRect, DestRect, 0.5);
    {$else}
      Canvas.DrawBitmap(Bitmap, SrcRect, DestRect, 1);
    {$endif}
  finally
    // Restore the original matrix
    Canvas.SetMatrix(OldMatrix);
  end;
end;

还有ifdef-艾德的线和点的绘图也可能对您有所帮助--这些绘制线和一些有用的点(线中心和图像左上角),它们对调试很有用。

**由DavidM编辑:**此外,还有转换和缩放矩阵。颜料盒在父窗体的画布上绘制(最终),但可能不在(0,0)处,因此需要考虑目标画布的偏移位置。此外,控件可以有缩放,因此也需要构建到最终的旋转矩阵中。

这段代码经过大量编辑,无论/quadrant the line angle is in的方向如何,它都能正常工作。也就是说,当线条完全水平或垂直时,以及在除右下角以外的象限中时,它都能正常工作。
一个有趣的调整是识别出示例中的位图包含文本。当线条位于左上或右上象限时-即从原点向上然后向左或向右-位图在人眼看来是上下颠倒的。调整识别出这一点并旋转位图,使位图的“顶部”始终面对线条。位图的“底部”通常指向下方,使图像以正确的方式显示。如果您不需要代表可识别内容(如符号、文本、标签等)的图像,则可以删除此调整。

插图

具有不同的Angular 和缩放比例。
第一次

相关问题