console
window.onload = function () {
var width = window.innerWidth;
var height = window.innerHeight;
console.log(width, height)
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var text = new Konva.Text({
x: 50,
y: 60,
fontSize: 15,
text: `Auto Resize: Try to adjust me by dragging the right bottom corner. Font size would not change.`,
draggable: true,
});
layer.add(text);
var text2 = new Konva.Text({
x: 50,
y: 360,
fontSize: 15,
text: `Auto Adjust Font Size:\nTry to adjust me by dragging the right bottom corner.\nFont size will be scaled automatically.`,
draggable: true,
});
layer.add(text2);
var MIN_WIDTH = 20;
var tr = new Konva.Transformer({
nodes: [text],
rotateEnabled: false,
padding: 5,
enabledAnchors: ['bottom-right'],
boundBoxFunc: (oldBox, newBox) => {
if (newBox.height < MIN_WIDTH) {
return oldBox;
}
return newBox;
},
});
layer.add(tr);
var tr2 = new Konva.Transformer({
nodes: [text2],
rotateEnabled: false,
padding: 5,
enabledAnchors: ['bottom-right'],
boundBoxFunc: (oldBox, newBox) => {
if (newBox.height < MIN_WIDTH) {
return oldBox;
}
return newBox;
},
});
layer.add(tr2);
layer.draw();
text.on('transform', function ({ evt }) {
text.setAttrs({
width: Math.max(evt.layerX - text.attrs.x, MIN_WIDTH),
scaleX: 1,
scaleY: 1,
});
}).on('click', function () {
console.log('><><<')
});
}
<div id="container"></div>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}