Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Highlighted
Developer
Posts: 222
Registered: ‎05-21-2012
My Device: BlackBerry RED Z10
My Carrier: WiFi
Accepted Solution

HELP Drawing and Adding Captions to Image

[ Edited ]

Please forgive my english and my beginner skills. I am really new to QT, QPainter and Graphics Programming.

 

I am developing the snap2chat application.  And I badly need help with Drawing and Adding Text Captions to Images.

 

I have tried QPainter to paint Brushes in the image and save it. But it is really slow. Also I added onTouch event on the image and passed the localX and localY and that's the position I also used for the QPainter to paint on and is not the right position to paint too.

 

and also the image get's bluish when I start to paint.

 

QImage theimage = QImage(imagePath);

	QPainter painter(&theimage);
	painter.setRenderHint(QPainter::Antialiasing, true);
	painter.setPen(QPen(Qt::transparent, 3, Qt::SolidLine, Qt::RoundCap)); // stroke
	painter.setBrush(QBrush(Qt::green, Qt::SolidPattern)); // fill
	painter.drawEllipse(x, y, 10, 10);

	//theimage.save(imagePath, "JPG"); // I also tried uncommenting this

	const bb::ImageData imageData = bb::ImageData::fromPixels(theimage.bits(), bb::PixelFormat::RGBX, theimage.width(), theimage.height(), theimage.bytesPerLine());

	m_image = bb::cascades::Image(imageData); // this is the image I show in the ImageView

 

Also drawing texts using QPainter crashes it with the reason of the QFontDatabase. I saw a solution in another thread to add this line <env var="QT_QPA_FONTDIR" value="/usr/lib/qt4/lib/fonts"/> but didn't helped.

 

Any suggestions please?

Developer
Posts: 825
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: HELP Drawing and Adding Captions to Image

Unforutnately the QT Painter draw text method is not supported, it's too deeply integrated into the QT Core.

 

You can however load the images into a webview and then place text on them using html/javascript

Developer
Posts: 222
Registered: ‎05-21-2012
My Device: BlackBerry RED Z10
My Carrier: WiFi

Re: HELP Drawing and Adding Captions to Image

Yeah. It looks like I can't do paintings perfectly yet on BlackBerry 10 Natively. Will look at HTML5 Canvas Paintings which is very rich too. Thanks so much!!

Developer
Posts: 825
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: HELP Drawing and Adding Captions to Image

If you test for a webconnection this will also allow you to enable "web fonts" so you can provide different styles of text.  If you do, just be certain the font has a loose copyright that allows for the use in a mobile application where users can create things.

Developer
Posts: 222
Registered: ‎05-21-2012
My Device: BlackBerry RED Z10
My Carrier: WiFi

Re: HELP Drawing and Adding Captions to Image

Do you have ideas how the MockIt App does captions to images? I'm sure they're doing it natively and not on HTML5. I would want to do more stuffs in native than in HTML5 Smiley Sad

Developer
Posts: 825
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: HELP Drawing and Adding Captions to Image

The only native method I'm aware of is using a label/textArea with a transparent background and then taking a screenshot (I do this in TextNGo)

 

Other than using html canvas the only other way I can think of to do this would be in an android apk.

 

There may be an external c++ api you could use but I wouldn't know where to start there Smiley Wink

Developer
Posts: 222
Registered: ‎05-21-2012
My Device: BlackBerry RED Z10
My Carrier: WiFi

Re: HELP Drawing and Adding Captions to Image

I have tried the screenshot API. it's really really good. Only problem there is it pops out a dialog to prompt the user. Smiley Sad

Developer
Posts: 825
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: HELP Drawing and Adding Captions to Image

I never knew it popped out a dialog... the alternative is to write the screen to a bitmap and then save it, works with 10.0 api's and doesn't require a screenshot permission or prompts

 

I wrote a sample that demonstrates how to do this.

 

https://github.com/slashkyle/Cascades-Samples/tree/master/CaptureThis

Developer
Posts: 222
Registered: ‎05-21-2012
My Device: BlackBerry RED Z10
My Carrier: WiFi

Re: HELP Drawing and Adding Captions to Image

THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! THANK YOU!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 

 

Your code works PERFECTLY!!!!! Thank you so much slashkyle!! you're AWESOME!!! I can't believe this can be done and what's good is it supports 10.0!!! I am now very happy!

Developer
Posts: 825
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: HELP Drawing and Adding Captions to Image

Glad it worked for ya =)  

 

Thanks for bringing snapchat to BB10!