Situation
A Flex project exported as a Projector, showing fullscreen. The project has a background and several dots which each represent a "Location". These locations are fetched from an XML file and have their position set in percentages. The location in pixels is calculated (this works as it should) by the width and height of the Application. The dots are placed correctly.
The background is a JPG with a resolution of 1280*1024. At this moment, the background is set on a Canvas
with backgroundSize = auto
. This places the image in the center without stretching it. Stretching results in ugly, pixelated images and tears the proportions apart.
Problem
When we view the project on 2 different resolutions (1 = 1280*1024; 2 = 1024*768), the dots are in the good position, the background image is sharp. But - because of the background having the same resolution as 1, the background isn't fully shown in resolution 2 (because it isn't stretched. A logic result.
That's why I tried stretching the background. The results:
On a smaller/other resolution:
Solution?
How should I solve this problem? I thought of always having the background centered on the bottom, leaving the proportions as they are. This is not an option because of missing details/parts of the image. Stretching results in ugly, pixelated images which are out of proportion.
I know stretching might be the only option to tackle the resolution problem without losing parts of the image, but how can I solve the problem where the dots aren't in the good position (like image 2 shows).