I'd like to create a rotating circle drawn with a Qt:DotLine pen, using the Graphics View Framework. Using QGraphicsItemAnimation, I can rotate other shapes but not the circle. The program below demonstrates the problem: instead of the rectangle and the circle rotating together, the circle jerks around while the rectangle rotates gracefully.
#include <QApplication>
#include <QGraphicsView>
#include <QGraphicsItem>
#include <QTimeLine>
#include <QGraphicsItemAnimation>
QRectF rect (int r)
{
return QRectF (-r, -r, r * 2, r * 2);
}
void setupRot (QTimeLine *timeline, QGraphicsItem *item)
{
QGraphicsItemAnimation *animation = new QGraphicsItemAnimation;
animation->setItem(item);
animation->setTimeLine(timeline);
animation->setRotationAt (1, 360);
QObject::connect (timeline, SIGNAL(finished()), animation, SLOT(deleteLater()));
}
int main(int argc, char *argv[])
{
QApplication app (argc, argv);
QGraphicsScene scene;
QTimeLine *timeline = new QTimeLine;
timeline->setDuration (3000);
timeline->setCurveShape (QTimeLine::LinearCurve);
QObject::connect (timeline, SIGNAL(finished()), timeline, SLOT(deleteLater()));
setupRot (timeline, scene.addEllipse (rect (50), QPen (QBrush (QColor ("blue")), 8, Qt::DotLine)));
setupRot (timeline, scene.addRect (rect (60)));
scene.addEllipse (rect (40), QPen (QBrush (QColor ("red")), 8));
scene.setSceneRect (-100, -100, 200, 200);
QGraphicsView view (&scene);
view.show ();
timeline->setLoopCount (0);
timeline->start();
return app.exec ();
}
p.s.: I've found some sample code on the web where people are creating intermediate animation steps manually, like this:
const int steps = 100;
for (int i = 0; i < steps; ++i)
animation->setRotationAt (i / (float)steps, 360 / (float)steps * i);
Is this just a sign of people not understanding the concept of interpolation, or is there some advantage of setting (seemingly superfluous) control points?
Which version/platform? If I run your code as is (or slowed down 2x), the dotted circle rotation looks as good as the rectangle in Windows with Qt 4.7.
Related
I am trying to draw a 10 pixel radius circle on a QGraphicsScene that is anchored on the center and doesn't transform (change size) when the scene is zoomed.
I have tried using the QGraphicsEllipseItem with the QGraphicsItem::ItemIgnoresTransformations flag, but it still transforms when the scene is zoomed.
Is this possible with standard graphics items, or do I need to create my own and do the paint event manually?
The following code does what I think you're looking for. It creates a single 10 pixel immutable circle that anchors itself to the centre of the scene as well as 10 larger, movable, circles that obey the scaling transform applied...
#include <iostream>
#include <QApplication>
#include <QGraphicsEllipseItem>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QPainter>
int main (int argc, char **argv)
{
QApplication app(argc, argv);
QGraphicsView view;
QGraphicsScene scene;
view.setScene(&scene);
QGraphicsEllipseItem immutable(0, 0, 20, 20);
immutable.setFlag(QGraphicsItem::ItemIgnoresTransformations);
immutable.setPen(Qt::NoPen);
immutable.setBrush(Qt::blue);
scene.addItem(&immutable);
QObject::connect(&scene, &QGraphicsScene::sceneRectChanged,
[&](const QRectF &rect)
{
immutable.setPos(rect.center() - 0.5 * immutable.boundingRect().center());
});
for (int i = 0; i < 10; ++i) {
auto *e = new QGraphicsEllipseItem(20, 20, 50, 50);
e->setFlags(QGraphicsItem::ItemIsMovable | QGraphicsItem::ItemIsSelectable);
scene.addItem(e);
}
view.show();
view.setTransform(QTransform::fromScale(5, 2));
return app.exec();
}
I have a QGraphicsPixmapItem that rotates through different pixmaps to simulate animation. I need to accurately implement the shape() function so the scene can properly determine collision with other objects. Each pixmap obviously has slightly different collision paths. Is there a simple way to create a QPainterPath from a pixmap by outlining the colored pixels of the actual image that border the alpha background of the bounding rect without having to write my own complex algorithm that tries to create that path manually?
I plan on having these paths pre-drawn and cycle through them the same way I do as the pixmaps.
You can use QGraphicsPixmapItem::setShapeMode() with either QGraphicsPixmapItem::MaskShape or QGraphicsPixmapItem::HeuristicMaskShape for this:
#include <QtGui>
#include <QtWidgets>
class Item : public QGraphicsPixmapItem
{
public:
Item() {
setShapeMode(QGraphicsPixmapItem::MaskShape);
QPixmap pixmap(100, 100);
pixmap.fill(Qt::transparent);
QPainter painter(&pixmap);
painter.setBrush(Qt::gray);
painter.setPen(Qt::NoPen);
painter.drawEllipse(0, 0, 100 - painter.pen().width(), 100 - painter.pen().width());
setPixmap(pixmap);
}
enum { Type = QGraphicsItem::UserType };
int type() const {
return Type;
}
};
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QGraphicsView view;
view.setScene(new QGraphicsScene());
Item *item = new Item();
view.scene()->addItem(item);
// Comment out to see the item.
QGraphicsPathItem *shapeItem = view.scene()->addPath(item->shape());
shapeItem->setBrush(Qt::red);
shapeItem->setPen(Qt::NoPen);
view.show();
return app.exec();
}
I have a circle which I want to move smoothly on a path. The path class is like a horizontal U derived from the QPainterPath. when I start timer (QTimeLine object) the circle just jumps from the start of path to the end (start of upper U fork to the end of lower fork) with no smooth animation. Unfortunately, the QTimeLine::setLoopCount(int n) doesn't work too.
Do you have any idea about the reason?
// UPath(int forkLen, int forksDistance, QPointF startPoint)
UPath* uPath = new UPath(500, 60, QPointF(10, 10));
QList<QPointF> points = uPath->pathPoints(0.006); // returns the points of the path
// implemented by QPainterPath::pointAtPercent()
QGraphicsItem *ball = new QGraphicsEllipseItem(0, 0, 10, 10);
QTimeLine *timer = new QTimeLine(5000);
timer->setFrameRange(0, 100);
timer->setLoopCount(2); // doesn't work
QGraphicsItemAnimation *animation = new QGraphicsItemAnimation;
animation->setItem(ball);
animation->setTimeLine(timer);
for (int i = 0; i < points.count(); ++i)
animation->setPosAt(i/points.count(), points.at(i));
QGraphicsScene *scene = new QGraphicsScene();
scene->addItem(ball);
QGraphicsView *view = new QGraphicsView(scene);
view->setRenderHint(QPainter::Antialiasing);
view->show();
timer->start();
The QGraphicsAnimation class is deprecated. What you want is an adapter between a QPainterPath and the animation system. See below for a complete example.
Using painter paths for animations requires some extra smoothing (resampling) as there will be velocity changes along the path, and it won't look all that great. You may notice it when you run the code below. Painter paths are meant for painting, not for animating stuff.
The extent of this misbehavior will depend on the kind of path you're using, so it may end up working OK for the particular use case you have.
#include <QApplication>
#include <QAbstractAnimation>
#include <QPainterPath>
#include <QGraphicsScene>
#include <QGraphicsView>
#include <QGraphicsEllipseItem>
#include <QDebug>
class PathAnimation : public QAbstractAnimation {
Q_OBJECT
Q_PROPERTY(int duration READ duration WRITE setDuration)
QPainterPath m_path;
int m_duration;
QVector<QPointF> m_cache;
QGraphicsItem * m_target;
int m_hits, m_misses;
public:
PathAnimation(const QPainterPath & path, QObject * parent = 0) :
QAbstractAnimation(parent), m_path(path), m_duration(1000), m_cache(m_duration), m_target(0), m_hits(0), m_misses(0) {}
~PathAnimation() { qDebug() << m_hits << m_misses; }
int duration() const { return m_duration; }
void setDuration(int duration) {
if (duration == 0 || duration == m_duration) return;
m_duration = duration;
m_cache.clear();
m_cache.resize(m_duration);
}
void setTarget(QGraphicsItem * target) {
m_target = target;
}
void updateCurrentTime(int ms) {
QPointF point = m_cache.at(ms);
if (! point.isNull()) {
++ m_hits;
} else {
point = m_path.pointAtPercent(qreal(ms) / m_duration);
m_cache[ms] = point;
++ m_misses;
}
if (m_target) m_target->setPos(point);
}
};
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QGraphicsEllipseItem * item = new QGraphicsEllipseItem(-5, -5, 10, 10);
item->setPen(QPen(Qt::red, 2));
item->setBrush(Qt::lightGray);
QPainterPath path;
path.addEllipse(0, 0, 100, 100);
PathAnimation animation(path);
animation.setTarget(item);
QGraphicsScene scene;
scene.addItem(item);
QGraphicsView view(&scene);
view.setSceneRect(-50, -50, 200, 200);
animation.setLoopCount(-1);
animation.start();
view.show();
return a.exec();
}
#include "main.moc"
The question is simple ! I want something like this. Either using QPainter class or using Qt Graphics Framework:
There are several ways to do this using a QPainterPath specified here.
Here is the second example from that page:
#include <QtGui>
#include <cmath>
class Widget : public QWidget
{
public:
Widget ()
: QWidget() { }
private:
void paintEvent ( QPaintEvent *)
{
QString hw("hello world");
int drawWidth = width() / 100;
QPainter painter(this);
QPen pen = painter.pen();
pen.setWidth(drawWidth);
pen.setColor(Qt::darkGreen);
painter.setPen(pen);
QPainterPath path(QPointF(0.0, 0.0));
QPointF c1(width()*0.2,height()*0.8);
QPointF c2(width()*0.8,height()*0.2);
path.cubicTo(c1,c2,QPointF(width(),height()));
//draw the bezier curve
painter.drawPath(path);
//Make the painter ready to draw chars
QFont font = painter.font();
font.setPixelSize(drawWidth*2);
painter.setFont(font);
pen.setColor(Qt::red);
painter.setPen(pen);
qreal percentIncrease = (qreal) 1/(hw.size()+1);
qreal percent = 0;
for ( int i = 0; i < hw.size(); i++ ) {
percent += percentIncrease;
QPointF point = path.pointAtPercent(percent);
qreal angle = path.angleAtPercent(percent); // Clockwise is negative
painter.save();
// Move the virtual origin to the point on the curve
painter.translate(point);
// Rotate to match the angle of the curve
// Clockwise is positive so we negate the angle from above
painter.rotate(-angle);
// Draw a line width above the origin to move the text above the line
// and let Qt do the transformations
painter.drawText(QPoint(0, -pen.width()),QString(hw[i]));
painter.restore();
}
}
};
int main(int argc, char **argv)
{
QApplication app(argc, argv);
Widget widget;
widget.show();
return app.exec();
}
I want to draw a filled ellipse in QT that would not change its size when zooming in and out. For now I have the following:
QPen pen = painter->pen();
pen.setCosmetic(true);
pen.setWidth(5);
painter->setPen(pen);
QBrush brush = painter->brush();
brush.setStyle(Qt::SolidPattern);
painter->setBrush(brush);
painter->drawEllipse(p, 2, 2);
When I zoom out a gap between the boundary and the filling appear. So it looks like 2 concentric circles. And when I zoom in the filling overgrows the boundary and the disk gets bigger and bigger. Any idea how to fix this? Thanks!
I would instead look to the ItemIgnoresTransformations flag, which will make the item itself "cosmetic", rather than just the pen. Here's a working example:
#include <QtGui>
class NonScalingItem : public QGraphicsItem
{
public:
NonScalingItem()
{ setFlag(ItemIgnoresTransformations, true); }
QRectF boundingRect() const
{ return QRectF(-5, -5, 10, 10); }
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
QPen pen = painter->pen();
pen.setCosmetic(true);
pen.setWidth(5);
pen.setColor(QColor(Qt::red));
painter->setPen(pen);
QBrush brush = painter->brush();
brush.setStyle(Qt::SolidPattern);
painter->setBrush(brush);
painter->drawEllipse(QPointF(0, 0), 10, 10);
}
};
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QGraphicsScene *scene = new QGraphicsScene;
QGraphicsView *view = new QGraphicsView;
NonScalingItem *item = new NonScalingItem;
scene->addItem(item);
view->setScene(scene);
/* The item will remain unchanged regardless of whether
or not you comment out the following line: */
view->scale(2000, 2000);
view->show();
return app.exec();
}