3

したがって、2列のグリッドを持つWPFウィンドウがあります。最初の列には、SVG 画像をレンダリングするキャンバスがあります。このキャンバスは画像と同じサイズになるようにサイズ変更されます (したがって、変換は行われません)。画像は画面よりもはるかに小さいと想定されるため、スクロール ビューアーは必要ありません。これを左キャンバスと呼びます。

2 番目の列には、Viewbox 内にある別のキャンバスがあり、同じ SVG もこのキャンバスにレンダリングされており、SVG 画像のサイズが Viewbox の固定サイズよりも大きいと想定されています。Viewbox はキャンバスのサイズを変更してキャンバスに収まるようにします - キャンバスに変換を適用するようには見えず、幅や高さを変更しませんが、他の魔法がここで行われます - しかしうまくいきます.

アイデアは、ユーザーがズーム領域を表す左のキャンバスに長方形を描くことができ、次に右のキャンバスがズームインして、その長方形がキャンバスを含むビューボックスに収まるようにすることです-フィットとは、トリミングやストレッチなしを意味します/ズーム領域のいずれかを押しつぶすため、縦向きのViewboxの横向きのズーム領域の場合、ズーム領域の側面がViewboxの側面と接し、上下にスペースが残ります。これは問題ありません。

どちらのキャンバスにも変換が適用されておらず、両方とも同じ幅と高さを持っているため、これは簡単だと思います (Viewbox の魔法によって右側のキャンバスが小さくなっていますが)。これは私が現時点でやっている方法です：

中心点を見つける:

centreX = Canvas.GetLeft(zoomAreaRect) + (zoomAreaRect.Width / 2);
centreY = Canvas.GetTop(zoomAreaRect) + (zoomAreaRect.Height / 2);

スケール量を見つけます。

double scale;

if(zoomAreaRect.Width > zoomAreaRect.Height)
{
    scale = RightCanvas.Width / zoomAreaRect.Width;
}
else
{
    scale = RightCanvas.Height / zoomAreaRect.Height;
}

次に、変換の中心として centerX と centerY を使用してスケール変換を使用し、変換で scaleX と scaleY の両方をスケーリングします。

スケール量を計算するときにビューボックスのサイズを何らかの形で考慮する必要があるため、これは明らかに機能しません。これを行う方法がわかりません。誰でも助けてもらえますか？

アップデート：

これは物事を複雑にするため、ビューボックスを廃棄しました..右のキャンバスも通常のサイズですが、幅と高さが固定された境界線の内側に含まれています。目的は、境界に収まるまでズーム領域を拡大することです。

右側の XAML は次のとおりです。

<Border Name="ContainingBorder" 
              Grid.Column="1"
              MaxWidth="295"
              MaxHeight="487"
              Height="487">
    <Border.Clip>
        <RectangleGeometry Rect="0.5, 0.5, 295, 487"/>
    </Border.Clip>

    <Canvas Name="RightCanvas"/>
</Border>

正しい量でズームインできましたが、正しい中心にズームインしていません。アスペクト比をスケール量として使用するだけで、機能しているように見えます。

double ratioX = ContainingBorder.AcctualWidth / zoomAreaRect.Width;
double ratioY = ContainingBorder.AcctualHeight / zoomAreaRect.Height;

double scale = ratioX < ratioY ? ratioX : ratioY;

中心の x と y を知る方法はありますか? 上記の centerX と centerY の計算は正しく機能していないようです。

4

2 に答える 2

0

ビジュアル ブラシで問題を解決できるかもしれません。

<Window x:Class="ZoomViewBoxTest.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="MainWindow" Height="300" Width="700">
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>       
    <Viewbox Width="700" Height="300">
        <Canvas x:Name="LeftCanvas" Width="600" Background="Red" Height="600">
            <!--drawing Rectangle simulates your zoom area-->
            <Rectangle x:Name="DrawingRectange" Width="100" Height="150" Fill="Green" Canvas.Left="200" Canvas.Top="300"></Rectangle>
            <Rectangle Width="200" Height="200" Fill="Gray" Canvas.Left="250" Canvas.Top="350"/>
        </Canvas>
    </Viewbox>
    <Viewbox Grid.Column="1">
        <Rectangle Width="{Binding ElementName=DrawingRectange,Path=Width}" Height="{Binding ElementName=DrawingRectange,Path=Height}">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=LeftCanvas}" Stretch="None" >
                    <VisualBrush.Viewbox>
                        <!-- X = DrawingRectangle.X / LeftCanvas.Width 
                             Y = DrawingRectangle.X / LeftCanvas.Height
                             Width = DrawingRectangle.Width / LeftCanvas.Width
                             Height = DrawingRectangle.Height / LeftCanvas.Height-->
                        <Rect X="0.333" Y="0.5" Width="0.1666" Height="0.25"></Rect>
                    </VisualBrush.Viewbox>
                </VisualBrush> 
                </Rectangle.Fill>
        </Rectangle>
    </Viewbox>
</Grid>

大まかに言うと、VisualBrush の Viewbox は DrawingRectangle からの実際の値にバインドする必要があります (コード ビハインドまたはコンバーターを介して)。

于 2013-06-18T06:54:15.770 に答える
0

あなたの質問を完全に理解したかどうかわかりません。xamlコードを貼り付けると役立つかもしれません。

キャンバスの「マージン」プロパティを操作できる可能性があります。

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <!--clip to bounds for hide parts of the canvas-->
    <Viewbox ClipToBounds="True">
        <!--set margin negatively to zoom out of the viewbox size-->
        <Canvas Margin="0,0,-100,-100" Width="200" Background="Red" Height="200">
            <Rectangle Width="100" Height="100" Fill="Gray"/>
        </Canvas>
    </Viewbox>
</Grid>
于 2013-06-17T11:46:03.570 に答える