1

特定のサイズの境界矩形 (回転していない) に収まるように、回転した Rect 要素のスケール比を見つけるにはどうすればよいですか?

基本的に、getBoundingClientRect、setBoundingClientRect の逆が必要です。

4

1 に答える 1

2

最初に、要素に適用される変換を取得する必要があります。<svg>.getTransformToElementこの結果と一緒にrect.getBBox()、実際のサイズを計算できます。これを幅にすると、目的のサイズへの倍率を計算し、それを四角形の変換に追加できます。これは、実際の変換行列を新しいスケール行列で乗算する必要があることを意味します。

BUT: これは、AABB に関心がある場合の説明であり、軸に沿ったバウンディング ボックスを意味getBoundingClientRectし、実際の回転したバウンディング ボックスの結果が提供するものであるため、この場合は長方形自体を計算する必要があります (および適用) 幅および/または高さから倍率を適用します。

頑張ってください…</p>

編集：：

function getSVGPoint( x, y, matrix ){
    var p = this._dom.createSVGPoint();
    p.x = x;
    p.y = y; 
    if( matrix ){
        p = p.matrixTransform( matrix );
    }
    return p;
}

function getGlobalBBox( el ){
    var mtr = el.getTransformToElement( this._dom );
    var bbox = el.getBBox();
    var points = [
        getSVGPoint.call( this, bbox.x + bbox.width, bbox.y, mtr ),
        getSVGPoint.call( this, bbox.x, bbox.y, mtr ),
        getSVGPoint.call( this, bbox.x, bbox.y + bbox.height, mtr ),
        getSVGPoint.call( this, bbox.x + bbox.width, bbox.y + bbox.height, mtr ) ];

    return points;

};

このコードで、私はかつて同様のトリックを行いました...要素をthis._dom参照します。2 番目の関数は、右上端から始まり、bbox の周りを反時計回りに進む点の配列を返します。<svg>el

編集：

の結果に<element>.getBBox()は要素に適用される変換が含まれず、新しい目的のサイズは絶対座標にあると思います。したがって、最初に必要なことは、»BBox« をグローバルにすることです。

次の方法で sx と sy の倍率を計算できます。

var sx = desiredWidth / globalBBoxWidth;
var sy = desiredHeight / globalBBoxHeight;

var mtrx = <svg>.createSVGMatrix();
mtrx.a = sx;
mtrx.d = sy;

この行列を要素の変換リストに追加するか、実際の行列と連結して置き換える必要がありますが、これは実装によって異なります。このトリックの最も混乱する部分は、同じ変換で座標を使用してスケーリング係数を計算することです (絶対的なものが便利です)。この後、スケーリングを の変換に適用します。<element>マトリックス全体を置き換えたり、実際に適用されたものと連結したり、新しいアイテムとして変換リストに追加したりしないでください。ただし、既存のアイテムの前に挿入しないようにしてください。 . 行列連結の場合は、乗算の順序を維持してください。

最後のステップは、実装、変換の処理方法によって異なります。どの可能性があるかわからない場合は、ここを見て、これを実装する必要がある DOMInterfaces に特別な注意を払ってください。

于 2012-11-17T14:20:21.597 に答える