locked
Deepzoomの組み込み方法について RRS feed

  • 質問

  • プログラム初心者のtata_koと申します。初めて質問させていただきます。よろしくお願いします。

    (開発環境:Silverlight4、VS2010、Blend4)

     

    DeepZoomをVSやBlendなので組み込むにはどうしたらいいのでしょうか…(また、何のファイルが必要なのでしょうか、)

    DeepZoom composerからsilverlight用にエキスポートしたデータの、dzc_output_filesフォルダ一式とdzc_output_.xmlを、プロジェクト内に新規作成した[Source]フォルダの中に入れて参照する形をとりました。

    XAMLでは下記のように記述しました。

     

    <UserControl x:Class="SL_DeepZoom.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="1200" Height="800">

        <Grid x:Name="LayoutRoot" Background="White">

            <MultiScaleImage x:Name="msi" Source="/Source/dzc_output.xml" Margin="12,12,487,276" />
      
        </Grid>
    </UserControl>

     

    Blendでの処理ははMultiScaleImageを配置しただけです。

    VS2010の開発ソフト上でのビュー(?)ウィンドウでは画像が表示されるのですが、いざデバッグをかけてブラウザで再生してみると、何も表示されないままで困っています。

    他サンプルソースなどを見ると、MultiScaleImage内に[DeepZoomInitializer]というコントロールが配置されているものがあり、このコントロールが必要なのかな?と思いましたがアセット内を検索しても出てきません…。

    最初、ライブラリに(http://msdn.microsoft.com/ja-jp/library/dd901589(v=VS.95).aspx)書いてある通りに Bin\Debug 内にdzc_output_filesフォルダとdzc_output_.xmlを配置してたのですが、このやり方だとVS上のビューウィンドウでも画僧が表示されず、デバッグをかけてももちろん表示されずだったので、プロジェクト直下(APP.xamlとMainPage.xamlが置いてある場所)にフォルダを作って配置してみました。…が、うまくいきませんでした…

    どなたかご教授いただけませんでしょうか。質問が言葉不足や不備がありましたら申し訳ありません、ご指摘いただければと思います。

     

    どうかよろしくお願いします。

    2011年6月6日 11:03

回答

  • こんにちは。

    これ、MSDN ライブラリページの翻訳が良くないですね。

    http://msdn.microsoft.com/ja-jp/library/dd901589(v=VS.95).aspx

    >Deep Zoom イメージを読み込むには

    > 2.Windows エクスプローラーで、Silverlight アプリケーションの Bin\Debug フォルダーを開きます。

    の部分ですが、
    原文だと

    >If you selected the Host the Silverlight application in a new Web site option, while creating your Silverlight Application, open the <ApplicationName>.Web\ClientBin folder for the Silverlight application in Windows Explorer. If you did not select the Host the Silverlight application in a new Web site option, while creating your Silverlight Application, open the \Bin\Debug folder for the Silverlight application in Windows Explorer.

    となっています。
    つまり、Webアプリケーションでホストしている場合はWebプロジェクトのClientBinフォルダに「Source」以下を配置する必要があります。

    あと、
    ><MultiScaleImage x:Name="msi" Source="/Source/dzc_output.xml" Margin="12,12,487,276" />

    の、"/Source~"の最初の「/」は要りませんね、

    以上、よろしくお願い致します。

    • 回答としてマーク tata_ko 2011年6月7日 8:45
    2011年6月6日 15:19
  • >"/Source/dzc_output.xml" でも、 "Source/dzc_output.xml" でも一応ビルドが通るので一応/を取った形で記述していますが、何か違いはあるのでしょうか?

    MSDNライブラリの記述に準じただけです。
    しかし、"/"無しだと警告が出るようなので、この場合は有りで良いかもしれません。

    >と、改変して組み込んだんですが、エラーで動かない状態です。

    エラーが出た場合は、エラーの内容を書くようにしましょう。
    「どんなエラー?」って聞かねばなりませんので。

    ソースを見る限り、名前を変えただけのようですが、サンプルのままだとエラーは出ませんか?
    • 回答としてマーク tata_ko 2011年6月8日 9:10
    2011年6月7日 9:24

すべての返信

  • こんにちは。

    これ、MSDN ライブラリページの翻訳が良くないですね。

    http://msdn.microsoft.com/ja-jp/library/dd901589(v=VS.95).aspx

    >Deep Zoom イメージを読み込むには

    > 2.Windows エクスプローラーで、Silverlight アプリケーションの Bin\Debug フォルダーを開きます。

    の部分ですが、
    原文だと

    >If you selected the Host the Silverlight application in a new Web site option, while creating your Silverlight Application, open the <ApplicationName>.Web\ClientBin folder for the Silverlight application in Windows Explorer. If you did not select the Host the Silverlight application in a new Web site option, while creating your Silverlight Application, open the \Bin\Debug folder for the Silverlight application in Windows Explorer.

    となっています。
    つまり、Webアプリケーションでホストしている場合はWebプロジェクトのClientBinフォルダに「Source」以下を配置する必要があります。

    あと、
    ><MultiScaleImage x:Name="msi" Source="/Source/dzc_output.xml" Margin="12,12,487,276" />

    の、"/Source~"の最初の「/」は要りませんね、

    以上、よろしくお願い致します。

    • 回答としてマーク tata_ko 2011年6月7日 8:45
    2011年6月6日 15:19
  • Tetsuaki Uchida様

    回答ありがとうございました…!!

    Webプロジェクト内のClientBinフォルダに置いたところ、VBのウィンドウ上(XAML編集画面のビュー)では画像表示されないのですが、デバッグにて無事ブラウザ再生ができるようになりました。ありがとうございます。

    ただ

    >、"/Source~"の最初の「/」は要りませんね、

    と、ありますが、最初の/を取ってしまうと、VB上のXAML編集ウィンドウにエラー文が表示されてしまいます。

    "/Source/dzc_output.xml" でも、 "Source/dzc_output.xml" でも一応ビルドが通るので一応/を取った形で記述していますが、何か違いはあるのでしょうか?

     

    それから度々の質問で申し訳ないのですが…

    DeepZoomの拡大・縮小の実装についても躓いておりまして、

    http://msdn.microsoft.com/ja-jp/library/dd901589(v=VS.95).aspx

    4.次のコードを追加して、Deep Zoom イメージに対話機能を追加します。

    にあるとおり

    1. Private Sub DeepZoomObject_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
          ' The ZoomAboutLogicalPoint method allows you to zoom and pan
          ' in the same step. The first parameter is the zoom (3x) and the
          ' third and fourth parameters are the respective x and y coordinates
          ' of the logical point to zoom around.
          Me.deepZoomObject.ZoomAboutLogicalPoint(3, 0.5, 0.5)
      End Sub

      Private Sub DeepZoomObject_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
          Dim zoom As Double = 1
          zoom = (zoom / 3)
          ' This time the zoom is reversed (1/3) although the pan
          ' remains the same - zoom back out from the middle.
          Me.deepZoomObject.ZoomAboutLogicalPoint(zoom, 0.5, 0.5)
      End Sub

    上記のコードを

    1. Private Sub DeepZoomObject_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
          ' The ZoomAboutLogicalPoint method allows you to zoom and pan
          ' in the same step. The first parameter is the zoom (3x) and the
          ' third and fourth parameters are the respective x and y coordinates
          ' of the logical point to zoom around.
          Me.msi.ZoomAboutLogicalPoint(3, 0.5, 0.5)
      End Sub

      Private Sub DeepZoomObject_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
          Dim zoom As Double = 1
          zoom = (zoom / 3)
          ' This time the zoom is reversed (1/3) although the pan
          ' remains the same - zoom back out from the middle.
          Me.msi.ZoomAboutLogicalPoint(zoom, 0.5, 0.5)
      End Sub

    と、改変して組み込んだんですが、エラーで動かない状態です。

    ゆくゆくはスクロールなどで拡大縮小ができるよう実装したいと思っているのですが、実装の定義というものがいまいちわかりません…

    もしよろしければ、アドバイスなどいただけませんでしょうか、

    どうかよろしくお願いいたします。

    2011年6月7日 8:42
  • >"/Source/dzc_output.xml" でも、 "Source/dzc_output.xml" でも一応ビルドが通るので一応/を取った形で記述していますが、何か違いはあるのでしょうか?

    MSDNライブラリの記述に準じただけです。
    しかし、"/"無しだと警告が出るようなので、この場合は有りで良いかもしれません。

    >と、改変して組み込んだんですが、エラーで動かない状態です。

    エラーが出た場合は、エラーの内容を書くようにしましょう。
    「どんなエラー?」って聞かねばなりませんので。

    ソースを見る限り、名前を変えただけのようですが、サンプルのままだとエラーは出ませんか?
    • 回答としてマーク tata_ko 2011年6月8日 9:10
    2011年6月7日 9:24
  • Tetsuaki Uchida様

    ありがとうございます。"/"はつけておくことにしました。

    そしてエラーの質問の件ですが、言葉不足で申し訳ありませんでした、

    ソースはたしかに名前を変えただけで…拡大、縮小機能の実装にあたり、コントロールをどう設定したらいいのか、既述の仕方ががわかりません。


    Partial Public Class Page
        Inherits UserControl

    Private

    End Class

    Sub DeepZoomObject_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
        ' The ZoomAboutLogicalPoint method allows you to zoom and pan
        ' in the same step. The first parameter is the zoom (3x) and the
        ' third and fourth parameters are the respective x and y coordinates
        ' of the logical point to zoom around.
        Me.msi.ZoomAboutLogicalPoint(3, 0.5, 0.5)
    End Sub

    Private Sub DeepZoomObject_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
        Dim zoom As Double = 1
        zoom = (zoom / 3)
        ' This time the zoom is reversed (1/3) although the pan
        ' remains the same - zoom back out from the middle.
        Me.msi.ZoomAboutLogicalPoint(zoom, 0.5, 0.5)
    End Sub

    DeepZoomObject_MouseEnter内でもDeepZoomObject_MouseLeave内でも、 Me.msi”の部分に「'msi'はSL_DeepZoom.Pageのメンバではありません」と、表示されてます。

    なにかの宣言が足りないのでしょうか…

     Dim msi As Object とつけ加えて見たのですが

    エラー 1 Event handler 'DeepZoomObject_MouseEnter' not found on class 'SL_DeepZoom.MainPage' 

    エラー 2 Event handler 'DeepZoomObject_MouseLeave' not found on class 'SL_DeepZoom.MainPage' 

    と表示されてうまくいきませんでした。

     

    初歩的と言いますか、稚拙ななエラーだと思っています…

    申し訳ありませんが、よろしくお願いします。

    2011年6月8日 9:10
  • えっと、書いてあるソースを見る限りだと、
    「End Class」の後に書いちゃダメなんじゃないかと思います。。。

    ご自覚をされていると思いますが、かなり初歩的です。

    XAML側で、

    <MultiScaleImage x:Name="deepZoomObject" Source="source/dzc_output.xml"
     MouseEnter="DeepZoomObject_MouseEnter"
     MouseLeave="DeepZoomObject_MouseLeave"/>

    と書いたあと、"DeepZoomObject_MouseEnter"の部分を右クリックして「イベントハンドラへ移動」を選択すると、
    自動的にイベントハンドラがVBコード側に生成されるはずですので、
    そこに書きましょう。

    というか、この先も苦労されると思いますので、まずは
    ■チュートリアル : 初めての Silverlight アプリケーションの作成
    http://msdn.microsoft.com/ja-jp/library/cc838218(v=vs.95).aspx
    等で基本的なことは学んでおいた方が良いと思いますよ。

    以上、がんばってください。
    2011年6月8日 9:43
  • Tetsuaki Uchida様

    いつも丁寧にありがとうございます。

    さすがにソースは下記の間違いでした…

    Partial Public Class Page
        Inherits UserControl

        Dim msi As Object

    Sub DeepZoomObject_MouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
        ' The ZoomAboutLogicalPoint method allows you to zoom and pan
        ' in the same step. The first parameter is the zoom (3x) and the
        ' third and fourth parameters are the respective x and y coordinates
        ' of the logical point to zoom around.
        Me.msi.ZoomAboutLogicalPoint(3, 0.5, 0.5)
    End Sub

    Private Sub DeepZoomObject_MouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
        Dim zoom As Double = 1
        zoom = (zoom / 3)
        ' This time the zoom is reversed (1/3) although the pan
        ' remains the same - zoom back out from the middle.
        Me.msi.ZoomAboutLogicalPoint(zoom, 0.5, 0.5)
    End Sub

    End Class

    と、言った形でした。

     

    本当に、初歩的な部分ができてなくてお恥ずかしい限りです…。

    にも関わらず、丁寧に語説明くださりありがとうございます。

    右クリックでのイベントハンドラの生成方法は知らなかったので凄く勉強になりました。

    また、もう一度、Uchida様から教えて頂いたチュートリアルを見直して、勉強しながら考えてみようと思います。

    2011年6月9日 5:49