1

私は SVG で作業していますが、あるシーンで立ち往生しているため、すぐに助けが必要です。これはフィドルで動作するデモです

http://jsfiddle.net/5ekCa/

問題 長方形をその中心に沿ってある角度で回転させましたが、うまくいきました。次に、長方形の幅を短くして、もう一度回転させます。今回は、誤った回転がほとんど発生しません。私が見つけたのは、長方形の新しい中心点のためです。どうすればこの問題を解決できますか? 長方形は、その新しい中心点に沿って回転する必要があります。

コード：

var rotate_rect = document.getElementById('rotate_rect');
var rectangle = document.getElementById('rectangle');
var angle = 0;

function calculateCenterXY(node) {
    var x = node.getBBox().x + (node.getBBox().width / 2);
    var y = node.getBBox().y + (node.getBBox().height / 2);

    var xy_co = {
        x: x,
        y: y
    };

    return xy_co;

}

function rotateMainRect() {

    var centxy = calculateCenterXY(rectangle);
    angle += 5;
    rotate_rect.setAttributeNS(null, 'transform', 'rotate(' + angle + ',' + centxy.x + ',' + centxy.y + ')');


}

function decreaseRectsize() {
    var newRectWidth = 50;
    rectangle.setAttribute('width', newRectWidth);
}

function RestoreRectsize() {
    var newRectWidth = 100;
    rectangle.setAttribute('width', newRectWidth);
}

HTML

<table>
    <tr>
        <td>
            <svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="350" height="300">
                <g id="rotate_rect">
                    <rect id="rectangle" x="50" y="100" width="100" height="50" stroke="black" stroke-width="1" fill="black" />
                </g>
            </svg>
        </td>
        <td style="vertical-align: top">
            <button onclick="rotateMainRect()">Rotate +5 Angle</button>
        </td>
        <td style="vertical-align: top">
            <button onclick="decreaseRectsize()">Decrease Rect Size</button>
            <br/>
            <button onclick="RestoreRectsize()">Restore Rect Size</button>
        </td>
    </tr>
</table>

*注:- フィドルでは、テストの前に Js ロード オプションを「ラップイン ボディなし」に変更します。

4

1 に答える 1

0

小さな四角形の中心は、大きな四角形とは異なる位置にあります。幅を変更しているだけなので、小さな四角形は実質的に大きな四角形の左半分です。四角形のサイズを変更するときは、中心が一致するように再配置する必要もあります。

function decreaseRectsize() {
    var newRectWidth = 50;
    rectangle.setAttribute('width', newRectWidth);
    rectangle.setAttribute('x', 75);
}

function RestoreRectsize() {
    var newRectWidth = 100;
    rectangle.setAttribute('width', newRectWidth);
    rectangle.setAttribute('x', 50);
}
于 2013-06-18T17:49:50.590 に答える