画像移動

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

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

function dragImg(event)

マウスが動くとこの function dragImg(event) に飛んできます。
最初に、if(!flag) return;
となっており、かつ通常は flag は false となっていますので、 何も動作せず return されます。
もし、flag = true となっていれば、マウス位置を取得しその値の処理を実行します。
その処理内容を説明していきます。

  1. event.clientX / Y

    例えば

      function dragImg(abc){
    pos_x0 = event.clientX
  }

    と記述すると、イベント(今回の場合でいえば mousemove)発生時 のクライアント X 座標を pos_x0 に取得すると思っていました。
    ところが、Mozilla Firefox では動きません。
    すべてのブラウザで動くようにするには 

      function dragImg(abc){
    pos_x0 = abc.clientX
  }

    のように記述する必要があります。
    今回、何がなんでも動くように、

      function dragImg(event){
    pos_x0 = event.clientX
  }

    のように記述しました。
    そもそも、クライアント座標ってなんなんでしょう。
    一言で言うとマウスが指し示す位置の座標です。
    スクロ－ルされていないとしましょう。
    ブラウザ body の左端からマウス位置までの距離がクライアント X 座標
    ブラウザ body の上端からマウス位置までの距離がクライアント Y 座標
    となります。
    ところが、画像は画像の左上端 x(pos_x0,pos_y0) を基準に位置指定されますので、 x=20 , y=20 だけクライアント座標から左及び上方向シフトする必要があります。 よって
    pos_x0 = event.clientX - x;
    pos_y0 = event.clientY - y;
    となります。

  2. pageXOffset / pageYOffset

    すべてのブラウザで機能するように、前項では event.clientX / Y で、マウス位置を取得しました。
    しかし、この値はスクロ－ルされていないことを前提にしています。
    よってスクロ－ルされた時の正しいマウス位置を知るには、スクロ－ル値を 補正する必要があります。
    スクロ－ル値を知るために pageXOffset / pageYOffset を使用します。
    例えば
    scr_x0 = pageXOffset;
    と記述すると、
    隠れたブラウザ body の左端から現在表示されているウィンドウの左端まで の値 pageXOffset を取得することができます。
    また、
    scr_y0 = pageYOffset;
    と記述すると、
    隠れたブラウザ body の上端から現在表示されているウィンドウの上端まで の値 pageYOffset を取得することができます。

  3. 正しい画像左上端位置

    ここまでをまとめると正しい画像左上端位置 x(pos_x1,pos_y1) は
    pos_x1 = pos_x0 + scr_x0;
    pos_y1 = pos_y0 + scr_y0;
    となります。
    ここで例えば、
    X 方向に scr_x0 = pageXOffset = 100
    Y 方向に scr_y0 = pageYOffset = 200
    スクロ－ルされ、
    pos_x0 = clientX = 108
    pos_y0 = clientY = 208
    となっているとすれば、下図で示す位置に画像が存在することになります。


    XY 座標補正

  4. 画像中心を座標グラフ内に収める

    画像の中心が座標グラフ -100～500 内に納まるように 画像左上端位置 x(pos_x1,pos_y1) を制限します。
    画像中心を座標グラフ内に納めるためには、
    pos_x1 は 500 + x1 = 588 を越えることはできず、又
    pos_x1 は -100 + x1 = -12 より大きくなければなりません。さらには
    pos_y1 は 500 + y1 = 788 を越えることはできず、又
    pos_y1 は -100 + y1 = -188 より大きくなければなりません。
    まとめると次のようになります。
    if(pos_x1 > 500 + x1) pos_x1 = 500 + x1;
    if(pos_x1 < -100 + x1) pos_x1 = -100 + x1;
    if(pos_y1 > 500 + y1) pos_y1 = 500 + y1;
    if(pos_y1 < -100 + y1) pos_y1 = -100 + y1;
    の制限を設定します。

  5. 移動後の画像位置を設定

    動かしている画像(id 名は imgName に格納されている)の移動後の画像位置を設定します。
    document.getElementById(imgName).style.スタイルプロパティ
    オブジェクトはとても便利です。
    上の例では、ID 名が imgName の CSS スタイルを変更することができます。
    ここで、下記のように記述すると ID の位置を書換えることができます。
    document.getElementById(imgName). style.left = pos_x1 + "px";
    document.getElementById(imgName). style.top = pos_y1 + "px";
    です。
    left指定すると X 座標を
    top 指定すると Y 座標を
    設定することができます。
    数字だけでは設定できません。
    必ず "px" 文字を追加するのを忘れないでください。
    でもこれだけでは、スマホ系のプラウザではうまくいかないようです。
    一旦前に描かれていた画像を消去して、
    document.getElementById(imgName). style.visibility = "hidden";
    新たな位置にもう一度表示する作業が必要なようです。
    document.getElementById(imgName). style.visibility = "visible";

  6. 移動後の画像中心座標値の計算

    画像位置入力欄に入れるべき移動後の座標値を計算します。
    画像左上端位置が x(pos_x1,pos_y1) のとき 画像位置入力欄に入るべき値 (pos_x,pos_y) は、まずは X 座標について説明すると
    pos_x = pos_x1 - x1
    となります。
    変形すると
    pos_x
    = (pos_x0 + scr_x0) - x1
    = (clientX - x) + pageXOffset - x1
    = (clientX - 20) + pageXOffset - 88
    = clientX + pageXOffset - 108
    例えば、上の状況図の場合だと
    clientX = 108
    pageXOffset = 100
    ですので、
    pos_x = 108 + 100 - 108 = 100
    なります。
    同様に、Y 座標は
    pos_y = pos_y1-y1
    となります。
    まとめると、
    pos_x = Math.round(pos_x1-x1);
    pos_y = Math.round(pos_y1-y1);
    となります。
    ちなみに Math.round(abc) は数学関数オブジェクトです。
    abc の値を四捨五入して整数化します。
    例えば、
    abc = 1234.567
    とすると
    Math.round(abc) は 1234 になります。
    pos_x1 , pos_y1 は整数ではないので整数化しました。

  7. 移動後の各点座標の記入

    画像位置入力欄に入れる座標値を記入します。
    フォ－ムズ forms オブジェクトを利用します。
    今回は、
    document.forms[0].elements[idn]. value = pos_x;
    のような書式になります。
    forms[0] は最初のフォ－ムを指定しています。
    といってもフォ－ムは１個しかありません。
    JavaScript でフォームを操作する時には、input タグの name 属性値を使う以外に elements[] を使う方法があります。
    elements[] を使うと、フォームに設置された各ボックスやボタンを上から順番に 取得することができます。
    今回の場合では、idn 番目の input タグの value 属性値に pos_x の値を入れることになります。
    ここで、idn は
    idn = eval(imgName.slice(-1));
    と設定されます。
    slice() メソッドは文字列を抜き出すことができます。
    右側の文字位置の指定をするときは負数を( )内に入れます。
    今、imgName には img0 ～ img5 のいずれかの文字が設定されていますので、 imgName.slice(-1) を実行すると抜き出されるのは 0～5 のいずれかの文字になります。
    次ぎに、eval() メソッドを実行すると文字を数値に変換してくれます。
    よって、idn は 0～5 のいずれかの数値が設定されることになります。
    idn が
    0～ 5 のときは X 座標
    6～11 のときは y 座標
    の入力値を入れる input タグに対応していますので、
    document.forms[0].elements[idn]. value = pos_x;
    document.forms[0].elements[idn + 6].value = pos_y;
    と記述すると画像移動後の XY 座標値をフォ－ムデ－タ内容(value)に設定することができます。


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


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

Move Imageに戻る