Skip to main content

位置とサイズを最適に調整する

コンテナ要素での用途に応じて、ビジュアライゼーション内のコンテンツの位置とサイズを設計できます (フレーム また タブ)。これを行うには、自動的に生成された Container 変数は、コンテナーのサイズを下位または参照先の視覚化に渡すために使用されます。その結果、ビジュアライゼーションは、オフラインと実行時の両方で、上位の要素とオブジェクトのサイズにアクセスできます。これにより、使用可能な領域が計算され、変更ごとに最適に塗りつぶされるように、ビジュアライゼーションを構成できます。これは、その中に配置された要素にも適用されます。

これらの変数は、たとえば、ライブラリ ビジュアライゼーションが呼び出される上位のビジュアライゼーションに応じて位置とサイズが異なるライブラリのビジュアライゼーションを開発する場合に役立ちます。

生成された変数:

  • Container.Width

    コンテナ要素の現在の幅。これは、要素自体が埋めることができる最大幅です。

  • Container.Height

    コンテナ要素の現在の高さ。これは、要素自体が満たすことができる最大の高さです。

  • Visu.Width

    最適に配置する必要がある要素が配置されているビジュアライゼーションの現在の幅

  • Visu.Height

    最適に配置する必要がある要素が配置されているビジュアライゼーションの現在の高さ

  • VisuElems.CurrentClient.Width

    ビジュアライゼーション要素で使用するクライアントの現在の幅 (クライアントサイズ)

  • VisuElems.CurrentClient.Height

    ビジュアライゼーション要素で使用するクライアントの現在の高さ (クライアントサイズ)

詳細については、以下を参照してください。 クライアントサイズへのアクセス

注記

VisuContainer 変数は、 視覚化とコンテナー サイズのプロパティを使用する オプションが選択されています。新しいプロジェクトの場合、このオプションはデフォルトで選択されています。

詳細については、以下を参照してください。 プロパティ

最適な適応位置の設定

次のセクションでは、最適な位置は 絶対移動相対移動 のプロパティ Container.Width - Visu.Width.生成された変数が挿入される場所に応じて、適応された要素の動作が異なることに注意してください。

  1. 通常どおりビジュアライゼーションを作成します。通常、これはテンプレートとして使用されるため、上位のビジュアライゼーションで何度でも再利用できます。

    視覚化: Template

  2. 変数の自動生成が有効になっていることを確認してください。

    1. ナビゲーターで、ビジュアライゼーションのコンテキスト メニューを開き、 プロパティ 指図。

      ダイアログが開きます。

    2. クリック 視覚化 タブをクリックして、 視覚化とコンテナー サイズのプロパティを使用する 必要に応じてオプション。

  3. 要素をビジュアライゼーションに追加し、ビジュアライゼーション エリア内に配置します。

    注: を持つ要素 絶対移動 また 相対移動 プロパティは、自動生成された変数を使用してそこで構成できます。次に、要素は動的に配置されます。

    重要: 再利用可能なビジュアライゼーションに別のコンテナー要素を追加する場合は、そのスケーリング タイプを 修理済み.

    初期サイズは以下で設定されます 位置 の中に プロパティ 意見。

    要素を含むビジュアライゼーションがエディターに表示されます。

    _visu_img_example_optimal_size_template.png
  4. で最適化された動作をする必要がある要素を構成します 絶対移動 また 相対移動 生成された変数を持つプロパティ。構成の違いに注意してください。それぞれの要素の動作が異なります。

    • プロパティを構成する 絶対移動移動左上:

      バツContainer.Width - Visu.Width 要素全体を水平方向に移動するため。

      Container.Height - Visu.Height 要素全体を垂直方向に移動するため。

    • プロパティを構成する 相対移動右下の動き:

      バツContainer.Width - Visu.Width 要素の右下隅を水平に移動します。これにより、要素の形状が調整され、それに応じて塗りつぶされます。

      YContainer.Height - Visu.Height 要素の右下隅を垂直に移動します。これにより、要素の形状が調整され、それに応じて塗りつぶされます。

    での構成 プロパティ

    フレーム

    _visu_img_example_optimal_size_frame_properties.png

    矩形

    _visu_img_example_optimal_size_rectangle_properties.png

    ポリライン

    _visu_img_example_optimal_size_polyline_properties.png
  5. アプリケーションに別のビジュアライゼーションを追加して、上位のビジュアライゼーションにします。コンテナー要素を使用します ( フレーム) アプリケーション、プロジェクト、またはライブラリから他のビジュアライゼーションを参照します。

    1. コンテナー要素をビジュアライゼーションにドラッグし、 Template 利用可能なビジュアライゼーションからのテンプレート ビジュアライゼーション。

    2. 重要: フレームのプロパティで、スケーリング タイプを 修理済み.

    3. コンテナ要素のサイズを目的のサイズにスライドします。

      変数の動きのプロパティで構成されている、参照されているビジュアライゼーションの要素は、自動的にコンテナー サイズに従います (オフライン動作)。

  6. Visualization Manager の下に WebVisu を追加し、次のように構成します。

    1. Visualization Manager を選択し、 オブジェクトを追加 → WebVisu.

    2. エディターで、 スケーリング オプション として 等方性.

4. 例: オフラインでの動作

視覚化エディターでコンテナー要素をより広くドラッグすると、依存する構成済み要素が適応します。このとき、長方形はポリラインを単位として移動します。の Press ボタンはその右端を移動し、実線で表示されます。

_visu_img_example_optimal_size_offline_initial.png
_visu_img_example_optimal_size_offline_greater.png


5. 例: オンラインでの行動

この例は、さまざまなサイズの領域でブラウザーに表示されます。

_visu_img_example_optimal_size_online_initial.png
_visu_img_example_optimal_size_online_greater.png