26

、 、などの<div />CSS3 属性で変換された a の実際の 4 つのコーナー座標を取得することは可能ですか?scaleskewrotate

例：

CSS3 変換前の座標は

x1y1: 0,0
x1y2: 0,200
x2y1: 200,0
x2yw: 200,200

div は次のようになります。

変身前

CSS3 マジックを少し加えるtransform: skew(10deg, 30deg) rotate(30deg) scale(1, 2); と、次のようになります。

変身後

実際のコーナー (バウンディング ボックスではない) の座標を (javascript で) 取得するにはどうすればよいですか? どんな助けでも大歓迎です。

4

4 に答える 4

4

そのためのAPIはないと思います。また、HTML5 には座標を変換する API がありません<canvas>。しかし、手動で座標を計算する方法があります。<canvas>これは、座標を変換する私のライブラリのクラスです: https://github.com/enepomnyaschih/jwcanvas/blob/master/jwidget/public/jwcanvas/transform.js

テンプレートとして使用できます。

JW.Canvas.Transform座標系を初期化するには、クラスのオブジェクトをインスタンス化し、メソッドを適用するだけcomplexです。その後、transformメソッドを介して座標系に他の変換を適用できます。マトリックスは次のとおりです。

  • 翻訳: [1, 0, 0, 1, x, y]
  • スケール: [x, 0, 0, y, 0, 0]
  • 時計回りに回転: [cos(a), sin(a), -sin(a), cos(a), 0, 0]
  • x に沿って傾斜: [1, 0, tan(a), 1, 0, 0]
  • y に沿った傾斜: [1, tan(a), 0, 1, 0, 0]

その後、convertメソッドを介して座標を変換できるようになります。メソッドを使用backして逆変換オブジェクトを計算します。

于 2013-06-13T13:26:47.337 に答える
4

このサイトをお勧めします: http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/特にセクション「マトリックスに関するその他の興味深い事実」 "...

しかし、Egor Nepomnyaschihが指摘したように、あなたはそれぞれの変換に計算を実装し、それらを連鎖させる必要があります。

あなたの例に基づいてjsFiddleを実装しました：http://jsfiddle.net/pvS8X/3/。

注意してください: 原点はあなたのフィギュアの真ん中です! 左上隅を参照したい場合は、これを CSS コードに設定する必要があります。

transform-origin: 0 0;

参照。https://developer.mozilla.org/fr/docs/CSS/transform-origin .

主な方法は次のとおりです。

function skew(p, alpha, beta) {
    var tan_a = Math.tan(alpha * Math.PI / 180),
        tan_b = Math.tan(beta * Math.PI / 180),
        p_skewed = {};

    p_skewed.x = p.x + p.y * tan_a;
    p_skewed.y = p.x * tan_b + p.y;

    return p_skewed;
}


function rotate(p, theta) {
    var sin_th = Math.sin(theta * Math.PI / 180),
        cos_th = Math.cos(theta * Math.PI / 180),
        p_rot = {};

    p_rot.x = p.x * cos_th - p.y * sin_th;
    p_rot.y = p.x * sin_th + p.y * cos_th;

    return p_rot;
}


function scale(p, sx, sy) {
    var p_scaled = {};

    p_scaled.x = p.x * sx;
    p_scaled.y = p.y * sy;

    return p_scaled;
}

ここで、p はフォーム上のオブジェクト{ x: <some_horizontal_pos>, y: <some_vertical_pos>}です。

于 2013-06-13T14:58:03.507 に答える
-1

.getBoundingClientRect() を使用して、ウィンドウに対応する要素の新しい位置を見つけることができます

于 2016-09-16T18:46:53.140 に答える