Question

此示例说明了我的问题：https://bl.ocks.org/feketegy/ce9ab2efa9439f3c59c381f567522dd3

我在组元素中有几个路径，我想要平移/缩放这些元素，但蓝色矩形路径除外，它位于另一个组元素中。

通过将transform="translate(0,0) scale(1)应用于最外面的组元素然后捕获缩放增量并将其应用于same-size组元素以使其保持相同的大小来完成缩放和平移。

这是有效的，但是应该保持相同大小的蓝色矩形位置混乱，我希望将它保持在与其他路径相同的相对位置。

渲染的html结构如下所示：

<svg width="100%" height="100%">
  <g class="outer-group" transform="translate(0,0)scale(1)">
    <path d="M100,100 L140,140 L200,250 L100,250 Z" fill="#cccccc" stroke="#8191A2" stroke-width="2px"></path>
    <path d="M400,100 L450,100 L450,250 L400,250 Z" fill="#cccccc" stroke="#8191A2" stroke-width="2px"></path>

    <g class="same-size-position" transform="translate(300,250)">
      <g class="same-size" transform="scale(1)">
        <path d="M0,0 L50,0 L50,50 L0,50 Z" fill="#0000ff"></path>
      </g>
    </g>
  </g>
</svg>

我试图获取same-size-position组的X / Y位置，并从outer-group的翻译x / y创建一个增量，但这似乎不起作用。< / p>

Answer 1

在我的高中几何书上除尘后，我找到了一个解决方案。

你需要获得你想要保持相同大小的元素的边界框，并像这样计算矩阵转换：

const zoomDelta = 1 / d3.event.transform.k;

const sameSizeElem = d3.select('.same-size');
const bbox = sameSizeElem.node().getBBox();

const cx = bbox.x + (bbox.width / 2);
const cy = bbox.y + (bbox.height / 2);
const zx = cx - zoomDelta * cx;
const zy = cy - zoomDelta * cy;

sameSizeElem
  .attr('transform', 'matrix(' + zoomDelta + ', 0, 0, ' + zoomDelta + ', ' + zx + ', ' + zy + ')');

矩阵变换将保持元素的相对位置，其大小保持不变，其他元素将平移/缩放。

D3如何在变换缩放/平移时保持元素大小相同

1 个答案: