20

私は一般的に raphael.js をよりよく理解しようとしていますが、raphael.js のドキュメントが時々混乱したり、少しあいまいになったりする可能性があることがわかりました。

マトリックスの目的と使用方法を説明できる人はいますか?

4

3 に答える 3

27

Matrix in Raphael に関する適切で明確な情報はどこにもほとんどありません。ただし、良いニュースは、SVG および CSS3 のマトリックス変換とほぼ同じであることです。

SVG での行列変換に関するガイドがいくつかありますが、通常は、行列の計算を既に理解していることを前提としています。そうしないとあまり役に立ちません。

ただし、CSS3 の行列演算に関する優れたガイドが 1 つあります。また、 Matrix Construction Setも付属しています(2013 年 2 月現在、Chrome では動作しませんが、Firefox では動作します)。CSS3 と Raphael マトリックス変換の背後にある数学的原理は本質的に同じであるため、このツールを使用して一連のマトリックス変換数値を生成し、それらを Raphael に適用すると、多かれ少なかれ同じ結果になるはずです。

マトリックス変換とは何かについての超簡単な概要:

  • これは、変換が完了した後にラファエル シェイプのバウンディング ボックスの各コーナーがどこにあるかを計算するために使用される 6 つの数値のセットです。これらの 6 つの数値は、ほぼすべてのスケール、変換、回転、せん断効果を作成できます。
  • これは、Raphael 変換の舞台裏のエンジンです。Raphael は、変換をマトリックス座標に変換します。マトリックス座標は非常に気が遠くなる可能性があります。非常に複雑なことをしている場合を除き、通常は内部で処理を行うようにするのが最善です。
  • これは、マトリックス変換の背後にある 6 つの数値間の数学的関係を示すXKCDジョークです。あなたはこれを面白いと思うか、ラファエルに内部で数学をやらせるのが最善であると納得させるでしょう..

ここに画像の説明を入力

  • 要素の現在のマトリックス状態を確認するには:
    • 要素のマトリックス オブジェクトを直接見るには:someElement.matrix文字で指定された各番号を持つオブジェクト{a:1,b:0,c:0,d:1,e:0,f:0}です (たとえば、これらを直接設定してもオブジェクトは変更されません (したがって、できませんsomeElement.matrix.b = 3;) 。
    • を使用して、現在のマトリックスを、変換属性を含むより人間が判読できるオブジェクトに逆変換できます。someElement.matrix.split()
    • 行列を変換文字列に逆変換することもできますsomeElement.matrix.toTransformString();
  • マトリックスを手動で設定する必要がある場合は、次のいずれかの方法で行うことができます。これらはすべて、前の変換から置換またはアニメーション化されます。
    • アニメーション化 (配列を使用) :someElement.animate({transform: ['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]}, 1000);
    • インスタント（配列を使用）：someElement.transform(['m',0.5, -0.5, 0.5, 0.5, -0.5, 0.5]);
    • アニメーション (文字列を使用) :someElement.animate({transform: 'm0.5 -0.5 0.5 0.5 -0.5 0.5'}, 1000);
    • インスタント (文字列を使用) :someElement.transform('m0.5 -0.5 0.5 0.5 -0.5 0.5');
  • これはデフォルトの行列文字列です: 1 0 0 1 0 0. これを適用すると、変換がデフォルトの状態にリセットされます。
  • 各マトリックス番号が何を意味するかを特徴付けるのは非常に困難です。単独では、ax スケール、by せん断、cx せん断、dy スケール、およびexfと y の移動のように機能します。しかし、それらは数学的に複雑な方法で相互作用します。単純ではありません。
于 2012-12-28T15:40:57.193 に答える
4

Raphaël についてはわかりませんが、ドキュメントを見て他の描画 API を知っているので、知識に基づいた推測を行います。

グラフィック (Raphaël など) では、マトリックスを使用してアートワークを変換 (移動、回転など) します。HTML5canvas要素自体にも同様の API があります。

メソッドを使用しElement.transformて描画面を移動および回転する場合。もう一度絵を描き始める前に、ペンの下に一枚の紙を移動するようなものです。内部的には、このような変換は変換マトリックスを使用して行われます。最初は少しわかりにくいかもしれませんが、これは非常に便利な機能です。実際、これは 3D グラフィックスの仕組みでもあります。

さらに、マトリックスを相互に追加できるため、水平方向に移動するマトリックス、垂直方向に移動するマトリックス、回転するマトリックス (など) を 1 つ作成し、それらを追加して組み合わせた効果を得ることができます。

繰り返しますが、ここでは推測しています。ラファエルは知りません。しかし、これがグラフィックにおける行列の基本的な使い方です。

于 2012-06-07T22:58:40.367 に答える
1

また、上記に加えて、Raphael はかつて回転スケール変換のみに制限されていましたが、著者がマトリックスを構文に公開したことで、2D グラフィックスに対して任意の変換が可能になりました

インタラクティブな例については、 http: //www.irunmywebsite.com/raphael/additionalhelp.php にアクセスしてください。 ドロップダウンで「マトリックス」を選択し、それらの例を実行することでフィルタリングできます。Matrix で検索して、別の例のサブセットを取得することもできます。

たとえば、「スキュー」と呼ばれる変換タイプがあります。ページでこれを検索すると、これを示す別の例が表示されます。

マトリックスを恥ずかしがらないでください、それは興味深い主題です

iPod ではハイパーリンクができなかった

于 2012-06-07T23:23:52.573 に答える