KonvaJS：分离后如何保持形状在组中的位置和旋转？答案

【问题标题】：KonvaJS: how to keep the position and rotation of the shape in the group after detached?KonvaJS：分离后如何保持形状在组中的位置和旋转？
【发布时间】：2019-11-13 22:53:18
【问题描述】：

分离后如何保持组内形状的位置、旋转和缩放属性？

如果在用户移动或调整大小后分离组中的每个形状，旋转包裹在 Transformer 下的组，看起来形状会丢失，并且属性已更改。

我尝试如下来源。

    <button id="ungroup">ungroup</button>
    <div id="container"></div>

    const stage = new Konva.Stage({
       container: 'container',
       width: window.innerWidth,
       height: window.innerHeight
    });

    const layer = new Konva.Layer();
    stage.add(layer);

    const rect = new Konva.Rect({
       x : 50, y : 50, width: 100, height: 100,
       fill: 'black',
    });
    const rect2 = new Konva.Rect({
       x : 150, y : 50, width: 80, height: 80,
       fill: 'red',
    });

    const group = new Konva.Group({
        draggable: true
    });
    group.add(rect);
    group.add(rect2);

    const tr = new Konva.Transformer({
        node: group
    });

    layer.add(group);
    layer.add(tr);
    layer.draw();

    document.getElementById('ungroup').addEventListener('click', () => {
        tr.remove()
      // how can keep the moved or rotated properties?
      rect.moveTo(layer);
      rect2.moveTo(layer);
        group.removeChildren();
      group.remove();
      layer.draw();
    });

一组有两个矩形可以用一个变压器移动。但在分离它们之后，它们会失去运动、缩放和旋转。

【问题讨论】：

标签： javascript graphics konvajs

【解决方案1】：

可以取节点的绝对变换矩阵，分离后重新应用到节点上。

const transform = node.getAbsoluteTransform();
const attrs = transform.decompose();
node.moveTo(layer);
node.setAttrs(attrs);

演示：https://codepen.io/elscorpio/pen/VqvLpG

【讨论】：