31

画像を傾けるにはどうすればよいですか? たとえば、各コーナーには座標 (p1、p2、p3、p4) を持つ CGPoint があります。次に、p4.x+=50、p4.y+=30 を設定する必要があります。したがって、このコーナー (p4) は 2D パースペクティブで引き伸ばされ、画像が歪むはずです。

代替テキスト
(出典: polar-b.com )

私はCATransform3Dを使用しようとしましたが、ビューのパースペクティブを変更するだけであるため、これはそのような方法では実行できないようです (回転、片側を近づける/遠ざける)。多分CGAffineTransformが役に立つでしょうか？

答えがわかったら、サンプルコードを書いてください。

前もって感謝します

4

4 に答える 4

82

CGAffineTransform では不可能です。アフィン変換は常に、平行移動、回転、せん断、スケーリングに分解できます。それらはすべて平行四辺形を平行四辺形にマッピングしますが、変換は行いません。

変換の場合、2 つのステップで実行できます。正方形を台形に変換するもの。

p1-----p2       p1-----p2
 |     |   -->   |       \
p3-----p4       p3--------p4'

縦方向にもう一枚。単純な変換規則は

                   y - c
x' = (x - p1.x) * ———————— + p1.x
                  p1.y - c
y' = y

ここで、c は、p1 と p3、および p2 と p4 を結ぶ直線の交点の y 座標です。

ここで、変換の x*y 係数に注目してください。これは、そのような変換が線形でないことを示しています。したがって、CATransform3D はこれを 2D 変換として実行することもできません。

ただし、ベクトル

[x, y, z, w=1]

実際の 3D ベクトルに変換されます

(x/w, y/w, z/w)

CA が通常の 3D コンピューティング グラフィックス ルールに従っている場合、投影前に、変換を使用して「ごまかす」ことができます。

[ P . . Q ] [ x ]   [ x' ]
[ . R . S ] [ y ] = [ y' ]
[ . . 1 . ] [ z ]   [ z' ]
[ . T . U ] [ 1 ]   [ w' ]

適切な P、Q、R、S、T、U を使用して、4 つのポイントを予想される位置にマッピングします。(6 つの一意の座標と 6 つの変数は、ほとんどの場合、正確に 1 つの解を持つ必要があります。)

これらの 6 つの定数を見つけたら、CATransform3Dを作成できます。構造定義が

struct CATransform3D
   {
   CGFloat m11, m12, m13, m14;
   CGFloat m21, m22, m23, m24;
   CGFloat m31, m32, m33, m34;
   CGFloat m41, m42, m43, m44;
};
typedef struct CATransform3D CATransform3D;

したがって、CATransform3DMake 関数に依存する代わりに、マトリックス要素を直接変更できます。(行ベクトルまたは列ベクトルを使用する規則により、転置を実行する必要がある場合があります。)

長方形 ((X, Y), (W, H)) を任意の四角形 ((x1a, y1a), (x2a, y2a); (x3a, y3a), (x4a, y4a)) に変換する変換を取得するには、この関数を使用します (転置が必要な場合があります):

function compute_transform_matrix(X, Y, W, H, x1a, y1a, x2a, y2a, x3a, y3a, x4a, y4a) {
    var y21 = y2a - y1a, 
        y32 = y3a - y2a,
        y43 = y4a - y3a,
        y14 = y1a - y4a,
        y31 = y3a - y1a,
        y42 = y4a - y2a;

    var a = -H*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42);
    var b = W*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);
    var c = H*X*(x2a*x3a*y14 + x2a*x4a*y31 - x1a*x4a*y32 + x1a*x3a*y42) - H*W*x1a*(x4a*y32 - x3a*y42 + x2a*y43) - W*Y*(x2a*x3a*y14 + x3a*x4a*y21 + x1a*x4a*y32 + x1a*x2a*y43);

    var d = H*(-x4a*y21*y3a + x2a*y1a*y43 - x1a*y2a*y43 - x3a*y1a*y4a + x3a*y2a*y4a);
    var e = W*(x4a*y2a*y31 - x3a*y1a*y42 - x2a*y31*y4a + x1a*y3a*y42);
    var f = -(W*(x4a*(Y*y2a*y31 + H*y1a*y32) - x3a*(H + Y)*y1a*y42 + H*x2a*y1a*y43 + x2a*Y*(y1a - y3a)*y4a + x1a*Y*y3a*(-y2a + y4a)) - H*X*(x4a*y21*y3a - x2a*y1a*y43 + x3a*(y1a - y2a)*y4a + x1a*y2a*(-y3a + y4a)));

    var g = H*(x3a*y21 - x4a*y21 + (-x1a + x2a)*y43);
    var h = W*(-x2a*y31 + x4a*y31 + (x1a - x3a)*y42);
    var i = W*Y*(x2a*y31 - x4a*y31 - x1a*y42 + x3a*y42) + H*(X*(-(x3a*y21) + x4a*y21 + x1a*y43 - x2a*y43) + W*(-(x3a*y2a) + x4a*y2a + x2a*y3a - x4a*y3a - x2a*y4a + x3a*y4a));

    return [[a,b,0,c],[d,e,0,f],[0,0,1,0],[g,h,0,i]];
}
于 2010-02-28T19:52:30.737 に答える
7

UIImage / CGImageRef の 3D 変換

各ピクセルのマッピングを自分で計算できるはずです..完璧ではありませんが、うまくいきます...

このリポジトリで入手できますhttp://github.com/hfossli/AGGeometryKit/

興味深いファイルは

https://github.com/hfossli/AGGeometryKit/blob/master/Source/AGTransformPixelMapper.m

https://github.com/hfossli/AGGeometryKit/blob/master/Source/CGImageRef%2BCATransform3D.m

https://github.com/hfossli/AGGeometryKit/blob/master/Source/UIImage%2BCATransform3D.m

UIView / UIImageView の 3D 変換

https://stackoverflow.com/a/12820877/202451

その後、四角形の各ポイントを完全に制御できます。:)

于 2012-10-10T13:47:59.010 に答える
3 
struct CATransform3D
{
   CGFloat m11, m12, m13, m14;
   CGFloat m21, m22, m23, m24;
   CGFloat m31, m32, m33, m34;
   CGFloat m41, m42, m43, m44;
};

調整m24しm14て、このような形にする必要があります。

于 2011-06-02T06:53:50.873 に答える