Question

我在SVG工作，我被困在一个场景中，所以我需要一些快速的帮助。这是一个小提琴的工作演示

问题我沿着它的中心以某个角度旋转了一个矩形，这很好。然后我缩短矩形的宽度，然后我再次旋转它。这次它几乎不会引起误旋转。我发现它是因为矩形的新中心点。我怎么解决这个问题？矩形必须沿其新中心点旋转。

代码：

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加载选项改为'no wrap-in body

Answer 1

小直肠的中心位于与大直肠不同的位置。小矩形实际上是大直肠的左半部分，因为你只是改变了宽度。当你调整矩形的大小时，你还需要重新定位它们以使它们的中心重合。

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);
}

Svg旋转和调整大小问题

1 个答案: