将更新的坐标从父旋转应用到子答案

【问题标题】：Apply updated co-ordinates from parent rotation to children将更新的坐标从父旋转应用到子
【发布时间】：2013-05-31 04:55:08
【问题描述】：

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

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

删除父级后，如何将更新后的坐标应用于子级。我特别需要在 X,Y 坐标中保持孩子的新位置，即旋转应该转换为平移，r.g.变换 = 平移 (X , Y) 。我只需要为孩子们准备新的 x,y，这样我就可以将他们“翻译”到新的位置。

这里是小提琴链接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 代码

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

- 我想要什么：-

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

【问题讨论】：

标签： javascript canvas svg rotation coordinates

【解决方案1】：

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

您需要自己使用一些三角函数来计算它们的位置。

【讨论】：