記事ソース/JavaScriptのsetTransformについて
をテンプレートにして作成
査読
rst2hooktail
進行表
執筆中
かぎマニュ
物理のかぎプロジェクト
トップ
最近の更新
ヘルプ
開始行:
#rst2hooktail_source
=========================================================...
JavaScriptのsetTransformについて
=========================================================...
仕事で、JavaScriptで画像処理を行う機会があったのですが、
その中で、setTransform関数で画像の回転を扱いました。
それに関してなかなか明快な説明をしているサイトが探せなか...
この関数について、説明してみようと思います。
取りあえずは、こちらの 画像回転のデモ_ をご覧ください。
HTMLの残念な座標系
=======================
.. image :: chromel-setTransform-01.png
HTMLにおいては、座標は左から右にx軸があり、上から下にy軸...
つまり、左手系なのです。(図1参照)
setTransformの引数
=======================
さて、setTransform関数は次のような引数を取ります。
setTransform(a,b,c,d,e,f);
このa〜fは行列の成分を意味します。
以下の様な行列です。
<tex>
A =
\begin{pmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1
\end{pmatrix} \tag{##}
</tex>
つまり、アフィン変換です。
ここで、canvas上の座標 $(x,y)$ を $A$ で変換した後の座標...
とすると、
<tex>
\begin{pmatrix}
x^\prime \\
y^\prime \\
1
\end{pmatrix} =
\begin{pmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
x \\
y \\
1
\end{pmatrix}
\tag{##}
</tex>
となります。
画像の回転
==============
ここで、能動的回転を考えましょう。 $\alpha$ だけ反時計回...
<tex>
\begin{pmatrix}
x^\prime \\
y^\prime \\
1
\end{pmatrix} =
\begin{pmatrix}
\cos \alpha & -\sin \alpha & 0 \\
\sin \alpha & \cos \alpha & 0 \\
0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
x \\
y \\
1
\end{pmatrix}
\tag{##}
</tex>
となります。
この際、左手系であることが混乱を招きます。
.. image :: chromel-setTransform-02.png
しかし、高校数学の複素数平面をご存知の方は、こう考えると...
計算の世界では普通の複素数平面で、 $\alpha(>0)$ の回転は...
回転後に、canvasの世界に合わせる為、x軸で折り返して、左手...
だから、式 $(3)$ は複素数平面の世界では反時計回りで、
canvasの世界になった時、時計回りの回転を表します。
画像の並進
===========
なお、 $e,f$ に関しては、canvasの原点 $O$ を中心に $a,b,c...
原点自体が $(x,y)=(e,f)$ へ並進すると考えればよいでしょう。
若しくは、 $(x,y)=(e,f)$ を中心に $\alpha$ の回転を行った...
と考えても良いです。
canvasの書き方に関して
================================
さて、以上を踏まえて、最初のデモファイルでは画像クラスの...
ctx.setTransform(Math.cos(rad),Math.sin(rad),-Math.sin(ra...
ctx.drawImage(img, -img.width/2, -img.height/2);
という順番でコマンドを書いています。
これはつまり、setTransformで画像を書き込む前に座標系を $(...
その原点中心として時計回りに $\alpha$ 回転させた座標系に...
次のdrawImage(img,width,height)ですが、これは本来、座標点...
長方形の画像の横幅 img.width 、縦幅 img.height として、dr...
今日はここまで、お疲れさまでした!
.. _画像回転のデモ: http://hooktail.sub.jp/mathInPhys/set...
@@author:クロメル@@
@@accept:2020-02-28@@
@@category:物理数学@@
@@id:setTransform@@
終了行:
#rst2hooktail_source
=========================================================...
JavaScriptのsetTransformについて
=========================================================...
仕事で、JavaScriptで画像処理を行う機会があったのですが、
その中で、setTransform関数で画像の回転を扱いました。
それに関してなかなか明快な説明をしているサイトが探せなか...
この関数について、説明してみようと思います。
取りあえずは、こちらの 画像回転のデモ_ をご覧ください。
HTMLの残念な座標系
=======================
.. image :: chromel-setTransform-01.png
HTMLにおいては、座標は左から右にx軸があり、上から下にy軸...
つまり、左手系なのです。(図1参照)
setTransformの引数
=======================
さて、setTransform関数は次のような引数を取ります。
setTransform(a,b,c,d,e,f);
このa〜fは行列の成分を意味します。
以下の様な行列です。
<tex>
A =
\begin{pmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1
\end{pmatrix} \tag{##}
</tex>
つまり、アフィン変換です。
ここで、canvas上の座標 $(x,y)$ を $A$ で変換した後の座標...
とすると、
<tex>
\begin{pmatrix}
x^\prime \\
y^\prime \\
1
\end{pmatrix} =
\begin{pmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
x \\
y \\
1
\end{pmatrix}
\tag{##}
</tex>
となります。
画像の回転
==============
ここで、能動的回転を考えましょう。 $\alpha$ だけ反時計回...
<tex>
\begin{pmatrix}
x^\prime \\
y^\prime \\
1
\end{pmatrix} =
\begin{pmatrix}
\cos \alpha & -\sin \alpha & 0 \\
\sin \alpha & \cos \alpha & 0 \\
0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
x \\
y \\
1
\end{pmatrix}
\tag{##}
</tex>
となります。
この際、左手系であることが混乱を招きます。
.. image :: chromel-setTransform-02.png
しかし、高校数学の複素数平面をご存知の方は、こう考えると...
計算の世界では普通の複素数平面で、 $\alpha(>0)$ の回転は...
回転後に、canvasの世界に合わせる為、x軸で折り返して、左手...
だから、式 $(3)$ は複素数平面の世界では反時計回りで、
canvasの世界になった時、時計回りの回転を表します。
画像の並進
===========
なお、 $e,f$ に関しては、canvasの原点 $O$ を中心に $a,b,c...
原点自体が $(x,y)=(e,f)$ へ並進すると考えればよいでしょう。
若しくは、 $(x,y)=(e,f)$ を中心に $\alpha$ の回転を行った...
と考えても良いです。
canvasの書き方に関して
================================
さて、以上を踏まえて、最初のデモファイルでは画像クラスの...
ctx.setTransform(Math.cos(rad),Math.sin(rad),-Math.sin(ra...
ctx.drawImage(img, -img.width/2, -img.height/2);
という順番でコマンドを書いています。
これはつまり、setTransformで画像を書き込む前に座標系を $(...
その原点中心として時計回りに $\alpha$ 回転させた座標系に...
次のdrawImage(img,width,height)ですが、これは本来、座標点...
長方形の画像の横幅 img.width 、縦幅 img.height として、dr...
今日はここまで、お疲れさまでした!
.. _画像回転のデモ: http://hooktail.sub.jp/mathInPhys/set...
@@author:クロメル@@
@@accept:2020-02-28@@
@@category:物理数学@@
@@id:setTransform@@
ページ名:
Modified by
物理のかぎプロジェクト
PukiWiki 1.4.6
Copyright © 2001-2005
PukiWiki Developers Team
. License is
GPL
.
Based on "PukiWiki" 1.3 by
yu-ji
Powered by PHP 5.3.29 HTML convert time to 0.002 sec.