Create Thought Balloons

[Angelo Moriconi]

Hi All !

I would like to create some vector graphics ballons that can be customized by the user (changing the scale factors and position of the stem.

Internally I use QPainter to draw all the balloons stuff including the balloons shapes.

For every type of balloon I create, on the fly, a QPainterPath from an union of several polygons.

I try to do something like this with a strange results that probably depends from the painterpath position:



The code (very straightfoward and not optimize) is the following:

QPolygonF Balloon::getSoftPolygon()
{		
	int w = m_rect.width();
	int h = m_rect.height();
 
	QPoint center = m_rect.center()-QPoint(w*0.25,h*0.25);
	QRect smallRect(center.x(),center.y(),w*0.5,h*0.5);
 
	QPainterPath s2;
	s2.addEllipse(smallRect.translated(w*0.2,0));
 
	QPainterPath s3;
	s3.addEllipse(smallRect.translated(-w*0.2,0));
 
	QPainterPath s4;
	s4.addEllipse(smallRect.translated(w*0.1,-h*0.2));
 
	QPainterPath s5;
	s5.addEllipse(smallRect.translated(-w*0.1,-h*0.2));
 
	QPainterPath s6;
	s6.addEllipse(smallRect.translated(w*0.1,h*0.2));
 
	QPainterPath s7;
	s7.addEllipse(smallRect.translated(-w*0.1,h*0.2));
 
	QPolygonF p = s2.united(s3).united(s4).united(s5).united(s6).united(s7).toFillPolygon();
	return p;
}

QPolygonF Balloon::getSoftPolygon()
{		
	int w = m_rect.width();
	int h = m_rect.height();

	QPoint center = m_rect.center()-QPoint(w*0.25,h*0.25);
	QRect smallRect(center.x(),center.y(),w*0.5,h*0.5);
		
	QPainterPath s2;
	s2.addEllipse(smallRect.translated(w*0.2,0));
		
	QPainterPath s3;
	s3.addEllipse(smallRect.translated(-w*0.2,0));
	
	QPainterPath s4;
	s4.addEllipse(smallRect.translated(w*0.1,-h*0.2));

	QPainterPath s5;
	s5.addEllipse(smallRect.translated(-w*0.1,-h*0.2));

	QPainterPath s6;
	s6.addEllipse(smallRect.translated(w*0.1,h*0.2));

	QPainterPath s7;
	s7.addEllipse(smallRect.translated(-w*0.1,h*0.2));

	QPolygonF p = s2.united(s3).united(s4).united(s5).united(s6).united(s7).toFillPolygon();
	return p;
}

To copy to clipboard, switch view to plain text mode 

Then in the paintEvent...

QPolygonF stemPolygon = getStemPolygon();
 
	QPainterPath overallShape = QPainterPath();
	overallShape.addPolygon(getSoftPolygon().united(stemPolygon));

QPolygonF stemPolygon = getStemPolygon();

	QPainterPath overallShape = QPainterPath();
	overallShape.addPolygon(getSoftPolygon().united(stemPolygon));

To copy to clipboard, switch view to plain text mode 

Probably exist a more simple way to create a "soft" balloon using QPainterPath.
Any suggestions and different solution are welcome !!

Bye, bye !

[high_flyer]

I try to do something like this with a strange results that probably depends from the painterpath position:

I take you mean the line that goes through the balloons...

Do you call QPainterPath::closeSubpath () somewhere?

[Angelo Moriconi]

No, I never call closeSubpath.
The problem is exactly the lines that start from some ellipse (circle) of the stem.
I try to add some closeSubpath calls but the problem still remains.

To create the stem polygon I use the following code block :

QPolygonF polygon;
	        QPainterPath p1;
		p1.addEllipse(QRect(apex.x()-5,apex.y()-20,10,10));
		p1.addEllipse(QRect(apex.x()-10,apex.y()-45,20,20));
		p1.addEllipse(QRect(apex.x()-20,apex.y()-90,30,30));
 
		QList<QPolygonF> list = p1.toFillPolygons();
		for(int i=0;i<list.size();i++)
		{
			polygon = polygon.united(list.at(i));
		}
                ...
                ... 
                return polygon;

QPolygonF polygon;
	        QPainterPath p1;
		p1.addEllipse(QRect(apex.x()-5,apex.y()-20,10,10));
		p1.addEllipse(QRect(apex.x()-10,apex.y()-45,20,20));
		p1.addEllipse(QRect(apex.x()-20,apex.y()-90,30,30));
		
		QList<QPolygonF> list = p1.toFillPolygons();
		for(int i=0;i<list.size();i++)
		{
			polygon = polygon.united(list.at(i));
		}
                ...
                ... 
                return polygon;

To copy to clipboard, switch view to plain text mode 

Any suggestions ?

[wysota]

I think that if you unite shapes, they get closed and that's where the line comes from. I'd say you should use a simple SVG file instead of rendering those paths. It would give you much more flexibility. If not, then just don't unite those polygons and see if the line is still there.

[Angelo Moriconi]

I surely prefer to use SVG but I need to modify the balloon stem so I cannot modify very easily an svg file.

Probably the best solution is to use directly a lot of cubicTo calls (Bezier Curve) in order to create the right shape. Is not so easy to manage a lot of points and make it linked with the object dimension.. but I'll try.

I think that will be very useful to create a sort of editor that allows to draw curves, edit control points and export the values with the possibility to add some kind of constraint, etc.

If I have some free time I will create something like that !

Angelo