0

WPFアプリケーションがWebページを表示し、ページをズームイン/ズームアウトできるようにする単純なプロトタイプ（Awesomium 1.7 RC3を使用）を構築しようとしています。レイアウトを保持したくありませんが、ウィンドウのサイズを変更できるのと同じ方法でレイアウトを調整します。これは、InternetExplorerのズーム機能と同じ動作です。実際のレンダリングがズームされている間、論理表示領域が上がります。

たとえば、100％ズームしたアプリのスクリーンショットを次に示します。

100％ズーム 100％ズーム
（出典：hand-net.com）

上部のスライダーでズームを制御できます。ズームを90％または110％に変更すると、次のようになります。

90％ズーム 90％ズーム
（出典：hand-net.com）

と

110％ズーム 110％ズーム
（出典：hand-net.com）

ご覧のとおり、ブラウザのレンダリングは乱雑です。内部レンダリングがWebBrowserコントロール領域と一致しないだけでなく、画像のサイズ変更の品質が非常に低くなります。

これらはすべて、Awesomium1.6.6で適切に機能していました。

どうすれば希望の結果を得ることができますか？

サンプルアプリケーションはここからダウンロードできます。重要な部分は次のとおりです。

Xaml：

    <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することでした。NearestNeighborAwesomiumから得た回答は、これがいくつかの戦略を開発している既知の問題であると示していましたが、それ以来問題に気づいていませんでしたが、再発した可能性があります。

「ぼやけたテキストで問題を解決する」という質問をチェックして、問題が解決するかどうかを確認します。これは私の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

私はペリクレスによって与えられた私のawesomiumサポートフォーラムの質問で解決策を見つけました。

私の問題を解決するための2つのステップ：

  1. また、レイアウト変換をWebコントロールに適用します。

    <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 に答える