How to resize shape on canvas without changing its stroke size?

Do you want to change size of a shape without changing its stroke size?

Remember, that Konva.Transformer is changing scaleX and scaleY properties of a node.
By default, if you are transforming a shape, its stroke will be scaled too. It some cases that is not a good behavior.

There are two ways to prevent stroke scaling: (1) reset scale of a shape or (2) use combination of shape.strokeScaleEnabled(false) and transformer.ignoreStroke(false).

Instructions: there are two rectangles to resize. The green one will reset it scale. The red one will just disable stroke scaling.

Konva ignore strokeview raw
<!DOCTYPE html>
<html>
<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Resize Text Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>

<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;

var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});

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

var rect1 = new Konva.Rect({
x: 50,
y: 60,
width: 100,
height: 100,
draggable: true,
fill: 'green',
stroke: 'black',
strokeWidth: 5,
});
layer.add(rect1);

var tr1 = new Konva.Transformer({
nodes: [rect1],
// ignore stroke in size calculations
ignoreStroke: true,
// manually adjust size of transformer
padding: 5,
});
layer.add(tr1);

// first way to skip stroke resize, is just by resetting scale
// and setting width/height instead
rect1.on('transform', () => {
rect1.setAttrs({
width: Math.max(rect1.width() * rect1.scaleX(), 5),
height: Math.max(rect1.height() * rect1.scaleY(), 5),
scaleX: 1,
scaleY: 1,
});
});

// another solution is to use combination of strokeScaleEnabled and ignoreStroke
var rect2 = new Konva.Rect({
x: 250,
y: 60,
width: 100,
height: 100,
draggable: true,
fill: 'red',
stroke: 'black',
strokeWidth: 5,
// do not scale strokes
strokeScaleEnabled: false,
});
layer.add(rect2);

var tr2 = new Konva.Transformer({
nodes: [rect2],
// ignore stroke in size calculations
ignoreStroke: true,
// manually adjust size of transformer
padding: 5,
});
layer.add(tr2);
</script>
</body>
</html>
Enjoying Konva? Please consider to support the project.