0

我正在尝试构建一个简单的原型（使用 Awesomium 1.7 RC3），它允许 WPF 应用程序显示网页，允许放大/缩小页面。我不想保留布局，而是以与调整窗口大小相同的方式调整布局。这与 Internet Explorer 的缩放功能相同。实际渲染放大时，逻辑显示区域会升高。

例如，以下是 100% 缩放的应用程序截图：

缩放 100% 缩放 100%
（来源：hand-net.com）

上部滑块允许控制缩放。当我将缩放比例更改为 90% 或 110% 时，我得到的是：

放大 90% 放大 90%
（来源：hand-net.com）

和

放大 110% 放大 110%
（来源：hand-net.com）

如您所见，浏览器呈现混乱。不仅内部渲染与WebBrowser控制区域不匹配，而且图片缩放质量非常低。

所有这些都与 Awesomium 1.6.6 一起正常工作。

我怎样才能得到想要的结果？

示例应用程序可在此处下载。关键部分是：

xml:

    <Slider Value="{Binding Path=Zoom, Mode=TwoWay}"
            IsSnapToTickEnabled="True"
            TickPlacement="Both"
            Grid.ColumnSpan="2"
            Minimum="0.1"
            Maximum="2.0"
            TickFrequency="0.1"
            LargeChange="0.1" />

    <Grid x:Name="Container"
          Background="SaddleBrown"
          Grid.Row="1"
          utils:SizeObserver.Observe="true"
          utils:SizeObserver.ObservedWidth="{Binding ContainerActualWidth, Mode=OneWayToSource}"
          utils:SizeObserver.ObservedHeight="{Binding ContainerActualHeight, Mode=OneWayToSource}">
        <Grid x:Name="Containee"
              Background="LightBlue"
              RenderTransformOrigin="0,0"
              Width="{Binding ContaineeWidth, Mode=OneWay}"
              Height="{Binding ContaineeHeight, Mode=OneWay}">
            <Grid.LayoutTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="{Binding Zoom, Mode=OneWay}"
                                    ScaleY="{Binding Zoom, Mode=OneWay}" />
                    <SkewTransform />
                    <RotateTransform />
                    <TranslateTransform />
                </TransformGroup>
            </Grid.LayoutTransform>
            <awe:WebControl Source="http://www.flickr.com/search/?q=strasbourg&amp;z=m" />
        </Grid>
    </Grid>

用作 DataContext 的 ViewModel：

public class ViewPortViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void RaisePropertyChanged(string propertyName)
    {
        Debug.WriteLine("Property changes: " + propertyName);
        if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
    }

    private double m_Zoom = 1D;

    public double Zoom
    {
        get { return m_Zoom; }
        set
        {
            if (value != m_Zoom)
            {
                m_Zoom = value;
                RaisePropertyChanged("Zoom");
                RaisePropertyChanged("ContaineeWidth");
                RaisePropertyChanged("ContaineeHeight");
            }
        }
    }

    private double m_ContainerActualWidth = 100D;

    public double ContainerActualWidth
    {
        get { return m_ContainerActualWidth; }
        set
        {
            if (value != m_ContainerActualWidth)
            {
                m_ContainerActualWidth = value;
                RaisePropertyChanged("ContainerActualWidth");
                RaisePropertyChanged("ContaineeWidth");
            }
        }
    }

    private double m_ContainerActualHeight = 100D;

    public double ContainerActualHeight
    {
        get { return m_ContainerActualHeight; }
        set
        {
            if (value != m_ContainerActualHeight)
            {
                m_ContainerActualHeight = value;
                RaisePropertyChanged("ContainerActualHeight");
                RaisePropertyChanged("ContaineeHeight");
            }
        }
    }

    public double ContaineeWidth
    {
        get { return m_ContainerActualWidth / Zoom; }
    }

    public double ContaineeHeight
    {
        get { return m_ContainerActualHeight / Zoom; }
    }
4

2 回答 2

0

这看起来类似于我在以前版本的控件中遇到的问题，其中文本以不可读的方式呈现。解决方案（对我来说）是在我的 XAML 中RenderOptions.BitmapScalingMode设置NearestNeighbor。我从 Awesomium 得到的答案表明，这是一个已知问题，他们正在为此制定多种策略，而我从那时起就没有注意到这个问题，它很可能再次出现。

检查带有模糊文本的问题问题，看看它是否解决了您的问题。这就是我的 XAML 最终的样子：

    <awe:WebControl x:Name="MyBrowser" 
                    Grid.Row="1" 
                    Focusable="True" 
                    Visibility="Visible" 
                    HorizontalAlignment="Stretch" 
                    VerticalAlignment="Stretch"  
                    SnapsToDevicePixels="True"

                    >
        <awe:WebControl.Style>
            <Style>
                <Setter Property="RenderOptions.BitmapScalingMode" Value="NearestNeighbor" />
            </Style>
        </awe:WebControl.Style>
    </awe:WebControl>
于 2012-10-08T10:10:59.710 回答
0

我在Perikles 提供的awesomium 支持论坛问题中找到了解决方案。

解决我的问题的两个步骤：

  1. 还将布局转换应用于 webcontrol：

    <Grid x:Name="Containee"
    Background="LightBlue"
    RenderTransformOrigin="0,0"
    Width="{Binding ContaineeWidth, Mode=OneWay}"
    Height="{Binding ContaineeHeight, Mode=OneWay}">
<Grid.LayoutTransform>
  <TransformGroup>
    <ScaleTransform ScaleX="{Binding Zoom, Mode=OneWay}"
                    ScaleY="{Binding Zoom, Mode=OneWay}" />
  </TransformGroup>
</Grid.LayoutTransform>
<awe:WebControl Source="http://www.flickr.com/search/?q=strasbourg&amp;z=m"
                        LoadingFrameComplete="WebControl_LoadingFrameComplete_1">
  <awe:WebControl.LayoutTransform>
    <ScaleTransform ScaleX="{Binding Zoom, Mode=OneWay}"
                    ScaleY="{Binding Zoom, Mode=OneWay}" />
  </awe:WebControl.LayoutTransform>
</awe:WebControl>
</Grid>

  2. 订阅 LoadingFrameComplete 事件以在页面加载后应用渲染转换选项：

    private bool renderingOptionsApplied;

private void WebControl_LoadingFrameComplete_1(object sender, Awesomium.Core.FrameEventArgs e)
{
    if (renderingOptionsApplied)
        return;
    var webControl = sender as Awesomium.Windows.Controls.WebControl;

    if ((webControl.Surface != null) && (webControl.Surface is WebViewPresenter))
    {
        RenderOptions.SetBitmapScalingMode(webControl.Surface as WebViewPresenter, BitmapScalingMode.Linear);
        renderingOptionsApplied = true;
    }
}
于 2012-10-08T14:56:17.553 回答