109 lines
6.2 KiB
Markdown
109 lines
6.2 KiB
Markdown
# 画像（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` イベントを使用して、読み込み失敗を処理しています。
|
||
|
||
- **`onerror` → `set_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 | 動的サイズ調整を有効にするかどうか。デフォルトは `true`。`charsize_sizing()` に基づいてサイズを調整します。 |
|
||
|
||
> 注：`charsize` は `bricks.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` から継承したレイアウトおよびスタイル用パラメータ |
|
||
|
||
> 例：
|
||
> ```js
|
||
> {
|
||
> 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 | サイズスケーリング比率。デフォルトは `1`。`charsize` を基にした計算に影響します。 |
|
||
| `cwidth` | Number | 占有する文字幅。デフォルトは `1`。 |
|
||
| `cheight` | Number | 占有する文字高さ。デフォルトは `1`。 |
|
||
| `dynsize` | Boolean | 動的サイズ調整を有効にするかどうか。デフォルトは `true`。`charsize_sizing()` への反応を制御します。 |
|
||
|
||
### 主なイベント
|
||
|
||
公開されたイベントやコールバックはありません。主な目的は、UIレイアウトにおいて他のアイコンと同等のサイズ挙動を保ちつつ、画像リソースを一切読み込まないことです。 |