Maintaining Aspect Ratio

Question

0.00/5 (No votes)

See more:

A 1920 x 1080 image is a 16:9 aspect ratio. I can put the image into a D3DImage no problem. I am using this as the background of a Canvas object. That works very well too. To get proper scaling when the Canvas is resized by the user changing the size of the Window I have the Canvas inside a ViewBox.

My question is if the Canvas was set to a size that is a 16:9 aspect ratio, say 640 x 360, when the ViewBox resizes the Canvas will that aspect ratio be maintained?

This ties into my other question Common Coordinates for a D3DImage in a Canvas[^]

@BillWoodruff, my apologies, this is a WPF/DirectX question.

@Sergey, what you say makes sense but the ViewBox seems to take care of this.

It really strange. When I get the Height/Width/PixelHeight or PixelWidth the D3DImage always reports 1920 x 1080 no matter what happens to it visually on the screen, yet it always looks correct as long as I start with a Cavas size that is a 16:9 ratio. Also the Canvas never get an event indicating it has been resize yet the ViewBox does.
Thanks,
Doug

Posted 30-Oct-14 6:20am

AeroClassics

Updated 5-Nov-14 4:42am

v2

Add a Solution

Comments

BillWoodruff 30-Oct-14 22:14pm

By "Canvas object" you mean an HTML5 Canvas ? ... or ???

Given that D3DImage is a DirectX interop object in WPF, do you have the programmatic access you need to re-size the image ?

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Accepted Answer · 2014-10-30T06:52:00

You have to support it in code. Take bounding rectangle and consider two separate cases: if its aspect ratio bigger or smaller then the target one. In one case you can create two vertical unused bands on left and right, on second case — two horizontal bands on top and bottom. The same aspect ratio of the bounding rectangle and the target one will be the special case of one of those cases; this is your choice; in this case, the image will occupy the whole area of the bounding rectangle.

—SA

JJMatthews · Accepted Answer · 2014-11-05T20:49:00

Here's an aspect ratio function I use written in C++, you can easily convert it I imagine.

C#

inline CRect GetTargetRect(CRect rTarget, CSize szSource,
    unsigned int uiAlign = DT_CENTER|DT_VCENTER)
{
    // Keep the aspect ratio
    float fLeft = (float)rTarget.left;
    float fTop = (float)rTarget.top;
    float fWidth = (float)rTarget.Width();
    float fHeight = (float)rTarget.Height();
    float fPercentCy = ((fHeight / szSource.cy) * 100);
    float fPercentCx = ((fWidth / szSource.cx) * 100);
    float fNewWidth = 0;
    float fNewHeight = 0;

    // See if were stretching or shrinking
    if((szSource.cx >= fWidth) || (szSource.cy >= fHeight))
    {
        // Shrinking
        if(fPercentCx > fPercentCy)
        {
            // Must shrink more horizontally
            fNewWidth = ((szSource.cx * fPercentCy) / 100);
            if(uiAlign & DT_CENTER)
                fLeft += ((fWidth - fNewWidth) / 2);
            else if(uiAlign & DT_RIGHT)
                fLeft += (fWidth - fNewWidth);
            fWidth = fNewWidth;
        }
        else
        {
            // Must shrink more vertically
            fNewHeight = ((szSource.cy * fPercentCx) / 100);
            if(uiAlign & DT_VCENTER)
                fTop += ((fHeight - fNewHeight) / 2);
            else if(uiAlign & DT_BOTTOM)
                fTop += (fHeight - fNewHeight);
            fHeight = fNewHeight;
        }
    }
    else
    {
        // Stretching
        if(fPercentCx > fPercentCy)
        {
            // Must stretch more horizontally
            float fNewWidth = ((szSource.cx * fPercentCy) / 100);
            if(uiAlign & DT_CENTER)
                fLeft += ((fWidth - fNewWidth) / 2);
            else if(uiAlign & DT_RIGHT)
                fLeft += (fWidth - fNewWidth);
            fWidth = fNewWidth;
        }
        else
        {
            // Must stretch more vertically
            float fNewHeight = ((szSource.cy * fPercentCx) / 100);
            if(uiAlign & DT_VCENTER)
                fTop += ((fHeight - fNewHeight) / 2);
            else if(uiAlign & DT_BOTTOM)
                fTop += (fHeight - fNewHeight);
            fHeight = fNewHeight;
        }
    }

    return CRect((int)fLeft, (int)fTop, (int)(fLeft + fWidth), (int)(fTop + fHeight));
}

Maintaining Aspect Ratio

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Maintaining Aspect Ratio

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us