Example QLinearGradient to create a 3-D shadow effect
Qt Graphics View Lesson 2 |
Example using QLinearGradient (QGradient) to create a 3-D shadow effect
Download the complete project zip file
 |
In this example, I wanted to creat a 3-D shadow effect around my simple box. I used the QGradient class to create the background shadow, then drew another rounded-rect over that, offset by 3 pixels.
The class StateBox is the widget that represents the box in the scene. Its derived from the QGraphicsItem. MainWindow.cpp creates the scene and inserts a StateBox object.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
// example of a drop shadow effect on a box, using QLinearGradient and two boxes
void StateBox::paint (QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
/*
The drop shadow effect will be created by drawing a filled, rounded corner rectangle with a gradient fill.
Then on top of this will be drawn filled, rounded corner rectangle, filled with a solid color, and offset such that the gradient filled
box is only visible below for a few pixels on two edges.
The total box size is _width by _height. So the top box will start at (0,0) and go to (_width-shadowThickness, _height-shadowThickness),
while the under box will be offset, and start at (shadowThickness+0, shadowThickness+0) and go to (_width, _height).
*/
int shadowThickness = 3;
QLinearGradient gradient;
gradient.setStart(0,0);
gradient.setFinalStop(_width,0);
QColor grey1(150,150,150,125);// starting color of the gradient - can play with the starting color and ,point since its not visible anyway
// grey2 is ending color of the gradient - this is what will show up as the shadow. the last parameter is the alpha blend, its set
// to 125 allowing a mix of th color and and the background, making more realistic shadow effect.
QColor grey2(225,225,225,125);
gradient.setColorAt((qreal)0, grey1 );
gradient.setColorAt((qreal)1, grey2 );
QBrush brush(gradient);
painter->setBrush( brush);
// for the desired effect, no border will be drawn, and because a brush was set, the drawRoundRect will fill the box with the gradient brush.
_outterborderPen.setStyle(Qt::NoPen);
painter->setPen(_outterborderPen);
QPointF topLeft (shadowThickness+0, shadowThickness+0);
QPointF bottomRight ( _width, _height);
QRectF rect (topLeft, bottomRight);
painter->drawRoundRect(rect,25,25); // corner radius of 25 pixels
// draw the top box, the visible one
QBrush brush2(QColor(255,250,200,255),Qt::SolidPattern);
painter->setBrush( brush2);
QPointF topLeft2 (0, 0);
QPointF bottomRight2 ( _width-shadowThickness, _height-shadowThickness);
QRectF rect2 (topLeft2, bottomRight2);
painter->drawRoundRect(rect2,25,25);
} |
Trackback this post | Subscribe to the comments via RSS Feed