paip.提升用户体验---c++ qt自定义窗体(2)---边框线的绘制

paip.提升用户体验---c++ qt自定义窗体(2)---边框线的绘制 

 

效果图片

 

 

 

 

作者Attilax ，  EMAIL:1466519819@qq.com 
来源：attilax的专栏
地址：http://blog.csdn.net/attilax

 

 

1.自绘边框原理 1

边框设计以及抓取参考: 2

建立四角以及其他边框线 2

重写paintEvent事件 2

 

 

1.自绘边框原理

 一般窗口的边框Frame，A C G I四块是固定，能保证在窗口改变大小时这四块不变，其他块随着大小伸缩即可..如果要自绘边框，主要是BHD F块会拉伸..,,

 

边框设计以及抓取参考:

我们看到效果图片边框有外框以及内边框组成..颜色青色RGB(48,187,227

),黑色两色..外框又分成两层..最外层青色,内层黑色....内边框也这样..  这样有层次感觉..

左上角以及右上角外框中的最外层青色有个1*1缺口..圆角效果..

 

我们可以抓取参考现有好的边框设计...使用截图,然后,PS放大欣赏,使用彗星助手可以取得颜色..

 

建立四角以及其他边框线

 先设计个角框..旋转下走有了4个图片..边框线也能这样..最后保存成8张图片..

或者,我们全部在程序中处理也能了..这样减少io,就是浪费CPU..

 

 

重写paintEvent事件

只要绘边框走ok兰,,背景不影响..好像系统自动合成到个一起兰..

void IrregularWidget::paintEvent(QPaintEvent *event)

{

 //  QPainter painter(this);

 //  painter.fillRect(0, 0, backgroundPixmap_->width(), backgroundPixmap_->height(), *backgroundPixmap_);

   QPixmap m_Pixmap("c:/img/leftline.png");

    QPixmap m_PixmapRit("c:/img/ritline.png");

   QPainter painter(this);

//    painter.drawPixmap(0, 0, m_Pixmap);

int height=this->height();

int wit=this->width();

 

painter.drawPixmap(0, 0,4,height, m_Pixmap,0, 0,4,height);

//painter.drawPixmap(50, 0,4,height, m_Pixmap,0, 0,4,height);

 

//right border

qDebug()<<" ca6:"<<m_Pixmap.width();

QPainter painter2(this);

int startX=wit-4;

int ritLineWidth=m_PixmapRit.width();

painter.drawPixmap(startX, 0,4,height, m_PixmapRit,0, 0,4,height);

 

//paint bottom border

QPainter painter3(this);

 QPixmap m_PixmapBtm("c:/img/bottomline.png");

 

int heightBtm=m_PixmapBtm.height();

int startY=height-heightBtm;

painter.drawPixmap(0, startY,wit,heightBtm, m_PixmapBtm,0, 0,wit,heightBtm);

//painter.drawPixmapFragments();

 //  painter.fillRect(rect(),m_Pixmap);

//   painter.setBrush(QColor(255,0,0));

 //  painter.drawRoundedRect(this->rect(),10,10);

  // painter.

}