在 KineticJs Text(） 上显示值

Displaying value on KineticJs Text()

本文关键字：显示 KineticJs Text      更新时间：2023-09-26

我想使用 jquery 中的 keyup 事件更改动态 js 容器中的文本，但它没有显示。我尝试获取值然后将其显示在 span 元素上，它工作正常。这是我的代码： 

var stage = new Kinetic.Stage({
        container: 'canvasContainer',
        width: 800,
        height: 800
    });
    var layer = new Kinetic.Layer();
    var message = '';
    $(function(){
        $('#txtArea').change(function(){
            message = $(this).val();
            $('.output').text(message);
            var simpleText = new Kinetic.Text({
                x: 0,
                y: 10,
                text: message,
                fontSize: 30,
                fontFamily: 'Calibri',
                fill: 'blue'
            });
            layer.add(simpleText);
        }).keyup(function(){
            $(this).change();
        });
    });
    stage.add(layer);

添加或更改 Kinetic 对象后，请确保调用 layer.draw（） 以使绘图可见。

顺便说一句，您可能只想更改现有文本对象中的文本，而不是在每次更改时添加新的 simpleText

// declare simpleText before .change()
var simpleText = new Kinetic.Text({
    x: 0,
    y: 10,
    text: "",
    fontSize: 30,
    fontFamily: 'Calibri',
    fill: 'blue'
});
layer.add(simpleText);
// then inside .change()
simpleText.setText(message);
layer.draw();
相关文章：