Extend QML Image

[Gigitsu]

Hello!

How can I extend the QML Image element? I want to override paint method to draw a rounded image.

[wysota]

Hello!

How can I extend the QML Image element? I want to override paint method to draw a rounded image.

You cannot do that this way (by extending), at least with QtQuick2 (Qt5). But what you can do is to apply a shader effect that will mask the image with the shape of your choice. You can either apply a fragment shader program directly or you can use OpacityMask item from QtGraphicalEffects to use a rounded rect as a mask for your image.

By the way, in QtQuick 2 there is no "paint method" for Qt Quick items. Drawing is done by constructing a scene graph consisting of OpenGL primitives that render the item.

[Gigitsu]

Is there any way to do this with qt4 and QtQuick 1.0?

Thank you

[wysota]

In QtQuick 1 all items are derived from QGraphicsItem so you can override the paint() method for them. It should be quite straightforward to implement a custom image item, e.g. using QGraphicsEffect.

[anda_skoa]

In QtQuick2 it is possible to paint an item with the traditiona QPainter API using QQuickPaintedItem.

Cheers,
_

[wysota]

In QtQuick2 it is possible to paint an item with the traditiona QPainter API using QQuickPaintedItem.

Only for completely custom items, not for extending built-in ones. And even then you are painting on a texture that is later passed to a node in the graph and continues along the same path.

[anda_skoa]

Right, just wanted to make sure this option is also known.

Cheers,
_

[wysota]

Right, just wanted to make sure this option is also known.

Sure, I just wanted to make sure we don't get a question about extending existing QtQuick2 items with QPainter

[Gigitsu]

In QtQuick 1 all items are derived from QGraphicsItem so you can override the paint() method for them. It should be quite straightforward to implement a custom image item, e.g. using QGraphicsEffect.

Ok, this is whati I've done so far:

void RoundImage::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
	QImage image(m_url.url());	 
	QBrush brush(image);
 
	int h = m_explicitSourceSize ? m_sourcesize.height() : image.height();
	int w = m_explicitSourceSize ? m_sourcesize.width() : image.width();
 
	QPen pen;
	pen.setColor(Qt::darkGray);
	pen.setJoinStyle(Qt::RoundJoin);
 
	painter->setBrush(brush);
	painter->setPen(pen);
	painter->drawRoundedRect(0, 0, w, h, w/2, h/2);
}

void RoundImage::paint(QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *)
{
	QImage image(m_url.url());	 
	QBrush brush(image);

	int h = m_explicitSourceSize ? m_sourcesize.height() : image.height();
	int w = m_explicitSourceSize ? m_sourcesize.width() : image.width();
	 
	QPen pen;
	pen.setColor(Qt::darkGray);
	pen.setJoinStyle(Qt::RoundJoin);

	painter->setBrush(brush);
	painter->setPen(pen);
	painter->drawRoundedRect(0, 0, w, h, w/2, h/2);
}

To copy to clipboard, switch view to plain text mode 

and the m_url is a QUrl.

The problem is that I don't know how to load an image or pixmap from an url and I need to use a QUrl because the source can be an image provider too

[wysota]

The QDeclarativeEngine instance has a QNetworkAccessManager instance you can use.