缩放和图像填充屏幕答案

【问题标题】：Zooming and Image filling the screen缩放和图像填充屏幕
【发布时间】：2012-11-21 09:33:56
【问题描述】：

我有一个 Image 控件类，它可以放大/缩小，填充屏幕，并执行 1:1 的比例（全部由 4 个不同的按钮控制。但是，当屏幕分辨率大于 1280 x 1024 时，我的填充屏幕而 1:1 的比例并没有达到应有的效果。

public void ZoomActual()
    {
        m_translateTransform.BeginAnimation(TranslateTransform.XProperty, CreateAnimation(0));
        m_translateTransform.BeginAnimation(TranslateTransform.YProperty, CreateAnimation(0));
        m_zoomFactor.BeginAnimation(ScaleTransform.ScaleXProperty, CreateAnimation(1));
        m_zoomFactor.BeginAnimation(ScaleTransform.ScaleYProperty, CreateAnimation(1));
    } //1:1 ratio button control

    /// <summary>
    /// This function is used to fill the screen with the current picture on the zoomandpan Control
    /// </summary>
    public void ZoomFit()
    {
        double screen_height = ActualHeight;
        double screen_width = ActualWidth;

        double image_width = m_source_child.ActualWidth;
        double image_height = m_source_child.ActualHeight;

        double image_ratio = image_width / image_height;
        double screen_ratio = screen_width / screen_height;

        if (image_width > image_height)
        {
            m_translateTransform.BeginAnimation(TranslateTransform.XProperty, CreateAnimation(0));
            m_translateTransform.BeginAnimation(TranslateTransform.YProperty, CreateAnimation(0));
            m_zoomFactor.BeginAnimation(ScaleTransform.ScaleXProperty, CreateAnimation(1 / screen_ratio * image_ratio)); //width
            m_zoomFactor.BeginAnimation(ScaleTransform.ScaleYProperty, CreateAnimation(1 / screen_ratio * image_ratio)); //height
        }
        else
        {
            m_translateTransform.BeginAnimation(TranslateTransform.XProperty, CreateAnimation(0));
            m_translateTransform.BeginAnimation(TranslateTransform.YProperty, CreateAnimation(0));
            m_zoomFactor.BeginAnimation(ScaleTransform.ScaleXProperty, CreateAnimation((screen_ratio * image_ratio))); //width
            m_zoomFactor.BeginAnimation(ScaleTransform.ScaleYProperty, CreateAnimation((screen_ratio * image_ratio))); //height
        }
    } //fillscreen button control

    /// <summary>
    /// This function is used to control the animations of the ZoomandPan. Animations consist of Zooming in
    /// and out of a picture and allows panning of the displayed image
    /// </summary>
    /// <param name="a_toValue">used for zoom in percentage [currently set at: 1.5 (150%)]</param>
    /// <returns>Animation values image</returns>
    private DoubleAnimation CreateAnimation(double a_toValue)
    {
        var dubAni = new DoubleAnimation(a_toValue, new Duration(TimeSpan.FromMilliseconds(300)))
        {
            AccelerationRatio = 0.1,
            DecelerationRatio = 0.9,
            FillBehavior = FillBehavior.HoldEnd
        };
        dubAni.Freeze();
        return dubAni;
    } //Animation value setter

    /// <summary>
    /// DoZoom is used for executing the physical zoom of the picture, enlarges or shrinks image depending
    /// on CreateAnimation values
    /// </summary>
    /// <param name="a_deltaZoom">Determinded to be + or -. can be set by mousewheel and/or buttons. Determines Zoom in/out</param>
    /// <param name="a_mousePosition">Current positon of mouse</param>
    /// <param name="a_physicalPositon">refrence to last area mousePosition was on image</param>
    private void DoZoom(Double a_deltaZoom, Point a_mousePosition, Point a_physicalPositon)
    {
        double currentZoom = m_zoomFactor.ScaleX;
        currentZoom *= a_deltaZoom;
        if (currentZoom < MinZoom)
            currentZoom = MinZoom;
        else if (currentZoom > MaxZoom)
            currentZoom = MaxZoom;

        m_translateTransform.BeginAnimation(TranslateTransform.XProperty, CreateAnimation(-1 * (a_mousePosition.X * currentZoom - a_physicalPositon.X)));
        m_translateTransform.BeginAnimation(TranslateTransform.YProperty, CreateAnimation(-1 * (a_mousePosition.Y * currentZoom - a_physicalPositon.Y)));

        m_zoomFactor.BeginAnimation(ScaleTransform.ScaleXProperty, CreateAnimation(currentZoom));
        m_zoomFactor.BeginAnimation(ScaleTransform.ScaleYProperty, CreateAnimation(currentZoom));
    } //Zoom animation

当我这样做时，我的意思是：如果我的屏幕分辨率为 1280 x 1024 或更低，则填充屏幕将填满屏幕，而 1:1 的比例将给出实际大小图片。任何大于 1280 x 1024 的分辨率都会导致填充屏幕控件使图像更小（在画布内），而不是将整个图像放在窗口上。并且 1:1 比例控制将在右侧有一个小间隙，即空白区域。非常感谢提供的任何帮助，我对图像控制有点陌生，所以这看起来很微不足道。对不起

【问题讨论】：

您的 XAML 是什么样的？ Image 控件根据给定的空间大小和Stretch 属性进行自己的拟合。
m_zoomFactor 和 m_translateTransform 故事板附加到什么上？请提供理解代码所需的一切。
private void Setup() { m_source = VisualTreeHelper.GetChild(this, 0) as Canvas; //可视化树作为框架 m_source = (Canvas)Content; m_source_child = (图片)m_source.Children[0];
m_translateTransform = new TranslateTransform(); m_zoomFactor = new ScaleTransform(); m_transformGroup = 新的 TransformGroup(); m_transformGroup.Children.Add(m_zoomFactor); //在修改图片时使缩放成为变换组的一部分 m_transformGroup.Children.Add(m_translateTransform); m_source.RenderTransform = m_transformGroup; //允许对图片进行一般修改，在这种情况下 - 缩放和平移 Focusable = true;}

标签： c# wpf zooming transform

【解决方案1】：

我假设您希望在 ZoomFit 函数中进行填充，同时保持适当的纵横比。我通常是这样做的：

double ratio = Math.Min(destArea.Width / imageSize.Width, destArea.Height / imageSize.Height);

double imageWidth = imageSize.Width * ratio;
double imageHeight = imageSize.Height * ratio;

您应该能够直接将比率提供给 ScaleTransform。

如果您想缩放以填充并保持纵横比但修剪多余部分，您只需使用 Math.Max 来计算比率，而不是 Math.Min。

【讨论】：

【解决方案2】：

我认为你的基本问题是你有一些奇怪的数学来计算ZoomFit 中的比例因子。例如，如果您的屏幕纵横比是 1:1，您将始终缩放等于图像纵横比的因子。这意味着 2:1 的图像总是会放大 200%，无论它实际上有多大。

【讨论】：