MZ Platform開発チュートリアルL12（画像ファイルを表示する）

このチュートリアルは『開発チュートリアル（実践編）』を基に説明しています。
サンプルアプリケーションはAP_DATA\Tutorial\Lesson12(イメージ表示).mzaxです

  1. 画像の表示

    2. 利用できる画像ファイルの種類

    1. MZ Platformでは画像ファイル を 扱うことが 可能です。
      2. 取り扱い可能な主な ファイル形式 は以下のとおりです。
      • GIF
      • JPEG
      • PNG
      • BMP

    画像を表示するコンポーネント

    1. ［イメージビューワー］
      2. この章では画像を表示する画面構成部品として［イメージビューワー］を使用します。
    2. ［画像ファイル入力］
      3. 画像ファイルの入力に［画像ファイル入力］コンポーネントを使用しています。
      画像ファイルを出力する［画像ファイル 出力］もあります。

    参考：画像表示に関わるコンポーネント

    1. ［ラベル］や［ボタン］コンポーネント等のアイコンとして画像を選択し、表示することができます。
    2. ［画面構成部品］＞［グラフィックス］＞［図面編集］でも画像を表示したりする機能があります。
      3. サ ンプルファイル「図面編集.mzax」を参考にしてください。
    3. ［画面構成部品］＞［グラフィックス］＞［３Dビューワー］
      ［３Dビューワー］を使ったMZCheckerをメニューから起動する ことができます。
      MZCheckerは３DCADデータのチェック、表示ツールです。
    完成画面例

  2. ファイルの選択

    3. ファイル選択ダイアログの表示

    表示する画像ファイルをダイアログで選択する画面を、まず作成します。

    コンポーネント追加
    1. 追加するコンポーネントは以下の通りです。
      2. コンポーネント名 必要数 カテゴリー テキスト
      フレーム 1 画面構成部品＞ウィンドウ
      ボタン １ 画面構成部品＞ボタン 画像ファイル入力
      ファイル選択 １ 画面構成部品＞ダイアログ


    2. アプリケーションを開始したらフレームを表示する、フレームを閉じたらアプリケーションを終了する基本の接続処理を作成しておき ます。
    画面編集
    1. 画面編集画面に入り、［フレーム］に［ボタン］を配置します。
    2. 「実行（設定可）」ボタンで実行し、［ボタン］のテキストを「画像ファイル入力」に変更します。
    接続処理設定
    1. 【接続1】［ボタン］を押したら［ファイル選択］を表示する
      2. メソッドに「単数Open用ファイル選択ダイアログを表示する（Component)」を選択します。
      一つのファイルを開くためのダイアログを表示するという意味です。
      引数0には表示基準位置を指定します。
      ここでは［フレーム］コンポーネントを指定します。
    確認ここまで設定し、実行してボタンを押すとダイアログが表示されま す。

    ［編集画面図1］ 　基本の接続の起動メソッド情報設定画面図は省略

    完成画面例
    ボタンを押すとダイアログが表示される

    画像ファイルの入力

    ダイアログで選択したファイルをアプリケーション内に入力します。

    コンポーネント追加
    1. 追加するコンポーネントは以下の通りです。
      2. コンポーネント名 必要数 カテゴリー
      画像ファイル入力 1 入出力＞ファイル

    接続処理設定

    1. 画像ファイルの入力

      2. ファイルを選択したら画像ファイルを入力する処理を作成します。
      1. 【接続2-1】［ファイル選択］のデータ選択イベントに［画像ファイル入力］を接続します。
        2. メソッドは「ファイル 名を指定して画像を読み込む（String)」を指定します。
        引数の取得方法には「イベント内包」を選び「選択データ」をメソッ ド／値欄に指定すると選択したファイル名が使用されます。
      2. イベント番号「１」を設定します。
        3. ファイル選択画面で［開く］ボタンを押したときだけでなく、「取消」を押したときもデータ選択イベントが発生します。ファイル名が選 択されていない状態で【接続2】の メソッドが実行されるとエラーが発生するため、条件分けのためイベント番号を設定します。
    確認ここまで設定して実行すると画像ファイルが読み込まれますが、ま だ表示はされません。

    ［編集画面図2］ 　

    イベント番号の設定画面例

  3. 新しいフレームの利用

    4. 新規にフレームの追加

    ファイル選択画面で選んだ画像ファイルを新しい［フレーム］に表示します。
    これまでのチュートリアルでは１つのフレームを利用していましたが、アプリケーション内で複数のフレームを使用することが可能です。

    ［フレーム］上に［イメージビューワー］を配置し、そこに画像を設定して表示します。

    コンポーネント追加
    1. 追加するコンポーネントは以下の通りです。
      2. コンポーネント名 必要数 カテゴリー
      フレーム 1 画面構成部品＞ウィンドウ
      イメージビューワー １ 画面構成部品＞グラフィックス

    画面編集
    1. ビルダー画面下部のツールボタン「画面編集」を押して、画面編集画面を表示します。
    2. 左側のツリー領域で、2つ目の［フレーム］を選択します。
    3. 新しい［フレーム］の領域に［イメージビューワー］を配置します。
    画面編集画面例

    画像ファイルの表示

    接続設定
    1. 【接続2-2】ファイル選択のダイアログで「開く」ボタンが押されたとき、［フレーム］を表示します。
      2. イベント番号１ を設定します。
    2. 【接続3】［画像ファイル入力］のデータ生成イベントに［イベントビューワー］を接続先とし、「イメージデータを 設定」します。
      引数の取得方法はイベント内包でイベント内包データを選択します。

    画像表示例
    ［編集画面図3］ 　【接続2-1】の起動メソッド情報設定画面図は省略

    終了処理

    終了時に画面構成部品（［イメージビューワー］）上のデータをクリアし、［フレーム］を閉じる必要があります。
    画面構成部品のデータを設定したまま保存すると、データ量が大きくなるので終了時にクリアします。

    接続設定

    一つ目の［フレーム］を閉じたときに

    1. 【接続0-2-2】［イメージビューワー］のイメージをクリアします。
    2. 【接続0-2-3】［フレーム］を閉じます。

    ［編集画面図4］ 　「ア プリケーションを終了する（）」の起動メソッド情 報設定画面図は省略

  4. イメージビューワーの調整

    5. 画面配置方法の変更

    ウィンドウのサイズ変更に伴って、イメージビューワーのサイズも変更するようにします（画像のサイズは変わりま せん）。
    配置方法を［領域配置］＞［Center］にすると常に中央に表示され、フレームの大きさに合わせて配置されているコンポーネントの大き さも変わります。

    画面編集
    1. 「画面編集」ボタンを押し、画面編集画面に入ります。
    2. 2番目に追加した［フレーム］を左側ツリー領域で選択し、［イメージビューワー］が配置されている領域 を表示します。
    3. 配置方法を「横方向整列」から「領域配置」に変更します。
      4. 既に配置されていた部品は「Center」の配置になります。

    画像のドラッグ移動を可能にする

    1. ［イメージビューワ―］コンポーネントをダブルクリックして、「属性情報設定」画面を表示します。
    2. 「DragEnabled」の項を「true」に変更します。
    確認
    1. 大きめの画像を表示して確認します。
      2. 例：AP_DATA\Tutorialフォルダ内の「mz_logo_long.gif」を開いて表示します。
      ［フレーム］をドラッグして広げると［イメージビューワー］の領域も広がることを確認します。
      また、画像をドラッグして［イメージビューワー］内で移動できることを確認します。

    ※表示される画像の倍率を変えるには次の章の複合コンポーネントを使っ てみよ う(L12))を参考にしてください。

    画像表示例
    画像をマウスで選択しドラッグできる