Skip to main content
Formatação de código
Fonte Link
Icaro Martins
  • 4,3mil
  • 14
  • 24
  • 35

Estou criando um site com konva.js, nele é possível redimensionar os "rects" da tela. No entanto, quando eu clico em dblclick no transformador recebo o erro "Uncaught RangeError: tamanho máximo da pilha de chamadas excedido".

Uncaught RangeError: tamanho máximo da pilha de chamadas excedido

Isso bloqueia completamente a tela e me impede de arrastar, redimensionar o que está nela.

<!DOCTYPE html>
<html>

<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Select and Transform 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: 60,
        y: 60,
        width: 100,
        height: 90,
        fill: 'red',
        name: 'rect',
        draggable: true
    });
    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 250,
        y: 100,
        width: 150,
        height: 90,
        fill: 'green',
        name: 'rect',
        draggable: true
    });
    layer.add(rect2);
    layer.draw();

    stage.on('click tap', function (e) {
        // if click on empty area - remove all transformers
        if (e.target === stage) {
            stage.find('Transformer').destroy();
            layer.draw();
            return;
        }
        // do nothing if clicked NOT on our rectangles
        if (!e.target.hasName('rect')) {
            return;
        }
        // remove old transformers
        // TODO: we can skip it if current rect is already selected
        stage.find('Transformer').destroy();

        // create new transformer
        var tr = new Konva.Transformer({
            isTransformer: true,
            rotateEnabled: false,
            ignoreStroke: true,
            boundBoxFunc: function (oldBoundBox, newBoundBox) {
                if (true){
                    return ;
                }
                return newBoundBox;
            }
        });
        layer.add(tr);
        tr.attachTo(e.target);
        layer.draw();
    });
</script>

<!DOCTYPE html>
<html>

<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Select and Transform 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: 60,
        y: 60,
        width: 100,
        height: 90,
        fill: 'red',
        name: 'rect',
        draggable: true
    });
    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 250,
        y: 100,
        width: 150,
        height: 90,
        fill: 'green',
        name: 'rect',
        draggable: true
    });
    layer.add(rect2);
    layer.draw();

    stage.on('click tap', function (e) {
        // if click on empty area - remove all transformers
        if (e.target === stage) {
            stage.find('Transformer').destroy();
            layer.draw();
            return;
        }
        // do nothing if clicked NOT on our rectangles
        if (!e.target.hasName('rect')) {
            return;
        }
        // remove old transformers
        // TODO: we can skip it if current rect is already selected
        stage.find('Transformer').destroy();

        // create new transformer
        var tr = new Konva.Transformer({
            isTransformer: true,
            rotateEnabled: false,
            ignoreStroke: true,
            boundBoxFunc: function (oldBoundBox, newBoundBox) {
                if (true){
                    return ;
                }
                return newBoundBox;
            }
        });
        layer.add(tr);
        tr.attachTo(e.target);
        layer.draw();
    });
</script>
</body>

</html>

Estou criando um site com konva.js, nele é possível redimensionar os "rects" da tela. No entanto, quando eu clico em dblclick no transformador recebo o erro "Uncaught RangeError: tamanho máximo da pilha de chamadas excedido". Isso bloqueia completamente a tela e me impede de arrastar, redimensionar o que está nela.

<!DOCTYPE html>
<html>

<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Select and Transform 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: 60,
        y: 60,
        width: 100,
        height: 90,
        fill: 'red',
        name: 'rect',
        draggable: true
    });
    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 250,
        y: 100,
        width: 150,
        height: 90,
        fill: 'green',
        name: 'rect',
        draggable: true
    });
    layer.add(rect2);
    layer.draw();

    stage.on('click tap', function (e) {
        // if click on empty area - remove all transformers
        if (e.target === stage) {
            stage.find('Transformer').destroy();
            layer.draw();
            return;
        }
        // do nothing if clicked NOT on our rectangles
        if (!e.target.hasName('rect')) {
            return;
        }
        // remove old transformers
        // TODO: we can skip it if current rect is already selected
        stage.find('Transformer').destroy();

        // create new transformer
        var tr = new Konva.Transformer({
            isTransformer: true,
            rotateEnabled: false,
            ignoreStroke: true,
            boundBoxFunc: function (oldBoundBox, newBoundBox) {
                if (true){
                    return ;
                }
                return newBoundBox;
            }
        });
        layer.add(tr);
        tr.attachTo(e.target);
        layer.draw();
    });
</script>

Estou criando um site com konva.js, nele é possível redimensionar os "rects" da tela. No entanto, quando eu clico em dblclick no transformador recebo o erro:

Uncaught RangeError: tamanho máximo da pilha de chamadas excedido

Isso bloqueia completamente a tela e me impede de arrastar, redimensionar o que está nela.

<!DOCTYPE html>
<html>

<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Select and Transform 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: 60,
        y: 60,
        width: 100,
        height: 90,
        fill: 'red',
        name: 'rect',
        draggable: true
    });
    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 250,
        y: 100,
        width: 150,
        height: 90,
        fill: 'green',
        name: 'rect',
        draggable: true
    });
    layer.add(rect2);
    layer.draw();

    stage.on('click tap', function (e) {
        // if click on empty area - remove all transformers
        if (e.target === stage) {
            stage.find('Transformer').destroy();
            layer.draw();
            return;
        }
        // do nothing if clicked NOT on our rectangles
        if (!e.target.hasName('rect')) {
            return;
        }
        // remove old transformers
        // TODO: we can skip it if current rect is already selected
        stage.find('Transformer').destroy();

        // create new transformer
        var tr = new Konva.Transformer({
            isTransformer: true,
            rotateEnabled: false,
            ignoreStroke: true,
            boundBoxFunc: function (oldBoundBox, newBoundBox) {
                if (true){
                    return ;
                }
                return newBoundBox;
            }
        });
        layer.add(tr);
        tr.attachTo(e.target);
        layer.draw();
    });
</script>
</body>

</html>

basicamente sem if (true) {return;}if (true) {return;} o transformador não comete erro, mas nesse caso seria necessário fazer algumas verificações com o transformador. O erro ocorre apenas com dblclick em um dos vértices do transformador.

Konva Select and Transform Demobody{margin: 0;padding: 0;overflow: hidden;background-color: #f0f0f0;}var width = window.innerWidth;var height = window.innerHeight;
<!DOCTYPE html>
<html>

<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Select and Transform 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: 60,
        y: 60,
        width: 100,
        height: 90,
        fill: 'red',
        name: 'rect',
        draggable: true
    });
    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 250,
        y: 100,
        width: 150,
        height: 90,
        fill: 'green',
        name: 'rect',
        draggable: true
    });
    layer.add(rect2);
    layer.draw();

    stage.on('click tap', function (e) {
        // if click on empty area - remove all transformers
        if (e.target === stage) {
            stage.find('Transformer').destroy();
            layer.draw();
            return;
        }
        // do nothing if clicked NOT on our rectangles
        if (!e.target.hasName('rect')) {
            return;
        }
        // remove old transformers
        // TODO: we can skip it if current rect is already selected
        stage.find('Transformer').destroy();

        // create new transformer
        var tr = new Konva.Transformer({
            isTransformer: true,
            rotateEnabled: false,
            ignoreStroke: true,
            boundBoxFunc: function (oldBoundBox, newBoundBox) {
                if (true){
                    return ;
                }
                return newBoundBox;
            }
        });
        layer.add(tr);
        tr.attachTo(e.target);
        layer.draw();
    });
</script>

basicamente sem if (true) {return;} o transformador não comete erro, mas nesse caso seria necessário fazer algumas verificações com o transformador. O erro ocorre apenas com dblclick em um dos vértices do transformador.

Konva Select and Transform Demobody{margin: 0;padding: 0;overflow: hidden;background-color: #f0f0f0;}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: 60,
        y: 60,
        width: 100,
        height: 90,
        fill: 'red',
        name: 'rect',
        draggable: true
    });
    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 250,
        y: 100,
        width: 150,
        height: 90,
        fill: 'green',
        name: 'rect',
        draggable: true
    });
    layer.add(rect2);
    layer.draw();

    stage.on('click tap', function (e) {
        // if click on empty area - remove all transformers
        if (e.target === stage) {
            stage.find('Transformer').destroy();
            layer.draw();
            return;
        }
        // do nothing if clicked NOT on our rectangles
        if (!e.target.hasName('rect')) {
            return;
        }
        // remove old transformers
        // TODO: we can skip it if current rect is already selected
        stage.find('Transformer').destroy();

        // create new transformer
        var tr = new Konva.Transformer({
            isTransformer: true,
            rotateEnabled: false,
            ignoreStroke: true,
            boundBoxFunc: function (oldBoundBox, newBoundBox) {
                if (true){
                    return ;
                }
                return newBoundBox;
            }
        });
        layer.add(tr);
        tr.attachTo(e.target);
        layer.draw();
    });
</script>

basicamente sem if (true) {return;} o transformador não comete erro, mas nesse caso seria necessário fazer algumas verificações com o transformador. O erro ocorre apenas com dblclick em um dos vértices do transformador.

<!DOCTYPE html>
<html>

<head>
<!-- USE DEVELOPMENT VERSION -->
<script src="https://unpkg.com/[email protected]/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Select and Transform 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: 60,
        y: 60,
        width: 100,
        height: 90,
        fill: 'red',
        name: 'rect',
        draggable: true
    });
    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 250,
        y: 100,
        width: 150,
        height: 90,
        fill: 'green',
        name: 'rect',
        draggable: true
    });
    layer.add(rect2);
    layer.draw();

    stage.on('click tap', function (e) {
        // if click on empty area - remove all transformers
        if (e.target === stage) {
            stage.find('Transformer').destroy();
            layer.draw();
            return;
        }
        // do nothing if clicked NOT on our rectangles
        if (!e.target.hasName('rect')) {
            return;
        }
        // remove old transformers
        // TODO: we can skip it if current rect is already selected
        stage.find('Transformer').destroy();

        // create new transformer
        var tr = new Konva.Transformer({
            isTransformer: true,
            rotateEnabled: false,
            ignoreStroke: true,
            boundBoxFunc: function (oldBoundBox, newBoundBox) {
                if (true){
                    return ;
                }
                return newBoundBox;
            }
        });
        layer.add(tr);
        tr.attachTo(e.target);
        layer.draw();
    });
</script>
Fonte Link

dlclick no Transformer me da um erro de pilha: Maximum call stack size exceed

Estou criando um site com konva.js, nele é possível redimensionar os "rects" da tela. No entanto, quando eu clico em dblclick no transformador recebo o erro "Uncaught RangeError: tamanho máximo da pilha de chamadas excedido". Isso bloqueia completamente a tela e me impede de arrastar, redimensionar o que está nela.

basicamente sem if (true) {return;} o transformador não comete erro, mas nesse caso seria necessário fazer algumas verificações com o transformador. O erro ocorre apenas com dblclick em um dos vértices do transformador.

Gostaria de saber se é possível resolver ou devo verificar em outro local.

Já tentei colocar o return new / old BoundBox, mas o erro continua.

Konva Select and Transform Demo body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f0f0; } 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: 60,
        y: 60,
        width: 100,
        height: 90,
        fill: 'red',
        name: 'rect',
        draggable: true
    });
    layer.add(rect1);

    var rect2 = new Konva.Rect({
        x: 250,
        y: 100,
        width: 150,
        height: 90,
        fill: 'green',
        name: 'rect',
        draggable: true
    });
    layer.add(rect2);
    layer.draw();

    stage.on('click tap', function (e) {
        // if click on empty area - remove all transformers
        if (e.target === stage) {
            stage.find('Transformer').destroy();
            layer.draw();
            return;
        }
        // do nothing if clicked NOT on our rectangles
        if (!e.target.hasName('rect')) {
            return;
        }
        // remove old transformers
        // TODO: we can skip it if current rect is already selected
        stage.find('Transformer').destroy();

        // create new transformer
        var tr = new Konva.Transformer({
            isTransformer: true,
            rotateEnabled: false,
            ignoreStroke: true,
            boundBoxFunc: function (oldBoundBox, newBoundBox) {
                if (true){
                    return ;
                }
                return newBoundBox;
            }
        });
        layer.add(tr);
        tr.attachTo(e.target);
        layer.draw();
    });
</script>