2

この手順を見た後、次の Silverlight アプリを実装しました。コードは次のとおりです。

public partial class MainPage : UserControl
{
    private Point lastMousePos = new Point();
    private double zoom = 1;
    private Point lastMouseLogicaPos = new Point();
    private Point lastMouseViewPort = new Point();
    private bool duringDrag = false;
    private bool duringOpen = false;
    private List<Dot> dots = new List<Dot>();
    private bool addDot = false;

    public MainPage()
    {
        InitializeComponent();

        this.MouseMove += delegate(object sender, MouseEventArgs e)
        { this.lastMousePos = e.GetPosition(this.ZoomImage); };

        ZoomImage.MouseWheel += new MouseWheelEventHandler(ZoomImage_MouseWheel);
        this.ZoomImage.UseSprings = false;
    }

    private void ZoomImage_MouseWheel(object sender, MouseWheelEventArgs e)
    {
        double newzoom = zoom;

        if (e.Delta > 0)
        { newzoom /= 1.3; }
        else
        { newzoom *= 1.3; }

        Point logicalPoint = this.ZoomImage.ElementToLogicalPoint(this.lastMousePos);
        this.ZoomImage.ZoomAboutLogicalPoint(zoom / newzoom, logicalPoint.X, logicalPoint.Y);

        zoom = newzoom;
        e.Handled = true;
    }

    private void ZoomImage_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        lastMouseLogicaPos = e.GetPosition(LayoutRoot);
        lastMouseViewPort = this.ZoomImage.ViewportOrigin;

        foreach (var dot in this.dots)
        { dot.LastMouseLogicPos = e.GetPosition(LayoutRoot); }

        if (!this.addDot)
        { duringDrag = true; }
    }

    private void ZoomImage_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
        if (this.addDot)
        {
            Dot dot = new Dot(this.lastMouseLogicaPos.X, this.lastMouseLogicaPos.Y) 
                                { Name = "Dot" + (this.dots.Count + 1).ToString() };

            this.dots.Add(dot);
            this.DotCanvas.Children.Add(dot);
        }
        else
        { duringDrag = false; }
    }

    private void ZoomImage_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
    {
        if (duringDrag)
        {
            double zoomFactor = 1 / this.ZoomImage.ViewportWidth;
            Point newPoint = lastMouseViewPort;
            Point thisMouseLogicalPos = e.GetPosition(LayoutRoot);
            newPoint.X += (lastMouseLogicaPos.X - thisMouseLogicalPos.X) / (this.ZoomImage.ActualWidth * zoomFactor);
            newPoint.Y += (lastMouseLogicaPos.Y - thisMouseLogicalPos.Y) / (this.ZoomImage.ActualWidth * zoomFactor);
            this.ZoomImage.ViewportOrigin = newPoint;

            foreach (var dot in this.dots)
            {
                Point dotLogicPoint = this.ZoomImage.ElementToLogicalPoint(new Point(dot.X, dot.Y));
                thisMouseLogicalPos = e.GetPosition(LayoutRoot);

                dotLogicPoint.X -= (dot.LastMouseLogicPos.X - thisMouseLogicalPos.X) / ((1 / 1.8) * this.ZoomImage.ViewportWidth);
                dotLogicPoint.Y -= (dot.LastMouseLogicPos.Y - thisMouseLogicalPos.Y) / (this.ZoomImage.ActualWidth * this.ZoomImage.ViewportWidth);

                dot.X = (this.ZoomImage.LogicalToElementPoint(locLogicPoint).X);
                dot.Y = (this.ZoomImage.LogicalToElementPoint(locLogicPoint).Y);
            }
        }
    }

    private void ZoomImage_ImageOpenSucceeded(object sender, System.Windows.RoutedEventArgs e)
    { duringOpen = true; }

    private void ZoomImage_MotionFinished(object sender, System.Windows.RoutedEventArgs e)
    {
        if (duringOpen)
        { duringOpen = false; }
    }

    private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
    {
        this.addDot = !this.addDot;

        if (this.addDot)
        { this.btnAddDot.Content = "Click on Image"; }
        else
        { this.btnAddDot.Content = "Add Dot"; }
    }
}

これにより、MultiScaleImage をズームおよびパンし、カスタム Dot オブジェクトを DotCanvas キャンバスに追加できます。XAML は次のとおりです。

<UserControl x:Class="DeepZoomSample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" Width="800" Height="600">

<Grid x:Name="LayoutRoot" Background="Black" Margin="0,0,-98,-86">

    <MultiScaleImage x:Name="ZoomImage" Source="GeneratedImages/dzc_output.xml" 
                     Margin="8,8,0,0" MouseLeftButtonDown="ZoomImage_MouseLeftButtonDown" 
                     MouseLeftButtonUp="ZoomImage_MouseLeftButtonUp" MouseMove="ZoomImage_MouseMove" ImageOpenSucceeded="ZoomImage_ImageOpenSucceeded" 
                     MotionFinished="ZoomImage_MotionFinished" Height="584" VerticalAlignment="Top" HorizontalAlignment="Left" Width="784"/>

    <Canvas x:Name="DotCanvas" HorizontalAlignment="Left" Height="584" Margin="8" VerticalAlignment="Top" Width="784" MouseLeftButtonUp="LocationCanvas_MouseLeftButtonUp"/>
    <Button x:Name="btnAddDot" Content="Add Location" HorizontalAlignment="Right" Height="44" Margin="0,0,24,24" VerticalAlignment="Bottom" Width="112" Click="Button_Click"/>

</Grid>

さて、問題は、Dots が MultiScateImage (ZoomImage オブジェクト) 上のキャンバスに配置されているため、パンおよびズームすると、Dots がキャンバス上のそれぞれの場所に留まるということです。このコードには、画像のパンとズーム中に Dots を所定の位置に保持しようとして失敗した試みがいくつかあります。

これがアプリの画像です。周りの青い点は、私のカスタム Dot オブジェクトです。

代替テキスト

主な問題は、ユーザーがズームやパンを行っている間、ドットを画像上の相対的な位置に保つにはどうすればよいかということです。

4

2 に答える 2

1

トリッキーですが、間違いなく実行できます。最近、同様のアプリケーションで同じことを行いました。うそをつくつもりはありませんが、機能するまでに数時間かかったので、頭を悩ませる準備をしてください。

基本的に次の 2 つのことが関係しています。

1.ドットを正しい場所に配置する

ここでは数学があなたの味方です。multiScaleImage ベースの座標をキャンバス (つまりビューポート) 座標に転置するメソッドをいくつか作成する必要があります。

まず、ViewPortOrigin と ViewPortWidth を深く理解する必要があります (これは非常に良い出発点です)。それらにはいくつかの注意事項があります（たとえば、実際の値を取得するには、viewPortHeightに画像の比率を掛ける必要があることを思い出したようです-または同様のもの）。

解決策を示すには、viewPortOrigin を減算し、viewPortWidth で乗算/除算する必要があります。あなたが辛抱強いなら (そしてラッキー ;-) ) 今夜、私は自分のプロジェクトを見ていくつかのコードを投稿しますが、これらのパラメーターを本当に理解しているのは良いことです。

何が起こっているのかを理解するのに非常に役立ちました。multiscaleImage をナビゲートしている間は常に。

編集：あなたは幸運です、私はこれを思い出しました - ここに役立つコードがあります. 繰り返しますが、そこまでは到達しないため、理解せずに単にコピー アンド ペーストしないことをお勧めします。

private Point CanvasToDeepZoom(MultiScaleImage msi, Point absoluteInsideCanvas)
{
    // the only non-logical (to me) step: viewportOrigin.Y must be multiplied by the aspectRatio
    var ViewportHeight = msi.ViewportWidth * msi.AspectRatio * msi.ActualHeight / msi.ActualWidth;

    var relativeToCanvas = new Point(
        absoluteInsideCanvas.X / msi.ActualWidth,
        absoluteInsideCanvas.Y / msi.ActualHeight);

    return new Point(
        msi.ViewportOrigin.X + msi.ViewportWidth * relativeToCanvas.X,
        msi.ViewportOrigin.Y * msi.AspectRatio + ViewportHeight * relativeToCanvas.Y);
}


private Point DeepZoomToCanvas(MultiScaleImage msi, Point relativeInsideDeepZoom)
{
    var ViewportHeight = msi.ViewportWidth * msi.AspectRatio * msi.ActualHeight / msi.ActualWidth;

    var relativeToCanvas = new Point(
        (relativeInsideDeepZoom.X - msi.ViewportOrigin.X) / msi.ViewportWidth,
        (relativeInsideDeepZoom.Y - msi.ViewportOrigin.Y * msi.AspectRatio) / ViewportHeight);

    return new Point(
        relativeToCanvas.X * msi.ActualWidth,
        relativeToCanvas.Y * msi.ActualHeight);
 }

2. ズームおよびパン アニメーション中にドットの同期を維持します。

基本的な考え方は、ズーム/パンの全期間にわたってポイントの位置を更新し続ける 0 秒間のアニメーションをループすることです (私の記憶が正しければ 1.5 秒)。このテクニックはここでとてもよく説明されています。そのブログでは、特定の問題に役立つその他のリソースも見つけることができます。

于 2010-10-20T08:31:39.453 に答える
0

Deep Zoom Composer が表示されている場合は、ハイパーリンク領域を設定することもでき、ソースコード プロジェクトを生成するためのテンプレートもあります。したがって、ドットは画像自体である可能性があり（画像コレクションを使用して、サブ画像[よく覚えていればSubMultiScaleImageがクラスです]をプログラムでオン/オフすることもできます）、それらにハイパーリンクを設定し、MultiScaleImageにコレクションを処理させ、いつ通知するかを知らせますハイパーリンクがクリックされた (生成されたコードを参照)

于 2012-04-24T14:25:03.260 に答える