読者になるデジタル・デザイン・ラボラトリーな日々アラフィフプログラマーが数学と物理と英語を基礎からやり直す。解いた方式をさらに模索していた中で、下記サイトを見つけました。Laboratory内容的には私が目指していたものですが、残念なのは中身はCSSなんですよね。解く方法ですが、これには行列を使えばいいことが分かりました。CSSを使用したホモグラフィのソースリストを見ても、変換元座標(origin)と変換先座標(markers)で4点分ループして行列式を作成していますね。-y*Y]);V.push(X);V.push(Y);}変換元座標(origin)と変換先座標(markers)から8個のパラメータを求める必要があります。それには逆行列(inverse)を使います。逆行列については、「逆行列を理解してみる」を参照Javascriptには標準では行列ライブラリがありませんが、このプログラムでは"sylvester"の"sylvester-min.js"という代数ライブラリを使用しております。マトリクス(行列)生成となっております。行列計算によって、8個のパラメータ(a,b,c,d,e,f,g,h)は、ans.e(1)~ans.e(8)として値が求まりました。8個のパラメータから台形等に変形した画像にしているのが下記の部分です。上記まではCSSではなくJavascriptであるため、Canvasに移植する上では問題ないのですが、Canvasではmatrix3dのような画像変形は自前で処理する必要があります。+'0,0,0,1)translateZ(1px)';}次回は、画像変形処理について解析していきます。はてなブログProアラフィフプログラマーが数学と物理と英語を基礎からやり直す。12スポンサーリンクスポンサーリンクはてなブログをはじめよう!Yaju3Dさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。