画像移動

画像移動 JavaScript ファイル作成-３

引き続き、画像移動 JavaScript ファイル
click_move.js
の後半部分を作成していきます。
ファイル内容は
Move Image に戻り左サイドナビ｢画像移動｣の中の
画像移動 JavaScript ファイル
から見ることができます。

function check()

入力確定ボタンがクリックされると function set() に飛んできます。
そして最初に呼び出されるのが function check() です。
この function の機能は、各点の座標値が適正かどうか判定することです。
不正であった場合は、最初 err = 0 であった err 値を +1 します。
err = err + 1;
処理が終わるとその err 値を return させます。
その処理内容詳細を説明していきます。

for ル－プを使用してチェック
各点の座標値の入力 input タグは 12 個あります。
document.forms[0].elements[i].value;
で i = 0～11 まで i を変化させることによりその座標値を読み取ることができます。
よって、
for (var i = 0; i <= 11; i++) {
str[i] =
document.forms[0].
elements[i].value;
}
とすることで配列 str[i] にその値を入れることができます。
入力値があるか
まず入力値が記入されているかチェックします。
if (str[i] == ""){
err = err + 1;
alert("数値が入力されていません");
}
入力値が空であれば、err 値が +1 されます。
X,Y 座標値は -100 以上の数か？
次ぎに、X,Y 座標値が -100 以上の数かチェックします。
if (str[i] < -100){
err = err + 1;
alert("XY 座標値は -100 以上の数を入力ください");
}
X,Y 座標値は、500 以下の数か？
引き続き、X,Y 座標値が 500 以下の数かチェックします。
if (str[i] > 500){
err = err + 1;
alert("XY座標値は 500 以下を入力ください");
}
入力値が数値か判定
入力値が数値か判定します。
isNaN メソッドを利用して数値チェックを行います。
flagNa = isNaN(str[i]);
str[i] が数値かどうか調べ結果を変数 flagNa に入れます。
数値の場合は false 、数値でない場合は true が flagNa に設定されます。
そして、数値でない場合はエラ－メッセ－ジを出します。
if (flagNa == true){
err = err + 1;
alert("数値ではない入力値があります");
}

function set()

入力された各点の座標入力値に基づいて、座標グラフにその位置を描写していきます。入力確定ボタンがクリックされると function set() に飛んできます。
そして function check() で、各点の座標値が適正かどうか判定します。
適正であった場合は、err = 0 ですので、各点の位置を描写します。
err≠0 ならば何もしません。

X,Y 座標値を画像位置に変換
str[ ]には各点の X,Y 座標値が格納されています。
しかしながら、画像描写位置と座標値と同じではなく補正してやる必要があります。
X 座標で説明すると、
各点の X 座標値 pos_x と X 方向画像表示位置 pos_x1 との間には
pos_x = pos_x1-x1
又、同様に、Y 座標にも
pos_y = pos_y1-y1
の関係がありました。
よって、X 座標値 str[j] (j = 0～5) については
str[j] = eval(str[j]) + x1;
とすると X 座標値を X 方向画像表示位置に変換することができます。
ちなみに、eval( )メソッドは括弧内の数式又は文字列を数値に変換します。
同様に、Y 座標値 str[j] についても変換すると
str[j+6] = eval(str[j+6]) + y1;
となります。
X,Y 座標値に基づき各画像位置設定
記入された X,Y 座標値に基づいて各画像位置を設定します。
まずは、設定したい画像の id 名 k は "img*" となり、* には 0～5 の文字が入ります。
そして、X 方向画像表示位置設定書式は
document.getElementById(k).
style.left = str[j] + "px";
となるのは、
画像移動 JavaScript ファイル作成-２の｢移動後の画像位置を設定｣の項でも説明しました。
同様に、Y 方向画像表示位置設定書式は、
document.getElementById(k).
style.top = str[j+6] + "px";
となります。

for ル－プで各画像位置設定

for ル－プを使用して各画像位置を順次設定していきます。
ここまでをまとめて記述すると以下のようになります。

  for (var j = 0; j <= 5; j++){
    str[j] = eval(str[j]) + x1;
    str[j+6] = eval(str[j+6]) + y1;
    var k = "img" + j;
    document.getElementById(k).
      style.visibility = "hidden";
    document.getElementById(k).
      style.left = str[j] + "px";
    document.getElementById(k).
      style.top = str[j+6] + "px";
    document.getElementById(k).
      style.visibility = "visible";  
  }

スマホ系のプラウザでもうまくいくように、一旦前に描かれていた画像を消去して、新たな位置にもう一度表示する作業を忘れずに。

これで、画像移動 JavaScript ファイル-３の作成は完了です。
引き続き、画像移動動作確認を行います。

画像移動動動作確認　に続く
画像移動 JavaScript ファイル作成-２　に戻る

画像移動

画像移動 JavaScript ファイル作成-３

function check()

function set()

Move Imageに戻る