bricks/docs/ja/image.md
2025-11-19 12:30:39 +08:00

6.2 KiB
Raw Permalink Blame History

画像Image

コントロールの機能、種類(通常コントロールまたはコンテナーコントロール)、親クラス

画像を表示するためのコントロールです。画像のURL設定、読み込み失敗時のデフォルト代替画像の指定、および現在の画像内容をBase64文字列としてエクスポートする機能をサポートしています。
種類: 通常コントロール
親クラス: bricks.JsWidget

初期化パラメータ

パラメータ名 説明
url String 画像のURLアドレス。コンストラクタで自動的に <img> 要素の src 属性に設定されます。
default_url String 画像の読み込みに失敗した場合、自動的にこのURLの代替画像に切り替わります。
height Number (任意) 画像の高さを設定しますCSSまたはDOMによって自動処理される場合があります
width Number (任意) 画像の幅を設定しますCSSまたはDOMによって自動処理される場合があります

注:すべてのパラメータは opts オブジェクトを通じてコンストラクタに渡されます。

主なイベント

明示的なイベント定義はありませんが、内部ではネイティブの <img> 要素の onerror イベントを使用して、読み込み失敗を処理しています。

  • onerrorset_default_url() をトリガー
    画像の読み込みに失敗した場合、自動的に default_url で指定された代替画像に差し替えます。また、再帰的なトリガーを防ぐため、エラー監視を解除します。

アイコンIcon

コントロールの機能、種類(通常コントロールまたはコンテナーコントロール)、親クラス

Image を拡張したアイコン用コントロールで、文字単位(charsize を基準)でのサイズスケーリング、動的サイズ調整、レイアウトへの適応をサポートしています。テキストと整列させる小規模なアイコンに適しています。
種類: 通常コントロール
親クラス: bricks.Image

初期化パラメータ

パラメータ名 説明
url String アイコン画像のURL。Image から継承。
rate Number スケーリング倍率。デフォルトは 1。実際のサイズ = charsize * rate
cwidth Number 占有する文字幅。デフォルトは 1
cheight Number 占有する文字高さ。デフォルトは 1
dynsize Boolean 動的サイズ調整を有効にするかどうか。デフォルトは truecharsize_sizing() に基づいてサイズを調整します。

注:charsizebricks.app.charsize から取得され、アプリケーションレベルのフォント基準単位です。

主なイベント

独立したイベント定義はありません。主な動作は初期化時やプロパティ変更後に options_parse() により再描画が行われます。

  • options_parse()
    コントロールの初期化時に呼び出され、サイズ関連のオプションを解析・適用します。URLの設定やサイズ調整も含まれます。

状態付きアイコンStatedIcon

コントロールの機能、種類(通常コントロールまたはコンテナーコントロール)、親クラス

状態に応じて対応するアイコン画像を切り替えることができるコントロールです。スイッチのON/OFF状態や多段階インジケータなどに使用されます。
種類: 通常コントロール
親クラス: bricks.Icon (間接的に Image を継承)

初期化パラメータ

パラメータ名 説明
states Array<{state: String, url: String}> 状態の配列。各オブジェクトには状態名と対応する画像URLを含みます。
state String 初期状態名。未指定の場合は states[0].state がデフォルトで使用されます。
rate, cwidth, cheight, dynsize 上記と同じ Icon から継承したレイアウトおよびスタイル用パラメータ

例:

{
  states: [
    { state: 'normal', url: 'icon-normal.png' },
    { state: 'active', url: 'icon-active.png' }
  ],
  state: 'normal'
}

主なイベント

  • set_state(state)
    メソッド手動で現在の状態を設定します。該当する状態を探し、画像URLを更新し、オプションを再解析して再描画します。
    • パラメータ:state —— 切り替える状態の文字列
    • 動作:this.states を走査し、一致する項目を見つけた後、super.options_parse() を呼び出してビューを更新します。

空白アイコンBlankIcon

コントロールの機能、種類(通常コントロールまたはコンテナーコントロール)、親クラス

何の画像も表示せず、固定の文字サイズを持つ透明なプレースホルダとして機能するアイコンコントロールです。レイアウトの整列や、動的置換前のスペース確保に使用されます。
種類: 通常コントロール
親クラス: bricks.JsWidget

初期化パラメータ

パラメータ名 説明
rate Number サイズスケーリング比率。デフォルトは 1charsize を基にした計算に影響します。
cwidth Number 占有する文字幅。デフォルトは 1
cheight Number 占有する文字高さ。デフォルトは 1
dynsize Boolean 動的サイズ調整を有効にするかどうか。デフォルトは truecharsize_sizing() への反応を制御します。

主なイベント

公開されたイベントやコールバックはありません。主な目的は、UIレイアウトにおいて他のアイコンと同等のサイズ挙動を保ちつつ、画像リソースを一切読み込まないことです。