【问题标题】:How to Rotate QPixmap around center without cutting off parts of the image如何在不切断图像部分的情况下围绕中心旋转 QPixmap
【发布时间】:2018-03-25 12:31:25
【问题描述】:

假设我有一个尺寸为 (20 x 100) 的 QPixmap。如何创建此 QPixmap 的副本,该副本已旋转特定数量并且还具有新尺寸来分配旋转后的像素图的新尺寸?

我找到了多个关于如何使用 QPainter 和 QTransform 进行旋转的示例,但似乎没有一个提供适当的方式来防止 QPixmap 被切断。

到目前为止我发现的最好的例子是:

// original = Original QPixmap

QSize size = original.size();

QPixmap newPixmap(size);
newPixmap.fill(QColor::fromRgb(0, 0, 0, 0));

QPainter p(&newPixmap);
p.translate(size.height() / 2, size.height() / 2);
p.rotate(35); // Any rotation, for this example 35 degrees
p.translate(size.height() / -2, size.height() / -2);
p.drawPixmap(0, 0, original);
p.end();

这会旋转 QPixmap,并将其放置在相同尺寸的新 QPixmap 上。但是,我不知道如何修改它以使用新尺寸。

我什至尝试过简单地修改新像素图的初始大小,但这只会导致图像偏离中心(并且由于某种原因仍然被切断?)

我们将不胜感激!

【问题讨论】:

    标签: c++ qt image-rotation qpainter qpixmap


    【解决方案1】:

    执行此操作的一种方法是计算旋转图像的最小边界矩形并创建具有这些尺寸的新像素图,您可以在其上渲染现在保证适合的旋转图像。为此,您可以获取图像矩形的每个角点并围绕中心旋转它们。然后,通过查看每个点并找到最小和最大 x 和 y 值,可以使用生成的点来计算最小边界矩形。

    例如,在下面的假设示例中,我们有一个 100x100 的矩形。如果我们使用一个简单的算法将矩形的每个角点围绕中心旋转我们的角度(在本例中为 45 度),我们会得到四个新角点 (50, -20), (-20, 50), (120 , 120) 和 (50, 120)。从这些点我们可以看出最小x值为-20,最小y值为-20,最大x值为120,最大y值为120,所以最小bounding rect可以用topLeft来描述:(-20 , -20) 和 bottomRight:(120, 120)。

    为了帮助您,这里有一个函数取自另一个 stackoverflow 帖子,用于围绕另一个点旋转一个点:

    QPointF getRotatedPoint( QPointF p, QPointF center, qreal angleRads )
    {
        qreal x = p.x();
        qreal y = p.y();
    
        float s = qSin( angleRads );
        float c = qCos( angleRads );
    
        // translate point back to origin:
        x -= center.x();
        y -= center.y();
    
        // rotate point
        float xnew = x * c - y * s;
        float ynew = x * s + y * c;
    
        // translate point back:
        x = xnew + center.x();
        y = ynew + center.y();
    
        return QPointF( x, y );
    }
    

    这是我编写的一个函数,它使用它来计算旋转某个角度的某个矩形的最小边界矩形...

    QRectF getMinimumBoundingRect( QRect r, qreal angleRads )
    {
        QPointF topLeft     = getRotatedPoint( r.topLeft(),     r.center(), angleRads );
        QPointF bottomRight = getRotatedPoint( r.bottomRight(), r.center(), angleRads );
        QPointF topRight    = getRotatedPoint( r.topRight(),    r.center(), angleRads );
        QPointF bottomLeft  = getRotatedPoint( r.bottomLeft(),  r.center(), angleRads );
    
        // getMin and getMax just return the min / max of their arguments
    
        qreal minX = getMin( topLeft.x(), bottomRight.x(), topRight.x(), bottomLeft.x() );
        qreal minY = getMin( topLeft.y(), bottomRight.y(), topRight.y(), bottomLeft.y() );
    
        qreal maxX = getMax( topLeft.x(), bottomRight.x(), topRight.x(), bottomLeft.x() );
        qreal maxY = getMax( topLeft.y(), bottomRight.y(), topRight.y(), bottomLeft.y() );
    
        return QRectF( QPointF( minX, minY ), QPointF( maxX, maxY ) );
    }
    

    所以现在我们有了旋转图像的最小边界矩形,我们可以创建一个具有宽度和高度的新像素图,并将旋转后的图像渲染到它的中心。这很棘手,因为涉及的转换使得您的源和目标矩形可能是什么变得更加混乱。它实际上并不像看起来那么难。您执行平移/旋转以围绕中心旋转绘图设备,然后您可以简单地将源图像渲染到目标图像上,就像将源图像渲染到目标中心时一样。

    例如:

    QPixmap originalPixmap; // Load this from somewhere
    QRectF minimumBoundingRect = getMinimumBoundingRect( originalPixmap.rect(), angleRads);
    
    QPixmap rotatedPixmap( minimumBoundingRect.width(), minimumBoundingRect.height() );
    QPainter p( &rotatedPixmap );
    p.save();
    
    // Rotate the rotated pixmap paint device around the center...
    p.translate( 0.5 * rotatedPixmap.width(), 0.5 * rotatedPixmap.height() );
    p.rotate( angleDegrees );
    p.translate( -0.5 * rotatedPixmap.width(), -0.5 * rotatedPixmap.height() );
    
    // The render rectangle is simply the originalPixmap rectangle as it would be if placed at the center of the rotatedPixmap rectangle...
    QRectF renderRect( 0.5 * rotatedRect.width() - 0.5 * originalPixmap.width(),
                       0.5 * rotatedRect.height() - 0.5 * originalPixmap.height(),
                       originalPixmap.width(),
                       originalPixmap.height() );
    p.drawPixmap( renderRect, originalPixmap, originalPixmap.rect() );
    
    p.restore();
    

    瞧,一个很好的旋转图像,没有切掉任何角落。

    【讨论】:

    • Bruh,这太棒了!非常感谢!
    • 示例代码中的一个错误:rotatedPixmap 应该是 rotatePixmap
    • 这些是相同的,所以我不确定我是否遵循。我无法通过目测发现任何错误。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-05-19
    • 2011-07-08
    • 2020-05-19
    • 2017-01-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多