任意の画像ファイルを表示するエリアです。

//sample
nakatojiLib.addCntl("image", [10, 10], [60, 60], {
	image: "./images/photo1.png",
	name: "img1",
	position: "left"
});
nakatojiLib.addCntl("image", [10, 80], [60, 60], {
	image: "./images/photo1.png",
	name: "img2",
	position: "right top"
});
nakatojiLib.addCntl("image", [10,150], [60, 60], {
	image: "./images/photo1.png",
	name: "img3",
	size: "contain"
});
nakatojiLib.addCntl("image", [10, 220], [60, 60], {
	backgroundColor: "#DDDDDD",
	borderColor: "#AA0000",
	borderWidth: 2,
	image: "./images/photo1.png",
	name: "img4",
	size: "fit"
});

・セレクタ(第1引数)

「image」を指定します。

・位置指定(第2引数)

左上の座標軸を [y, x] で指定します。

・サイズ(第3引数)

オブジェクト(表示エリア)のサイズを [height, width] で指定します。

・オプション(第4引数)

下記参照。

 

<作成時のオプション>

作成時のオプションとして以下のプロパティを設定することができます。

・backgroundColor

表示エリアの背景色を16数進の文字列で指定します。設定しない場合は透明になります。

・borderColor

表示エリアにつけるボーダーの色です。16数進の文字列で指定します。設定しない場合は「#000000」になります。

・borderWidth

表示エリアにつけるボーダーの太さです。ピクセルで指定しますが単位はつけません。設定しない場合のデフォルト値は0です。

・image

表示する画像ファイルのパスを設定します。上記のサンプルコードではプロジェクト内のimagesフォルダにあるphoto1.pngを指定しています。

・name

作成後に個々のUIオブジェクトをハンドリングするための名称です。ほかと重複しない固有の名称を文字列で設定します。起動後にイメージを変更したり、ダブルクリックイベントに反応させる場合は必須になります。

・position

表示エリアに対して画像をどう配置するかの設定を文字列で指定します。これはCSSのbackground-positionと同じもので「left」「center」「right」「top」「center」「bottom」があります。指定方法も同様で「right top」といった指定も受け付けます。設定しない場合は天地左右centerになります。

・size

表示する画像をどのように収めるかの設定を文字列で指定します。これはCSSのbackground-sizeと同じもので「contain(表示領域に収まる最大サイズ)」、「cover(表示領域を覆う最小サイズ)」、もしくはパーセンテージ指定で「50% 60%」といった指定になります。なお、独自のものとして「fit」と指定することで「100% 100%」と同様の指定になるようになっています。

 

<プロパティを取得・変更する関数>

作成後は以下の関数を使うことができます(UIオブジェクトの設定値を取得・変更する 参照)。

・backgroundColor(string)

backgroundColorの値を変更することができます。

nakatojiLib.ctrlDB["img3"].backgroundColor("#FFFFFF");

・borderColor(string)

borderColorの値を変更することができます。

nakatojiLib.ctrlDB["img4"].borderColor("#FFFF00");

・borderWidth(integer)

borderWidthの値を変更することができます。

nakatojiLib.ctrlDB["img4"].borderWidth(0);

・image(string)

imageの値を変更することができます。

nakatojiLib.ctrlDB["img3"].image("./images/photo2.png");

・position(string)

positionの値を変更することができます。

nakatojiLib.ctrlDB["img1"].position("right");

・size(string)

sizeの値を変更することができます。

nakatojiLib.ctrlDB["img4"].size("contain");

 

<イベント>

ntEventHandler関数の引数に渡されるイベントは以下の通りです(ユーザーイベントの処理 参照)。

・第1引数 nameプロパティ

・第2引数 dubClick(ダブルクリック時)

・第3引数 なし

 

 

 

 

Joomla templates by a4joomla