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
Developer
Posts: 237
Registered: ‎05-21-2012
My Device: BlackBerry RED Z10
My Carrier: WiFi

HELP - problems with SCALE and POSITION when saving an image on top of another image

HELP - problems with SCALE and POSITION when saving an image on top of another image

 

//this has rotation, and scale pinch event handlers and working well
object = ImageView::create("asset:///images/itsmorefunlogo.png"); QImageReader reader; reader.setFileName(appFolder + "app/native/assets/images/background.jpg"); QImage image = reader.read(); QPainter painter(&image); QString bomberFileName = appFolder + "app/native/assets/images/itsmorefunlogo.png"; reader.setFileName(bomberFileName); QImage bombimage = reader.read(); QTransform imageTransform; imageTransform.rotate(object->rotationZ()); imageTransform.scale(object->scaleX(), object->scaleY()); bombimage = bombimage.transformed(imageTransform); painter.drawImage(QPoint(object->translationX(), object->translationY()), bombimage); image.save(fileName, "JPG");

 I am not getting the correct POSITION and SCALE, only the ROTATION is perfect.

In my app I can pinch to scale and rotate the object (ImageView) and I have a button to save it and after it saves, the scale is not the same and the position.

Developer
Posts: 20
Registered: ‎11-17-2010
My Device: Dev Alpha A
My Carrier: -

Re: HELP - problems with SCALE and POSITION when saving an image on top of another image

Posting some images may help to illustrate what the actual issue is.

 

A shot in the dark: Have you tried reversing the rotate and scale commands (so doing scale first)? The concept of transformation matrices can be tricky if on is not used to them.

 

Daniel

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

Re: HELP - problems with SCALE and POSITION when saving an image on top of another image

Initial

 

1.jpg

 

Output

 

2.jpg

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

Re: HELP - problems with SCALE and POSITION when saving an image on top of another image

Thank you so much DANS

 

Full source code here: http://tny.cz/ecb114ea

Developer
Posts: 20
Registered: ‎11-17-2010
My Device: Dev Alpha A
My Carrier: -

Re: HELP - problems with SCALE and POSITION when saving an image on top of another image

Glad I could help.

(why not like the post if it solved the issue:-)

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

Re: HELP - problems with SCALE and POSITION when saving an image on top of another image

my issue is not yet solved. Smiley Happy

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

Re: HELP - problems with SCALE and POSITION when saving an image on top of another image

reversing the scale and rotation still does not help Smiley Sad

Developer
Posts: 20
Registered: ‎11-17-2010
My Device: Dev Alpha A
My Carrier: -

Re: HELP - problems with SCALE and POSITION when saving an image on top of another image

I can't see the images yet, just placeholders.

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

Re: HELP - problems with SCALE and POSITION when saving an image on top of another image

Sorry, what do you mean?

Developer
Posts: 169
Registered: ‎03-25-2011
My Device: Playbook, Z10 L.E.
My Carrier: Vodafone NL

Re: HELP - problems with SCALE and POSITION when saving an image on top of another image

Hello there! I'm also having similar problems.

 

On my QML I have something this:

ImageView {
        id: iv_image
        scalingMethod: ScalingMethod.AspectFit	// The wallpaperFit() only works with this scalingMethod
        loadEffect: ImageViewLoadEffect.None
        minHeight: _screenSize.height			// The wallpaper image is always a square with the biggest device size
        minWidth: _screenSize.height
        horizontalAlignment: HorizontalAlignment.Center // The image is initially centered on the container
        verticalAlignment: VerticalAlignment.Center
}

 The user can scale, translate and rotate the loaded image via gesture handlers. Once it's done, it clicks on a Save button which calls a C++ function like this:

_imageEditor.processImage(iv_image.imageSource, iv_image.scaleX, iv_image.translationX, iv_image.translationY,iv_image.rotationZ);

 This is the processImage function:

QString ImageEditor::processImage(const QString &qurl, const double scale, const double translationX, const double translationY, const double rotation){
	QString imagePath = qurl;
	imagePath.replace("file://","",Qt::CaseInsensitive);
	QImageReader reader(imagePath);
	QImage image = reader.read();
	qDebug() << "[ImageEditor::processImage] scale: " << scale << ", translationX: " << translationX << ", translationY: " << translationY << ", rotation: " << rotation;
	double factor = 1.0;
	if(image.width() > image.height())
	{
		factor = image.width()	/image.width();
	}else
	{
		factor = 1280.0/image.height();
	}
	QTransform transform;
	//transform.translate(translationX,translationY);
	transform.scale(factor*scale,factor*scale);
	transform.rotate(rotation);
	QImage tranformedImage = image.transformed(transform,Qt::SmoothTransformation);
	QImage croppedImage = tranformedImage.copy( 0 - translationX, 0 - translationY, 1280, 768);
	QString workingDir = QDir::currentPath();
	bool t;
	QString imageName = decideImageName();
	t = croppedImage.save(workingDir + "/shared/photos/wappy/wappy-" + imageName + ".jpg","JPG");
	qDebug() << t;
	if(t==true){
		return workingDir + "/shared/photos/wappy/wappy-" + imageName + ".jpg";
	}
	else{
		return "";
	}
}

 I get no erros but the final result is definitely not what I expected. The rotation appears to also translate, the scaling goes off the charts, the cropping is affected by everything ... I really lost now.

 

I was reading this and this Docs but I couldn't figure out how to use the APIs yet.

 

How can I convert an ImageView to a QImage including all transformations? Any other tips are welcome too!

 

Cheers!