Reputation: 11
I'm working on an Angular application that uses KonvaJS to manage a stage with multiple groups (nodes). I’ve implemented a multi-select feature that allows me to apply a transformer to these groups. However, I’m facing an issue when resizing the groups using the transformer.
The Problem:
When I resize a group using the transformer, the nodes inside the group not only resize but also change their positions. I want to prevent this behavior so that the nodes' positions remain fixed during resizing, and only their sizes are adjusted.
What I’ve Tried:
I’ve added an event listener for the transform event on the Transformer to try and manually adjust the node positions. Here’s the code I’m using:
this.transformer.on('transform', () => {
const scaleX = this.transformer.scaleX();
const scaleY = this.transformer.scaleY();
// Reset the transformer's scale to avoid cumulative scaling
this.transformer.scaleX(1);
this.transformer.scaleY(1);
// Adjust the sizes of the nodes within the group while keeping their positions fixed
this.transformer.nodes().forEach((node: any) => {
// Keep the node's position the same
const originalPosition = node.position();
// Calculate the new width and height based on the transformer's scale
const newWidth = node.width() * scaleX;
const newHeight = node.height() * scaleY;
// Apply the new width and height to the node
node.width(newWidth);
node.height(newHeight);
// Reapply the original position
node.position(originalPosition);
});
// Redraw the layer to apply changes
this.transformerLayer.batchDraw();
});
Despite this, the nodes are still moving when I resize the group. The positions are not staying fixed as I would expect. I’ve tried different approaches, but none seem to work as intended.
Question:
How can I modify the Transformer or adjust the transform event handling so that the nodes within a group only resize but do not change their positions? I want the groups to stay in place during resizing. Any guidance or code examples would be greatly appreciated!
Upvotes: 0
Views: 27