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 tho the node.
function decompose(mat) {
var a = mat[0];
var b = mat[1];
var c = mat[2];
var d = mat[3];
var e = mat[4];
var f = mat[5];
var delta = a * d - b * c;
let result = {
x: e,
y: f,
rotation: 0,
scaleX: 0,
scaleY: 0,
skewX: 0,
skewY: 0,
};
// Apply the QR-like decomposition.
if (a != 0 || b != 0) {
var r = Math.sqrt(a * a + b * b);
result.rotation = b > 0 ? Math.acos(a / r) : -Math.acos(a / r);
result.scaleX = r;
result.scaleY = delta / r;
result.skewX = Math.atan((a * c + b * d) / (r * r));
result.scleY = 0;
} else if (c != 0 || d != 0) {
var s = Math.sqrt(c * c + d * d);
result.rotation =
Math.PI / 2 - (d > 0 ? Math.acos(-c / s) : -Math.acos(c / s));
result.scaleX = delta / s
result.scaleY = s;
result.skewX = 0
result.skewY = Math.atan((a * c + b * d) / (s * s));
} else {
// a = b = c = d = 0
}
result.rotation *= 180 / Math.PI;
return result;
}
const matrix = node.getAbsoluteTransform().getMatrix();
const attrs = decompose(matrix);
node.moveTo(layer);
node.setAttrs(attrs);