7

Deep Zoom Composer で自分のプロジェクトを作成したいのですが、 ハードロックの記念品のようにズームインした画像ごとにテキストを追加する方法を知りたいです。

Silverlight 4.0 を使用して消費したい

お気づきのとおり、右側のペインの下に、画像に関する説明があります。

ありがとうございました。

この http://www.freeimagehosting.net/uploads/43b14a3d53.png

4

3 に答える 3

5

これは間違いなく実行可能です。私は似たようなことをしましたが、うまくいきました。次の例では、クリックされた画像に固有の情報が表示されます。マウスオーバー、クリック、またはズーム時に情報を表示するかどうかに応じて変更できます。それは完全にあなた次第です。

まず、キャンバスに MultiScaleImage を追加します...

<MultiScaleImage  x:Name="deepZoomObject" Source="/GeneratedImages/dzc_output.xml" />

...キャンバスの別の場所に、情報を表示するために使用する TextBlock を追加します。

<TextBlock X:Name="tbInfo" />

次に、各「タイル」の情報を保持するクラスを作成し、ダミーの情報を追加して、リストに一連のタイルを追加します。

    public class TileDetail {
       public int Index { get; set; } 
       public string TileName { get; set; }
    }
    //The Index is the zero based index of the images.  It depends on the index created by DeepZoomComposer.  This is the one piece of information that you absolutely need to know.  I believe the index is based on the order that the images are added to DeepZoomComposer but test to make sure.

   List<TileDetail> TileDetailsList = new List<TileDetail>();

   TitleDetail td1 = new TileDetail();
   td1.Index = 0;
   td1.TileName = "Tile #1";

   TileDetailsList.Add(td1);

   TitleDetail td21 = new TileDetail();
   td2.Index = 1;
   td2.TileName = "Tile #2";

   TileDetailsList.Add(td2);

   //Repeat the above for your remaining tiles always incrementing the Index.  If you're loading information from a DB then you'll need to make sure to have a way to connect the image to its index from DeepZoomComposer.

リストがタイル情報でいっぱいになったので、MouseLeftButtonDown イベント ハンドラーを接続して、画像がクリックされたことを検出し、最終的にクリックされた画像のインデックスを特定する必要があります。インデックスを使用すると、リストから適切なタイルの詳細を検索し、キャンバスに表示するだけで済みます。

コード ビハインドに、次を配置します。

   deepZoomObject.MouseLeftButtonDown += delegate(object sender, MouseButtonEventArgs e)
   {
      //Get the index of the image
      int index = GetIndexOfSubImage(e.GetPosition(deepZoomObject));
      //Find the image in the list of images
      TileDetail td = TileDetailsList.FirstOrDefault(t => t.Index == index);
      //Display image info
      tbInfo.Text = td.TileName;
   };

以下が「秘伝のタレ」。クリックされた画像のインデックスを見つけます。

   private int GetIndexOfSubImage(Point point)
   {
      // Test each subimage to find the image where the mouse is within
      for (int i = deepZoomObject.SubImages.Count - 1; i >= 0; i--)
      {
        MultiScaleSubImage image = deepZoomObject.SubImages[i];
        double width = deepZoomObject.ActualWidth / (deepZoomObject.ViewportWidth * image.ViewportWidth);
        double height = deepZoomObject.ActualWidth / (deepZoomObject.ViewportWidth * image.ViewportWidth * image.AspectRatio);

        Point pos = deepZoomObject.LogicalToElementPoint(new Point(image.ViewportOrigin.X / image.ViewportWidth, -image.ViewportOrigin.Y / image.ViewportWidth));
        Rect rect = new Rect(pos.X, pos.Y, width, height);

        if (rect.Contains(point))
        {
           // Return the image index
           return i;
        }
      }    
      return -1; //if there is no corresponding subimage
    }

以上です。画像インデックスに対応する画像がリストにある限り、MultiScaleImage オブジェクト内の画像をクリックすると、画像情報が表示されます。

于 2010-08-10T20:49:04.990 に答える
1

単純な DeepZoom ではないようです。あなたが今言及したプロジェクトで彼らが使用したのは、silverlight の MS Live Lab Pivot Control です。http://www.getpivot.com/。このサイトには、ピボットから始めるための優れたチュートリアルがあり、コレクションを作成するのは非常に簡単です。

よろしく。

于 2010-08-09T07:02:21.883 に答える
0

VertigoHardrock Cafe Memrobilia の例を作成した会社である は、そのソース コードを CodePlex にリリースしました。ここで確認してください: http://bigpicture.codeplex.com/

  • 物事を単純化しすぎるとmouse movements、MultiScaleImage の上でリッスンする必要があります。

  • マウスを動かすたびに、MultiScaleImageサブイメージ コレクションを繰り返し処理し、マウス ポインターの下にあるサブイメージを確認する必要があります。

  • 異なる画像を識別するには、DeepZoomコレクション内の各画像に が必要unique identifierです。たとえば、DeepZoomComposer では、tag各画像に値を追加できます。そのタグに基づいて、たとえば他の XML ファイルから適切な情報テキストをユーザーに表示することができます。

于 2010-08-10T06:06:05.510 に答える