javascript - 如何在JointJs中动态设置字体大小？

Question

我正在开发一个 JointJs 应用程序，我需要为矩形内的文本设置字体大小。

    $('#FText,#FTextHeight,#FTextWidth,#FTextSize').on('keyup change', function () {
    var FtHeight = $('#FTextHeight').val();
    var FtWidth = $('#FTextWidth').val();
    var FtSize = parseInt($('#FTextSize').val());
    var txt = $('#FText').val();
    graph2.clear();
    if (txt.length > 0) {
        $('#FTexterror').empty();
        var myFtext = new joint.shapes.basic.Rect({
            position: { x: 50, y: 50 },
            size: { width: FtWidth, height: FtHeight },
            attrs: {
                rect: {
                    fill: 'white', stroke: outerColor, 'class': 'customtext',
                },
                text: {
                    text: txt, 'letter-spacing': 1, 'font-size': FtSize,
                    fill: outerColor, 'font-size': 11, 'y-alignment': 'middle',
                }
            }
        });
        graph2.addCells([myFtext]);
    }
    else {
        $('#FTexterror').empty().append('*Enter valid text');
    }
});

设置文本字体大小时，上述代码不起作用。请帮助我解决这个问题

Answer 1

试试这个

$('.input-text')
    .val(rect.attr('text/font-size')) //set initial value
    .on('keyup', function () {

        var val = $(this).val();
        rect.attr('text/font-size', val);
});

完整演示:https://jsfiddle.net/vtalas/sav49mj4/