Hello,
What is the best practice to scale text on top of an image?
I am building a calculator and I would like the text to scale if the number of digits displayed overfills the display, as well as for screen rotation from landscape to portrait. I have several text boxes overlayed over the screen image so I need the text to scale proportionality to the image.
Scaling the screen image is easy with height and width properties but fonts only have either PointSize or pixel Size...
Currently I am scaling the font as follows, it works fine until I enter portrait mode ands then the display text is truncated instead of scaling down.
This works fine if I lock the app to landscape view, However, its far from smooth and I feel as though I am reinventing the wheel here, there must be a better way to do this smoothly and efficiently...Code:Text { id: memText property double memtxt:.22; //for scaling font size anchors { right: parent.right; rightMargin: parent.width * .02; verticalCenterOffset: parent.height * -.28; verticalCenter: parent.verticalCenter } onTextChanged: { //scale the input text var length = text.length; if (length < 5){ memtxt = .22 } else if (length == 6){ memtxt = .21 }else if(length == 7){ memtxt = .18 }else if(length == 8){ memtxt = .16 }else if(length == 9){ memtxt = .14 }else if(length == 10){ memtxt = .12 }else if(length >= 11){ memtxt = .10 } } font.pixelSize: parent.width > parent.height ? parent.height * memtxt : parent.width * memtxt;
Thanks for any input!
Cheers,
Jon
Here is an image of the screen image and text box's to give an idea of what I am up to....
Screenshot-2.png



