declarative alpha changer - c++

I'd like to write a QDeclarativeItem FadeEdges that I instantiate from QML, such as in this example:
FadeEdges {
Text {
id: sometext
text: "some text"
}
}
After sometext repaints, I'd like to reduce the alphas (from fully opaque to transparent) of the pixels it painted at its edges. So its rendered edges will appear faded. My question is what mechanisms, if any, are available to make this change in child alpha values.
I've tried to install event filters and setting setFiltersChildEvents(). No PaintEvents seem to be sent.

It is not an exact answer to my own question but I suppose it will do for starters. Only the QGraphicsEffect::draw member function needs to be overridden (margins_ is a QMargins member variable):
void FadeEdgesEffect::draw(QPainter* painter)
{
QLinearGradient lg;
lg.setColorAt(qreal(0), QColor(0, 0, 0, 0));
lg.setColorAt(qreal(1), QColor(0, 0, 0, 255));
qreal const width(boundingRect().width());
qreal const height(boundingRect().height());
QPoint offset;
QPixmap pixmap(sourcePixmap(Qt::LogicalCoordinates, &offset));
{
QPainter p(&pixmap);
p.setCompositionMode(QPainter::CompositionMode_DestinationIn);
if (margins_.left())
{
lg.setStart(qreal(0), qreal(0));
lg.setFinalStop(margins_.left(), qreal(0));
p.fillRect(QRectF(0, 0, margins_.left(), height), lg);
}
// else do nothing
if (margins_.right())
{
lg.setStart(qreal(width), qreal(0));
lg.setFinalStop(width - margins_.right(), qreal(0));
p.fillRect(QRectF(width - margins_.right(),
0, margins_.right(), height), lg);
}
// else do nothing
if (margins_.bottom())
{
lg.setStart(qreal(0), height);
lg.setFinalStop(qreal(0), height - margins_.top());
p.fillRect(QRectF(0, height - margins_.bottom(),
width, margins_.bottom()), lg);
}
// else do nothing
if (margins_.top())
{
lg.setStart(qreal(0), qreal(0));
lg.setFinalStop(0, margins_.top());
p.fillRect(QRectF(0, 0, width, margins_.top()), lg);
}
// else do nothing
}
painter->drawPixmap(offset, pixmap);
}

Related

How to draw triangle and rhombus shapes using QT

I need to draw triangle shape and rhombus shapes like this image.In this code which design triangle shape (figure 1) but I need to add this shape to text "TRI" . And I also need to implement this code to design rhombus shape like (figure 2). please help me to solve this.
Figure 1
void MainWindow::on_btnTri_clicked()
{
QPen redPen(Qt::black);
redPen.setWidth(2);
QRectF rect = QRectF(0, 0, 200, 200);
QPainterPath path;
path.moveTo(rect.left() + (rect.width() / 2), rect.top());
path.lineTo(rect.bottomLeft());
path.lineTo(rect.bottomRight());
path.lineTo(rect.left() + (rect.width() / 2), rect.top());
QGraphicsPathItem* item = ui->graphicsView->scene()->addPath(path, redPen);
item->setFlag(QGraphicsItem::ItemIsMovable, true);
item->setFlag(QGraphicsItem::ItemIsSelectable,true);
}
Figure 2 I use this code to design figure 2 But which cannot pass parameters to change there size,My figure 1 designed code I can able pass two parameters to QRectF(0, 0, para1, para2); this for change triangle's size.so I need to change this code to do the same thing using QPainterPath or any other way.
void MainWindow::on_btnRomb_clicked()
{
QPolygonF romb;
romb.append(QPointF(20,40));
romb.append(QPointF(0,20));
romb.append(QPointF(20,0));
romb.append(QPointF(40, 20));
QGraphicsPolygonItem* itemR = ui->graphicsView->scene()->addPolygon(romb);
itemR->setFlag(QGraphicsItem::ItemIsMovable);
}
you must use the addText() method of QPainterPath, to place it in the center you must calculate the width and height of the text for it QFontMetrics is used:
QPen redPen(Qt::black);
redPen.setWidth(2);
QRectF rect(0, 0, 200, 200);
QPainterPath path;
path.moveTo(rect.left() + (rect.width() / 2), rect.top());
path.lineTo(rect.bottomLeft());
path.lineTo(rect.bottomRight());
path.lineTo(rect.left() + (rect.width() / 2), rect.top());
path.moveTo(rect.center());
QFont font("Times", 20, QFont::Bold);
QFontMetrics fm(font);
QString text = "TRI";
QSize size = fm.size(Qt::TextSingleLine, text);
path.addText(rect.center()+ QPointF(-size.width()*0.5, size.height()*0.5), font, text);
QGraphicsPathItem *item = ui->graphicsView->scene()->addPath(path, redPen);
item->setFlag(QGraphicsItem::ItemIsMovable, true);
item->setFlag(QGraphicsItem::ItemIsSelectable,true);
For the case of the diamond you should only get the midpoints of each vertex:
QPainterPath path;
QRectF rect(0, 0 , 100, 100);
path.moveTo(rect.center().x(), rect.top());
path.lineTo(rect.right(), rect.center().y());
path.lineTo(rect.center().x(), rect.bottom());
path.lineTo(rect.left(), rect.center().y());
path.lineTo(rect.center().x(), rect.top());
QGraphicsPathItem* itemR = ui->graphicsView->scene()->addPath(path);
itemR->setFlag(QGraphicsItem::ItemIsMovable);

painting the widget on calling slot

I want to paint a circle with user provided color and keep a line edit adjustment on it on horizontal alignment.
Used painter function call on slot, but its not working
#include <QPainter>
#include "cascadeColorHighlightWidget.h"
CascadeColorHighlightWidget::CascadeColorHighlightWidget(QWidget *parent) : QWidget(parent)
{
setWindowFlags(Qt::FramelessWindowHint | Qt::Widget);
setAttribute( Qt::WA_DeleteOnClose, true );
setFixedSize(187,164);
setContentsMargins(0,0,0,0);
}
void CascadeColorHighlightWidget::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
QRectF contRect = contentsRect().adjusted(1, 1, -1, -1);
painter.setPen(QPen(QColor(176, 176, 176),1));
painter.setBrush(QColor(255,255,255));
painter.drawRect(contRect);
painter.setPen(QPen(QColor(51,51,51),1));
QFont font( "Calibri" );
font.setPixelSize(14);
painter.setFont( font );
painter.drawText(QPointF(contRect.x() + 18, contRect.y() + 28), "Color Highlight");
}
void CascadeColorHighlightWidget::focusOutEvent(QFocusEvent *event)
{
Q_UNUSED(event);
close();
}
void CascadeColorHighlightWidget::setColors(QColor color)
{
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
QRectF contRect = contentsRect().adjusted(1, 1, -1, -1);
int rectYPos = contRect.y() + 55;
painter.setPen(Qt::NoPen);
QRectF ellipseRect = QRectF(contRect.x() + 18, rectYPos, 16, 16);
painter.setPen(Qt::NoPen);
painter.setBrush(color);
painter.drawEllipse(ellipseRect);
/*After this ellipse I need to draw a line edit where user can edit anytime*/
}
But by calling setcolot its not drawing the ellipse on the widget. Only the items in paintEvent worked.
Is it possible to do with painter or I need to keep widgetItems and insert in this wideget. please give some suggestions
All painting work should happen in paintEvent. You have to keep state, and paint items accordingly. Have methods that take QPainter as an argument and call them from within paintEvent method, passing to them the QPainter object you created there.
Example:
In your widget header have:
private:
void setColors(QColor c) { color = c; }
void drawEllipse(QPainter & painter);
QColor color;
bool draw_ellipse;
As you can see, the setColors method only sets a color and you keep that color in a private instance variable color.
A new method hosts the painting job (previously in setColors):
void CascadeColorHighlightWidget::drawEllipse(QPainter &painter)
{
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
QRectF contRect = contentsRect().adjusted(1, 1, -1, -1);
int rectYPos = contRect.y() + 55;
painter.setPen(Qt::NoPen);
QRectF ellipseRect = QRectF(contRect.x() + 18, rectYPos, 16, 16);
painter.setPen(Qt::NoPen);
painter.setBrush(color);
painter.drawEllipse(ellipseRect);
/*After this ellipse I need to draw a line edit where user can edit anytime*/
}
The variable color in this line
painter.setBrush(color);
is the one you set using the setColors method.
The paintEvent method should be like:
void CascadeColorHighlightWidget::paintEvent(QPaintEvent *event)
{
Q_UNUSED(event);
QPainter painter(this);
painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
QRectF contRect = contentsRect().adjusted(1, 1, -1, -1);
painter.setPen(QPen(QColor(176, 176, 176),1));
painter.setBrush(QColor(255,255,255));
painter.drawRect(contRect);
painter.setPen(QPen(QColor(51,51,51),1));
QFont font( "Calibri" );
font.setPixelSize(14);
painter.setFont( font );
painter.drawText(QPointF(contRect.x() + 18, contRect.y() + 28), "Color Highlight");
if(draw_ellipse)
{
drawEllipse(painter);
}
}
At the end of it, you test draw_ellipse (don't forget to initialize it to false in the constructor) and call the drawEllipse method if it's true.
Let's draw the ellipse, for example using QWidget's mousePressEvent:
void CascadeColorHighlightWidget::mousePressEvent(QMouseEvent *event)
{
setColors(QColor(Qt::red));
draw_ellipse = true;
update();
}
Here, you set a color, first, then set draw_ellipse to true, then (and it matters a lot) you call the update slot of QWidget:
[...] it schedules a paint event for processing when Qt returns to the
main event loop.
So the paintEvent method will be called, and your paintings updated accordingly to your class's state (color and draw_ellipse variables).

Create a button in OpenCV GUI without QT [duplicate]

I am working on a game-project using OpenCV. Now I have to make a simple GUI: a window with one button, using HighGui only.
I'm not sure but I think I'm supposed to use something like this:
cvNamedWindow( "NameWindow" , CV_WINDOW_AUTOSIZE);
Any help is much appreciated.
OpenCV does not provide a button, but you can easily use a colored rectangle, and check if the clicked point on the image is inside this rectangle.
Remember that OpenCV HighGui is very simple and is meant only for debugging purposes. You may want to use a full featured graphic library as Qt, or similar.
However, this is a small example that shows a (green) image, and a button on top:
Clicking the button will print "Clicked" on stdout:
Code:
#include <opencv2\opencv.hpp>
#include <iostream>
using namespace cv;
using namespace std;
Mat3b canvas;
string buttonText("Click me!");
string winName = "My cool GUI v0.1";
Rect button;
void callBackFunc(int event, int x, int y, int flags, void* userdata)
{
if (event == EVENT_LBUTTONDOWN)
{
if (button.contains(Point(x, y)))
{
cout << "Clicked!" << endl;
rectangle(canvas(button), button, Scalar(0,0,255), 2);
}
}
if (event == EVENT_LBUTTONUP)
{
rectangle(canvas, button, Scalar(200, 200, 200), 2);
}
imshow(winName, canvas);
waitKey(1);
}
int main()
{
// An image
Mat3b img(300, 300, Vec3b(0, 255, 0));
// Your button
button = Rect(0,0,img.cols, 50);
// The canvas
canvas = Mat3b(img.rows + button.height, img.cols, Vec3b(0,0,0));
// Draw the button
canvas(button) = Vec3b(200,200,200);
putText(canvas(button), buttonText, Point(button.width*0.35, button.height*0.7), FONT_HERSHEY_PLAIN, 1, Scalar(0,0,0));
// Draw the image
img.copyTo(canvas(Rect(0, button.height, img.cols, img.rows)));
// Setup callback function
namedWindow(winName);
setMouseCallback(winName, callBackFunc);
imshow(winName, canvas);
waitKey();
return 0;
}
You can now create buttons and other useful tools on OpenCV windows. The page below shows a couple of useful examples.
https://docs.opencv.org/master/dc/d46/group__highgui__qt.html
The gist of it is:
#include <opencv2/highgui.hpp>
void myButtonName_callback(int state, void*userData) {
// do something
printf("Button pressed\r\n");
}
createButton("myButtonName",myButtonName_callback,NULL,CV_PUSH_BUTTON,1);
you are aware that openCV is not a GUI library, but an image processing lib?
it ships with highgui: http://docs.opencv.org/2.4/modules/highgui/doc/highgui.html
for those cases where you really have no other options, but need to create a window for displaying stuff.
While OpenCV was designed for use in full-scale applications and can be used within functionally rich UI frameworks (such as Qt*, WinForms*, or Cocoa*) or without any UI at all, sometimes there it is required to try functionality quickly and visualize the results. This is what the HighGUI module has been designed for.
see OpenCV and creating GUIs
edit: "this doesn't answer the question": -> more help..
you can't.
or that is, if you know your underlying window manager, you can.
i.e. if you'r on windows, you could get the window handle, and dynamically add more controls..
if not, you need to know what platform you'r on, and how to do it in that.
I wouldn't dare to try and put this in a simple answer
#Miki, why I cannot use my buttons alternately? How to fix it? I mean I want to use them at the same time.
EDIT: I fixed it myself. No need of help. :)
#include <opencv2\opencv.hpp>
#include <iostream>
using namespace cv;
using namespace std;
Mat3b canvas;
string buttonText("Nacisnij guzik!");
string buttonText2("Nacisnij guzik NR2!");
string winName = "PokerGui";
int a = 0;//mozna pozniej usunac, potrzebne tylko czy button reaguje jak nalezy
Rect button, button2;
void callBackFunc(int event, int x, int y, int flags, void* userdata)
{
if (event == EVENT_LBUTTONDOWN)
{
if (button.contains(Point(x, y)))//ponizej to co ma sie wykonac po nacisnieciu klawisza
{
a = a + 7;
cout << "Nacisnales guzik!\n" << endl;
printf("liczba = %i\n", a);
rectangle(canvas(button), button, Scalar(0, 0, 255), 2);
}
else if (button2.contains(Point(x, y)))//ponizej to co ma sie wykonac po nacisnieciu klawisza
{
//a = a + 7;
cout << "Nacisnales guzik NR2!\n" << endl;
//printf("liczba = %i\n", a);
rectangle(canvas(button2), button, Scalar(0, 0, 255), 2);
}
}
//if (event == EVENT_LBUTTONUP)
//{
//rectangle(canvas, button, Scalar(200, 200, 200), 2);
//}
imshow(winName, canvas);
waitKey(1);
}
void callBackFunc2(int event, int x, int y, int flags, void* userdata)
{
if (event == EVENT_LBUTTONDOWN)
{
if (button2.contains(Point(x, y)))//ponizej to co ma sie wykonac po nacisnieciu klawisza
{
//a = a + 7;
cout << "Nacisnales guzik NR2!\n" << endl;
//printf("liczba = %i\n", a);
rectangle(canvas(button2), button, Scalar(0, 0, 255), 2);
}
}
//if (event == EVENT_LBUTTONUP)
//{
//rectangle(canvas, button, Scalar(200, 200, 200), 2);
//}
imshow(winName, canvas);
waitKey(1);
}
int main()
{
// An image
Mat3b img(300, 300, Vec3b(0, 255, 0));
// Your button
button = Rect(0, 0, img.cols, 50);
button2 = Rect(0, 60, img.cols, 50);
// The canvas
canvas = Mat3b(img.rows + button.height, img.cols, Vec3b(0, 0, 0));
// Draw the button
canvas(button) = Vec3b(200, 200, 200);
canvas(button2) = Vec3b(200, 200, 200);
putText(canvas(button), buttonText, Point(button.width*0.35, button.height*0.7), FONT_HERSHEY_PLAIN, 1, Scalar(0, 0, 0));
putText(canvas(button2), buttonText2, Point(button.width*0.25, button.height*0.7), FONT_HERSHEY_PLAIN, 1, Scalar(0, 0, 0));
// Draw the image
//img.copyTo(canvas(Rect(0, button.height, img.cols, img.rows)));
// Setup callback function
namedWindow(winName);
setMouseCallback(winName, callBackFunc);
//setMouseCallback(winName, callBackFunc2);
imshow(winName, canvas);
waitKey();
return 0;
}

QPaintedTextureImage in Qt3D (Qt 5.8)

I want to create an entity with Qt3D that has a custom image as texture. I came across the QPaintedTextureImage (link leads to Qt 5.9 version for details. Here ist doc for 5.8), which can be written with a QPainter but I don't understand how.
First, this is how I imagine the entity could look like:
[EDIT]: code is edited and works now!
planeEntity = new Qt3DCore::QEntity(rootEntity);
planeMesh = new Qt3DExtras::QPlaneMesh;
planeMesh->setWidth(2);
planeMesh->setHeight(2);
image = new TextureImage; //see below
image->setSize(QSize(100,100));
painter = new QPainter;
image->paint(painter)
planeMaterial = new Qt3DExtras::QDiffuseMapMaterial;
planeMaterial->diffuse()->addTextureImage(image);
planeEntity->addComponent(planeMesh);
planeEntity->addComponent(planeMaterial);
TextureImage is the subclassed QPaintedTextureImage with paint function:
class TextureImage : public Qt3DRender::QPaintedTextureImage
{
public:
void paint(QPainter* painter);
};
What does the QPainter, passed to paint function, need to do in the implementation of paint if I just want to draw a big circle to the planeEntity?
[Edit] Implementation:
void TextureImage::paint(QPainter* painter)
{
//hardcoded values because there was no device()->width/heigth
painter->fillRect(0, 0, 100, 100, QColor(255, 255, 255));
/* Set pen and brush to whatever you want. */
painter->setPen(QPen(QBrush(QColor(255, 0, 255)) ,10));
painter->setBrush(QColor(0, 0, 255));
/*
* Draw a circle (or an ellipse -- the outcome depends very much on
* the aspect ratio of the bounding rectangle amongst other things).
*/
painter->drawEllipse(0, 0, 100, 100);
}
The short answer is... use QPainter exactly the same way you would normally.
void TextureImage::paint (QPainter* painter)
{
int w = painter->device()->width();
int h = painter->device()->height();
/* Clear to white. */
painter->fillRect(0, 0, w, h, QColor(255, 255, 255));
/* Set pen and brush to whatever you want. */
painter->setPen(QPen(QBrush(QColor(0, 0, 0)) ,10));
painter->setBrush(QColor(0, 0, 255));
/*
* Draw a circle (or an ellipse -- the outcome depends very much on
* the aspect ratio of the bounding rectangle amongst other things).
*/
painter->drawEllipse(0, 0, w, h);
}
However, note that you really shouldn't invoke the paint method directly. Instead use update which will cause Qt to schedule a repaint, initialize a QPainter and invoke your overridden paint method with a pointer to that painter.
It might be simpler to dynamically load the image you need in QML.
I had to do it not so long ago and opened a question on SO for it:
Qt3D dynamic texture

Why the shadow of the character remains there after redraw the window?

Using WTL and Graphics,I rewrite an list view tool,like:
,but after click the Name or Phone Number header to sort, it appears like:.
Seems that the old one still there, but not so clear,whats wrong?
The Core Draw Code:
void _DrawItem(HDC hDC, LPDRAWITEMSTRUCT lpDrawItemStruct)
{
...
CDCHandle dcx;
Gdiplus::Graphics grap(hDC);
CRect rcTmp;
GetClientRect(&rcTmp);
dcx.Attach(hDC);
BOOL bBackColor = TRUE;
if ((lpDrawItemStruct->itemID % 2) == 0)
{
bBackColor = FALSE;
}
Gdiplus::SolidBrush mySolidBrush(Gdiplus::Color(235, 235, 235,235));
if (pItem->getOver() || pItem->getChecked())
{
mySolidBrush.SetColor(Gdiplus::Color(215, 0, 0, 215));
}else{
if (bBackColor)
{
mySolidBrush.SetColor(Gdiplus::Color(235, 235, 235, 235));
}else{
mySolidBrush.SetColor(Gdiplus::Color(255, 255, 255, 255));
}
}
grap.FillRectangle(&mySolidBrush, lpDrawItemStruct->rcItem.left , lpDrawItemStruct->rcItem.top, nColumWidth,
lpDrawItemStruct->rcItem.bottom - lpDrawItemStruct->rcItem.top);
Just a guess but your alpha transparency value is not opaque so filling the rect with 235,235,235,235 will blend with the old content. Probably need a 255 in there for alpha.