0

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

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

删除父级后，如何将更新的坐标应用于子级。我特别需要在 X,Y 坐标中保持孩子的新位置，即旋转应该转换为平移，rg transform = translate (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 位置。（现在，移回原来的位置）

4

1 回答 1

0

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

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

于 2013-06-04T15:57:15.500 回答