图像旋转不可预测地移动生成的图像

Question

我今天一直在寻找所有东西，但我无法满足我的需求。

我有一个 Web 应用程序，让用户可以拖放文本/图像，然后将详细信息发送到服务器以将其绘制为 pdf。我正在尝试启用旋转，但我无法掌握 translatetransform 的内容。我在测试中的图像打印效果很好，旋转得很好，但它不在正确的位置。我想念最初的 translatetransform 如何改变事物，我的思绪在一天结束时被击中。我是否必须首先使用不同的图形实例将其绘制为位图，然后将该位图绘制到我的背景？对此的任何帮助都会很棒！谢谢！

代码：

• i 是来自浏览器的图像对象
• 坐标是浏览器画布上图像上角的 x 和 y (990wx1100h)

• size 是浏览器上元素的宽度和宽度

                          Bitmap b = new Bitmap(wc.OpenRead(i.img));
                          if (i.rotation != 0)
                          {
                              g.TranslateTransform(this.CanvasDetails.size.width/2, this.CanvasDetails.size.height/2);
                              g.RotateTransform(i.rotation);
                              g.DrawImage(b, new Rectangle(- i.coord.x/2, -i.coord.y/2, i.size.width, i.size.height), 0, 0, b.Width, b.Height, GraphicsUnit.Pixel, ia);
                          }
                          else
                          {
                              g.DrawImage(b, new Rectangle(i.coord.x, i.coord.y, i.size.width, i.size.height), 0, 0, b.Width, b.Height, GraphicsUnit.Pixel, ia);
                          }
  

  编辑 我按照 Adam 的建议添加了 translatransform 反转，但图像仍然绘制在不同的位置。

                                  g.TranslateTransform(this.CanvasDetails.size.width / 2, this.CanvasDetails.size.height / 2);
                              g.RotateTransform(i.rotation);
                              g.TranslateTransform(-this.CanvasDetails.size.width / 2, -this.CanvasDetails.size.height / 2);
                              g.DrawImage(b, new Rectangle(-i.coord.x / 2, -i.coord.y / 2, i.size.width, i.size.height), 0, 0, b.Width, b.Height, GraphicsUnit.Pixel, ia);
  

示例： 浏览器视图

.NET 绘制版本

Answer 1

好的，完全修改此答案以尝试更清楚地解释它。要知道的几件事是变换“累积”和旋转变换发生在原点周围。所以为了解释累积（乘）变换的影响，看这个例子：

            //draw an ellipse centered at 200,200
            g.DrawEllipse(Pens.Red, 195, 195, 10, 10);

            //apply translate transform - shifts origin to 200,200
            g.TranslateTransform(200, 200);

            //draw another ellipse, should draw around first ellipse
            //because translate tranforms essentially moves our coordinates 200,200
            g.DrawEllipse(Pens.Blue, -7, -7, 14, 14);

            //now do rotate transform
            g.RotateTransform(90f); //degree to rotate object

            //now, anything we draw with coordinates 0,0 is actually going to be draw at 200,200 AND be rotated by 45*
            //this line will be vertical, through 200,200, instead of horizontal through 0,0
            g.DrawLine(Pens.Green, -20,0,20,0);

            //If we add another translate, this time 50x, it would normally translate by 50 in the X direction
            //BUT - because we already have transforms applied, including the 90 rotate, it affects this translation
            //so this in effect because a 50px translation in Y, because it's rotated 90*
            g.TranslateTransform(50, 0);

            //so even though we translated 50x, this line will draw 50px below the last line
            g.DrawLine(Pens.Green, -20, 0, 20, 0);

因此，对于您的情况，您要绘制一个以 CenterPoint 为中心并按角度旋转的对象。所以你会这样做：

g.TranslateTransform(-CenterPoint.X, -CenterPoint.Y);
g.RotateTransform(Angle);
g.DrawImage(b, -ImageSize/2, -ImageSize/2, ImageSize, ImageSize);

然后您需要重置转换以进行其他绘图，您可以这样做：

g.ResetTransform();

如果这没有将图像留在您想要的位置，那么您需要检查用于定位它的值。你在存储它的中心吗？还是左上角？等等。