Question

在下面的代码中，我正在SVG中旋转一个带有两个孩子的选择框（父）。

它工作正常，但是当移除父（选择框）时，孩子们会回到原来的（旋转前）坐标。

删除父母后，如何在孩子身上应用更新的坐标。我特别需要保持孩子们在X，Y合作中的新位置，即旋转应转换为翻译，r.g。 transform = translate（X，Y）。我只需要New x，y for children，这样我就可以将它们“翻译”到新的位置。

这里是小提琴链接http://jsfiddle.net/rehankhalid/QK8L8/6/

HTML代码： -

<button data-action="rotate" onclick="rotateMainRect()">Rotate +5 Angle</button>&nbsp;
<button data-action="rotate" onclick="removeRectRotation()">Remove Selection</button>
<br/>
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="500">
    <g id="selectedRect">
        <rect id="rectangle" x="135" y="135" width="110" height="35" stroke="red" stroke-width="2" fill="grey" opacity="0.4" />
        <g id="button_1" transform="translate(0,0)">
            <circle cx="150" cy="150" r="5" stroke="grey" stroke-width="1" fill="none" />
        </g>
        <g id="button_2" transform="translate(0,0)">
            <circle cx="230" cy="150" r="5" stroke="grey" stroke-width="1" fill="none" />
        </g>
    </g>
</svg>

JAVASCRIPT CODE

   var angle_incr = 5;
   var angle = 0;

   function rotateMainRect() {
       var selectedRect = document.getElementById('selectedRect');
       var rectangle = document.getElementById('rectangle');
       var x = rectangle.getAttribute('x');
       if (x != 0) {
           var centxy = calculateCenterXY(selectedRect);
           angle += angle_incr;
           selectedRect.setAttributeNS(null, 'transform', 'rotate(' + angle + ',' + centxy.x + ',' + centxy.y + ')');
       } else {
           rectangle.setAttribute('x', '135');
           rectangle.setAttribute('y', '135');
           rectangle.setAttribute('width', '110');
           rectangle.setAttribute('height', '35');
       }
   }

   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 removeRectRotation() {
       var selectedRect = document.getElementById('selectedRect');
       selectedRect.setAttributeNS(null, 'transform', '');

       var rectangle = document.getElementById('rectangle');


       rectangle.setAttribute('x', '0');
       rectangle.setAttribute('y', '0');
       rectangle.setAttribute('width', '0');
       rectangle.setAttribute('height', '0');


       angle = 0;
   }

- 我想要的： -

首先将选择矩形旋转到某个角度，然后按“删除选择”。删除选择后，必须将儿童放置在新位置。（现在，回到原来的位置）

Answer 1

如果你问是否可以直接使用JS读取两个变换圆的绝对位置，那么答案是否定的。

你需要使用一点三角函数自己计算他们的位置。

将父旋转的更新坐标应用于子项

1 个答案: