SOURCE

console 命令行工具 X clear

                    
>
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,
    // enable only side anchors
    enabledAnchors: ['bottom-right'],
    // limit transformer size
    boundBoxFunc: (oldBox, newBox) => {
        // console.log(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,
    // enable only side anchors
    enabledAnchors: ['bottom-right'],
    // limit transformer size
    boundBoxFunc: (oldBox, newBox) => {
        // console.log(oldBox, newBox)
        if (newBox.height < MIN_WIDTH) {
            return oldBox;
        }

        return newBox;
    },
});
layer.add(tr2);

layer.draw();

text.on('transform', function ({ evt }) {
    // with enabled anchors we can only change scaleX
    // so we don't need to reset height
    // just width
    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;
      }

本项目引用的自定义外部资源