Блог

Главная - Вопросы по программированию - Как динамически устанавливать размер шрифта в JointJS?

Как динамически устанавливать размер шрифта в JointJS?

#javascript #jquery #html #html5-canvas #jointjs

#javascript #jquery #HTML #html5-холст #jointjs

Вопрос:

Я разрабатываю приложение 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');
    }
});

приведенный выше код не работает при настройке размера шрифта для текста.
Пожалуйста, помогите мне в этом

Комментарии:

1. смогли ли вы получить целочисленное значение для FtSize? какой встроенный стиль применяется к элементу myFtext?

2. Да, я получил значение FtSize , но оно не применяется к тексту.

3. проверьте встроенные стили, применяемые к текстовому тегу, также попробуйте использовать ‘FontSize’ вместо ‘font-size’ и посмотрите, работает ли это

4. упс … ‘font-size’ был объявлен два раза во встроенном стиле. Теперь он работает. Спасибо @nivendha

Ответ №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 /

Комментарии:

1. Привет @Vt. я использую перетаскивание ячейки на другую бумагу, поэтому, когда я меняю имя конкретной ячейки, имя меняется для всех ячеек, которые я перетаскиваю. можете ли вы мне помочь в этом