html - ポイントを使用したHTML5キャンバスdrawImage？

Question

4点で絵を描く必要があります。これらの4つのポイントを配列に格納していますが、これらの位置が変わります。次に、これらの位置を反映した画像を描画する必要があります。context.drawImageは1つの位置のみを受け入れます。

次のようになります。4つの位置：

x,y----------x,y
 |            |
 |            |
 |            |
 |            |
 |            |
x,y----------x,y

score 6 · Accepted Answer

複雑な 3D ではなく、クワッドワーピングが必要です

長方形の画像を、可能性のある非長方形のクワッドにレンダリングするように求めています。

これを行う正しい方法は、変換マトリックスを計算することです。真の 3D コンテンツをレンダリングする必要はありません。これは、ホモグラフィ行列の計算で行われます。そのためには、変換行列を理解し、いくつかの方程式を解くためのコードを実装する必要があります。

このプロセスはよく理解されており、元の 4 つの座標とターゲットの 4 つの点が必要であり、それらがあれば、変換行列を計算するプロセスだけが必要です。この行列は基本的に Gauss-Jordan の消去法によって計算されます。

マトリックスソルバーと一般的な手順でこれを確認してください。変換を理解すると、それを行うのは簡単になります。ホモグラフィーとは何かを理解するために、これもチェックしてください。ここでは、JavaScriptとCSS のサンプルを使用して、その計算方法について説明します。

score 4 · Accepted Answer

あなたが探しているのは、3D レンダリング言語でクワッドを描画することです。

通常、シェイプを 2 つの三角形 (面) に分割し、テクスチャ塗りつぶしを使用して個別に描画します。

この問題の (複雑な) 解決策は次のとおりです<canvas>。

問題はそれほど単純ではないので、Three.js などのラッパーを使用することをお勧めします。これは、テクスチャ付きの顔操作に対して高レベルの抽象化を提供します。他の Three.js 2D の例をチェックする<canvas>と、それがどのように機能するかがわかります。