welcome: please sign in
location: 変換

変換

transform属性

描画を行うときに、位置や大きさの変換をtransform属性で指定することができます。 use要素で用いた例です。

のように書きます。


移動

移動は translate(移動量X, 移動量y) で指定します。

と書くと、x方向に10、y方向に20移動された位置に表示されます。 x="0" y="0" として使うのがほとんどです。

という方法でも可能です。

拡大縮小や回転と組み合わせて使う場合には、translateを用いる方が分りやすい。


拡大縮小

大きさの変更は scale(拡大率X, 拡大率y) で指定します。

と書くと、x方向y方向とも半分の大きさになります。 原点を基準として拡大縮小されるので x="0" y="0" として使うのがほとんどです。

上下左右で異なる拡大率を指定すると、縦長、横長の拡大縮小ができます。

拡大率に負の値を指定することもできます。 x方向の拡大率を負にすると左右反転、y方向の拡大率を負にすると上下反転になります。


回転

回転は rotate(回転角度, 中心座標X, 中心座標y) で指定します。

と書くと、(10,10)を中心に45度回転します。 この場合も x="0" y="0" として使うのが分りやすいでしょう。


せん断

長方形を左右または上下から押してずらし、平行四辺形に変えるような変換です。

次のように記述します。値は角度です。


変換の組み合わせ

translate, scale, rotate などを並べて記述することもできます。 この場合、右側のものから順に適用されます。

とすると、大きさを半分にした後、移動が行われます。

属性 x="数値" y="数値" を指定した場合は、これが先に適用されます。

適用順は

  1. 属性 x, y
  2. transform内の右端の変換
  3. transform内の左にある変換

になります。

変換の順序や合成は行列演算に対応しています。


1次変換の行列

座標を縦ベクトルで表すとき、その1次変換は2×2の行列で表され

により、点(x、y)が点(x’、y’)に移されます。

1次変換では、原点を中心とした拡大縮小、回転、せん断やそれらを組み合わせた変換ができました。

移動は行列を掛けるのではなく、ベクトルの加算に対応しました。


一般に図形の変換は次のように分類できます。

1次変換と移動を組み合わせると2)の範囲の変換になります。


1次変換と移動を同じ計算で行う方法

点(x、y)を3次元のベクトル transform2.png で表すことにします。

1次変換は transform3.png になります。

移動は transform4.png で表せます。


transformとの対応

行列の掛け算に対応するので右から順に処理されるのが分ります。

変換行列を与えてtransformを行うこともできます。

transform=matrix(a,b,c,d,e,f)

と書くと transform5.png の変換行列になります。

変換 (最終更新日時 2008-08-22 04:35:03 更新者 masahiko)