KonvaJS:分离后如何保持形状在组中的位置和旋转? [英] KonvaJS: how to keep the position and rotation of the shape in the group after detached?

问题描述

分离后如何在组中保持形状的位置，旋转和缩放属性?

如果在用户移动或调整大小后旋转组中的每个形状，旋转包裹在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();
    });
 

一个具有两个矩形的组可以与一个变压器一起移动. 但是分离它们后，它们会失去运动，缩放和旋转.

解决方案

您可以获取节点的绝对转换矩阵，并在分离后将其重新应用于节点.

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

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

How can keep the position and rotation and scale properties of shapes in the group after detached?

It looks shapes are lost there changed properties if detach every shapes in the group after the user move or resize, rotate the group that wrapped under the Transformer.

I try it like following source.

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

A group has two rectangle can move with a transformer. But after detach them, they lose movement and scale and rotation.

解决方案

You can take the absolute transformation matrix of the node and after detaching, it reapply to the node.

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

Demo: https://codepen.io/elscorpio/pen/VqvLpG

这篇关于KonvaJS:分离后如何保持形状在组中的位置和旋转?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！