在 FireMonkey 中如何将图像绘制到旋转的矩形中?
How do you draw an image to a rotated rectangle in FireMonkey?
在 FireMonkey 中,绘制位图到源矩形很简单:
Canvas.DrawBitmap(FBitmap, ImageSrcRect, ImageDstRect, 1);
我正在 TPaintBox
的 canvas 上执行此操作。相反,我想绘制旋转的位图(和缩放,因为目标大小可能与源大小不同。)
具体来说:
- 我有两点
- 图像应放置在这两点之间的中心点下方
- 图像应按照两点之间的角度旋转
如图所示:
左边一个是我目前能做的;右边是我想做的。
最好的方法是什么?
我试过的
为了保持现有代码的简单性(例如,绘制到目标矩形,从而缩放结果)我一直在尝试在调用现有代码之前向 canvas 的矩阵添加一个旋转矩阵绘制位图代码。例如,
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);
和一些变化与现有矩阵相乘,创建一个具有平移和旋转等的全新矩阵。所有这些部分工作:旋转角度是正确的,但是我很难让位置保持一致——例如,围绕中心点旋转(这甚至不是围绕该点旋转位图的顶部,而不是围绕中心旋转。 )我发现旋转后的图像在右下象限中偏移良好,但在其他三个象限中偏移/翻译不正确,例如太左,或剪裁到最左边或最上面的 X 或 Y 位置两个点。我不知道这是为什么,此时我正在寻求帮助。
详情
- Delphi 10 西雅图
- FireMonkey(在 Windows 上)
- 目标是
TPaintBox
的canvas,任意放置。颜料盒本身可能在 TScaledLayout
. 上
- 目标是将位图绘制到绘画盒上旋转的目标矩形。
据我了解,主要问题是在新的旋转坐标系中找到图片角点的坐标。这可以通过以下方式解决:
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
-ed 线和点的绘画也可能对您有所帮助 - 这些画线和一些有用的点(线中心和图像 top-left 角),很有用用于调试。
DavidM 编辑: 此外,还有平移和缩放矩阵。一个 paintbox 在父表单的 canvas 上绘制(最终)但可能不在 (0, 0),因此需要考虑目标 canvas 的偏移位置。此外,控件可以缩放,因此也需要将其构建到最终旋转矩阵中。
此代码经过大量编辑,无论方向如何都可以正常工作/quadrant the line angle is in。也就是说,当线条完全水平或垂直时,以及在 bottom-right 以外的象限时,它应该工作。
一个有趣的调整是识别示例中的位图包含文本。当该线位于 top-left 或 top-right 象限时 - 即从其原点向上然后向左或向右 - 位图在人眼看来是上下颠倒的。该调整识别并旋转位图,使位图的 "top" 始终面向直线,而位图的 "bottom" 通常指向下方,使图像看起来正确向上。如果您不需要代表可识别内容(例如符号、文本、标签等)的图像,则可以删除此调整
插图
具有不同的角度和缩放比例。
在 FireMonkey 中,绘制位图到源矩形很简单:
Canvas.DrawBitmap(FBitmap, ImageSrcRect, ImageDstRect, 1);
我正在 TPaintBox
的 canvas 上执行此操作。相反,我想绘制旋转的位图(和缩放,因为目标大小可能与源大小不同。)
具体来说:
- 我有两点
- 图像应放置在这两点之间的中心点下方
- 图像应按照两点之间的角度旋转
如图所示:
左边一个是我目前能做的;右边是我想做的。
最好的方法是什么?
我试过的
为了保持现有代码的简单性(例如,绘制到目标矩形,从而缩放结果)我一直在尝试在调用现有代码之前向 canvas 的矩阵添加一个旋转矩阵绘制位图代码。例如,
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);
和一些变化与现有矩阵相乘,创建一个具有平移和旋转等的全新矩阵。所有这些部分工作:旋转角度是正确的,但是我很难让位置保持一致——例如,围绕中心点旋转(这甚至不是围绕该点旋转位图的顶部,而不是围绕中心旋转。 )我发现旋转后的图像在右下象限中偏移良好,但在其他三个象限中偏移/翻译不正确,例如太左,或剪裁到最左边或最上面的 X 或 Y 位置两个点。我不知道这是为什么,此时我正在寻求帮助。
详情
- Delphi 10 西雅图
- FireMonkey(在 Windows 上)
- 目标是
TPaintBox
的canvas,任意放置。颜料盒本身可能在TScaledLayout
. 上
- 目标是将位图绘制到绘画盒上旋转的目标矩形。
据我了解,主要问题是在新的旋转坐标系中找到图片角点的坐标。这可以通过以下方式解决:
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
-ed 线和点的绘画也可能对您有所帮助 - 这些画线和一些有用的点(线中心和图像 top-left 角),很有用用于调试。
DavidM 编辑: 此外,还有平移和缩放矩阵。一个 paintbox 在父表单的 canvas 上绘制(最终)但可能不在 (0, 0),因此需要考虑目标 canvas 的偏移位置。此外,控件可以缩放,因此也需要将其构建到最终旋转矩阵中。
此代码经过大量编辑,无论方向如何都可以正常工作/quadrant the line angle is in。也就是说,当线条完全水平或垂直时,以及在 bottom-right 以外的象限时,它应该工作。
一个有趣的调整是识别示例中的位图包含文本。当该线位于 top-left 或 top-right 象限时 - 即从其原点向上然后向左或向右 - 位图在人眼看来是上下颠倒的。该调整识别并旋转位图,使位图的 "top" 始终面向直线,而位图的 "bottom" 通常指向下方,使图像看起来正确向上。如果您不需要代表可识别内容(例如符号、文本、标签等)的图像,则可以删除此调整
插图
具有不同的角度和缩放比例。