31.QPainter-rotate()函數分析-文字旋轉不傾斜,圖片旋轉實現等待

在上章和上上上章：

28.QT-QPainter介紹 

30.QT-漸變之QLinearGradient、 QConicalGradient、QRadialGradient 

學習了QPainter基礎繪製後,接下來,來學習QPainter其它函數之rotate()函數

 

首先來看看QPainter其它函數

void QPainter::drawPixmap ( int x, int y, int w, int h,  const QPixmap & pixmap, int sx, int sy, int sw, int sh );  //繪畫pixmap // x y w h:表示自己的繪畫面積 //sx sy sw sh:表示pixmap的繪畫面積
  

void QPainter::drawPixmap ( int x, int y, const QPixmap & pixmap, int sx, int sy, int sw, int sh ); //繪畫pixmap // x y 表示繪畫起始位置 //sx sy sw sh:表示pixmap的繪畫面積
 drawTiledPixmap ( int x, int y, int width, int height, const QPixmap & pixmap, int sx = 0, int sy = 0 )； //平鋪pixmap

void QPainter::translate ( qreal dx, qreal dy ); //將座標(dx,dy)設置顯示原點

void scale ( qreal sx, qreal sy ) //設置圖片縮放,sx(橫座標放大係數),sy(縱座標放大係數)

void  rotate ( qreal angle );  //旋轉繪畫區域(好比斜文本),angle=90,則表示90度  //以時針方向旋轉(順時針)

 

 

rotate()函數分析

若是沒有經過translate()設置中心原點,則默認將圖片以(0，該圖片的高)爲原點

 

示例1-未設置原點中心時

   QPainter painter(this);

    for(int i=0;i<10;i++)
     {
        painter.save();
        painter.rotate(i*10);
        painter.drawText(100,100,"123");
        painter.restore();
    }

 

 

如上圖,能夠看到原點位於窗口最左側. ,而且高度等於最右邊位置

  

 

示例2-設置原點中心後:

    static int rotate = 0;
    QPainter painter(this);

    painter.setRenderHint(QPainter::Antialiasing,true);

    painter.translate(width()/2,height()/2);

    painter.drawRect(-2,-2,4,4);

    painter.setFont(QFont(0,11));

    for(int i=0;i<10;i++)
    {
        painter.save();

        painter.rotate(i*36);

        painter.drawText(100,0,20,20,Qt::AlignCenter,QString("%1").arg(i));

        painter.restore();
}

 

效果:

 

從上圖能夠看到旋轉的同時,文字也跟着傾斜了,接下來,咱們來本身寫個rotate()函數,不讓文字傾斜

 

示例3-文字不傾斜旋轉

/*  point: 文字所在的點
 *  from_angle : 文字所在的度數
 *  rotate : 須要旋轉的角度,值爲-360~360(爲負數表示逆時針旋轉,爲正數表示順時針旋轉)
 */
QPoint Widget::CustomRotate(QPointF point,qreal from_angle,qreal rotate)
{
    qreal PI=3.141592653589;
    QPointF Tmp; 
    qreal arc = (rotate-from_angle)/180*PI;
    qreal Length = qSqrt(point.x()*point.x() +point.y()*point.y());
    Tmp.setX(Length*qCos(arc));
    Tmp.setY(Length*qSin(arc));
    return Tmp.toPoint();
}
void Widget::paintEvent(QPaintEvent *)
{
    int angle = 0;
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    painter.translate(width()/2,height()/2);
    painter.drawRect(-2,-2,4,4);
    painter.setFont(QFont(0,11));
    QPoint point(100,0);        //從(100,0)開始填文字

    for(int i=0;i<10;i++)
    {
       painter.drawText(point.x()-10,point.y()-10,20,20,Qt::AlignCenter,QString("%1").arg(i));
       point=CustomRotate(point,angle, 36);         //以當前angle度,順時針旋轉36度
       angle -=36;                                  //更新度數,因爲順時針,因此用減
    }  
}

 

效果:

 

  

 

示例4-經過選擇加載圖片實現等待效果

如下面圖片爲例:

 

代碼以下:

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    m_rotate(false)
{
    resize(300,300);
    connect(&timer,SIGNAL(timeout()),this,SLOT(timerout()));
    timer.start(40);
}

void Widget::timerout()
{
    m_rotate =true;
    update();
}

void Widget::paintEvent(QPaintEvent *)
{
    static int rotate = 0;
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    painter.translate(width()/2,height()/2);

    if(m_rotate)
    {
       rotate = (rotate+5)%360;
       m_rotate =false;
    }

 
    painter.rotate(rotate);
    QPixmap pix(":wait"); 
    painter.drawPixmap(-pix.width()/2,-pix.height()/2,pix);
}

 

有了以上知識後,接下來咱們就能夠製做一個錶盤控件了,接下來學習:

32.QT-製做最強電壓電阻錶盤,能夠自定義陰影效果,顏色,圖標,文字標籤等-附帶demo程序