paip.提升用户体验---c++qt自定义窗体(2)---边框线的绘制
效果图片
作者Attilax,EMAIL:1466519819@
来源:attilax的专栏
地址:/attilax
1.自绘边框原理 1
边框设计以及抓取参考: 2
建立四角以及其他边框线 2
重写paintEvent事件 2
1.自绘边框原理
一般窗口的边框Frame,ACGI四块是固定,能保证在窗口改变大小时这四块不变,其他块随着大小伸缩即可..如果要自绘边框,主要是BHDF块会拉伸..,,
边框设计以及抓取参考:
我们看到效果图片边框有外框以及内边框组成..颜色青色RGB(48,187,227
),黑色两色..外框又分成两层..最外层青色,内层黑色....内边框也这样..这样有层次感觉..
左上角以及右上角外框中的最外层青色有个1*1缺口..圆角效果..
我们可以抓取参考现有好的边框设计...使用截图,然后,PS放大欣赏,使用彗星助手可以取得颜色..
建立四角以及其他边框线
先设计个角框..旋转下走有了4个图片..边框线也能这样..最后保存成8张图片..
或者,我们全部在程序中处理也能了..这样减少io,就是浪费CPU..
重写paintEvent事件
只要绘边框走ok兰,,背景不影响..好像系统自动合成到个一起兰..
voidIrregularWidget::paintEvent(QPaintEvent*event)
{
//QPainterpainter(this);
//painter.fillRect(0,0,backgroundPixmap_->width(),backgroundPixmap_->height(),*backgroundPixmap_);
QPixmapm_Pixmap("c:/img/leftline.png");
QPixmapm_PixmapRit("c:/img/ritline.png");
QPainterpainter(this);
//painter.drawPixmap(0,0,m_Pixmap);
intheight=this->height();
intwit=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);
//rightborder
qDebug()<<"ca6:"<<m_Pixmap.width();
QPainterpainter2(this);
intstartX=wit-4;
intritLineWidth=m_PixmapRit.width();
painter.drawPixmap(startX,0,4,height,m_PixmapRit,0,0,4,height);
//paintbottomborder
QPainterpainter3(this);
QPixmapm_PixmapBtm("c:/img/bottomline.png");
intheightBtm=m_PixmapBtm.height();
intstartY=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.
}