0

I have a div of fixed size and an Image inside it. I create a Rectangle over the Image and I want to zoom into that Rectangle.

In the following code: highlightItem is the Rectangle inside the Image and it contains x, y, width and height. output is the Image and it contains x, y, width and height.

What I tried to do is to "move" the Imageto the center of the Rectangle and then scale the Image.

var parentMiddleX = output.x + output.width/2;
var parentMiddleY = output.y + output.height/2;

var highlightMiddleX = highlightItem.x + highlightItem.width/2;
var highlightMiddleY = highlightItem.y + highlightItem.height/2;

output.x = (parentMiddleX - highlightMiddleX); 
output.y = (parentMiddleY - highlightMiddleY);

output.scale = Math.sqrt((output.width*output.height)/(highlightItem.width*highlightItem.height));

Basically I want to do something similar to this, but in QML.

BaCaRoZzo
  • 7,502
  • 6
  • 51
  • 82
Lee
  • 781
  • 2
  • 11
  • 31
  • Transformations can be applied via [Matrix4x4](http://doc.qt.io/qt-5/qml-qtquick-matrix4x4.html) which is a [basic type](http://doc.qt.io/qt-5/qml-matrix4x4.html). Look to [this question](http://stackoverflow.com/questions/28628465/qml-using-matrix4x4-transform) and related comments/answers. – BaCaRoZzo Jun 08 '15 at 08:41
  • Can you point me to what matrix manipulation might give me the result I need? It seems that I can set the width, height, x and y without using a matrix – Lee Jun 08 '15 at 10:27
  • Ok, I've re-read your question and you can achieve what you want by simply setting the `Image` to the propose position. The thing is, you should check how [`fillMode`](http://doc.qt.io/qt-5/qml-qtquick-image.html#fillMode-prop) is set since it can block your code. Posting a minimum working example could help a lot to check the current state of the code. – BaCaRoZzo Jun 08 '15 at 14:31

0 Answers0