【jQuery】ついにmatrix3dを使う時が来た

2021年1月4日jQuery

はじめに

以前の記事で"matrix3d"について調べたことがあります。その時は結局使わずに問題が解決しましたが、ついに来た。この時が。今回はある要素のZ座標を取得します。まずはコンソールに表示してみましょう。console.log(elem.css(“transform"))っと。

"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -200, 1)"

はい出ました。16個の数字。あの時は「なんじゃそら…。」とつぶやいてしまったが、今なら(一部だけ)分かるぜ。このそれぞれの数字が何を意味しているのかは、以前の記事のとても分かりやすい手書きの図が参考になるかと思います。よろしければそちらもどうぞ。

取得用関数

結局ですね、15番目の数字がZ座標を表しているんですね。というワケで"matrix3d"からZ座標を取得する関数を作りました。

/*** 引数で渡された要素のZ座標を取得する関数 ***/
  function getPointZ(elem) {
    var values = elem.css("transform").split("(")[1].split(")")[0].split(",");
    return parseInt($.trim(values[14]));
  }

最初の"split"で

"matrix3d"

と

"1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -200, 1)"

に分けます。その後半部分を2番目の"split"で

"1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, -200, 1"

と

""

に分けます。後半部分は空文字です。3番目の"split"で前半部分を16個の要素を持つ配列にして変数valuesに代入します。要素のインデックスは0から始まるので、15番目の要素は"values[14]"で取得できます。"$.trim"で空白を削除し、"parseInt"で文字列から数値に変換してreturnです。

あとがき

はい。これでZ座標が取得できるようになりました。これを使ってイイものを作りたいと思います。ありがとうございました。

おしゃれ度

★☆☆☆☆