9パッチ画像塗りつぶし

  • 作成者:ayuan0625
  • 編集回数:3次
  • 最終更新:ayuan0625 于 2025-09-08
  • 一.概要

    1.バージョン

    帳票サーババージョン

    11.0

    2.応用シーン

    [ダッシュボード]におけるコンポーネントの画像枠が拡張されて変形する問題を解決するため、コンポーネントの[枠]に[カスタム画像]-[9パッチ塗りつぶし]機能を設計しました。これにより、ほとんどの枠が異なる解像度環境下でも変形しないように実現できます。

    二.機能説明

    1.機能の入り口

    [ダッシュボード]でコンポーネントを選択した後、[属性]パネルの[背景スタイル ]-[枠]から[カスタム画像]を選択し、[画像を選択]ボタンをクリックします。画像を選択した後、下部の[9パッチ塗りつぶし設定]ボタンをクリックすると、[9パッチ塗りつぶし設定]画面に進みます。

    1.png

    [テンプレートテーマ]で設定する場合も、同様に[コンポーネントスタイル]の[背景]で[枠]を設定すれば十分です。以下の図のように表示されます:

    2.png

    2.分割規則

    [9パッチ塗りつぶし設定]画面では、自由にドラッグ可能な 4 本の赤い点線があり、画像はこれらの点線によって九宮格に分割されます。

    例えば、画像ファイル ダーク枠-背景付け.rar を使用して[9パッチ塗りつぶし]を設定します。以下の図のように表示されます:

    3.png

    ① ③ ⑦ ⑨ の四隅のピクセルは変化せず、② ④ ⑥ ⑧ の位置の画像は拡張し、⑤ の位置の画像はくり抜かれます。プレビュー時の効果は以下の図のように表示されます:

    4.png

    そのため、この機能では「背景が透明な枠素材」の使用を推奨します。

    操作デモは以下の図のように:

    5.gif

    三.注意事項

    [枠]に使用する画像素材のサイズがコンポーネントサイズより大幅に大きい場合、[9パッチ塗りつぶし]方法により四隅のピクセルが圧縮され、四隅の比率を維持したまま現在のコンポーネントサイズに合わせて拡張されます。このため、現在の[枠]は素材と異なって見える場合があります。例えば、下図では 2 つのコンポーネントの枠を比較します:

    6.png


    Attachment List


    Theme: FineReport ダッシュボード
    • いいね
    • 良くない
    • 閲覧しただけ