Блог

Главная - Вопросы по программированию - Динамическое изменение текста-смещение тени x-y в зависимости от размера шрифта

Динамическое изменение текста-смещение тени x-y в зависимости от размера шрифта

#javascript #css #vue.js #font-size #text-shadow

#javascript #css #vue.js #размер шрифта #текст-тень

Вопрос:

Итак, мы получили инструмент vue video-edition с возможностью добавления текста и применения к нему эффектов текстовой тени с помощью настроек по умолчанию, а также некоторых пользовательских текстовых теней, разрешенных или измененных путем настройки выбранного пресета. Также пользователь может изменить размер шрифта, масштабируя элемент vdr (vue-grag-resize), и вот тут начинаются проблемы. Перетаскивание -изменение размера компонента с текстом

Наши предустановки теней имеют абсолютные значения смещения по x-y, и при изменении размера шрифта смещения тени также должны быть изменены, но для пользователя они кажутся одинаковыми. Мы, конечно, можем разобрать текущий эффект тени на разные тени и изменить смещение x-y, но я не придумал никакого хорошего способа сделать это. Размер шрифта и смещения, похоже, не являются взаимосвязанными свойствами.. Каков наилучший способ изменить x-y-смещение в зависимости от размера шрифта?

Сложный:

 text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0,0,0,0.9);

Простой:

 text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;

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

1. Я не думаю, что использование «px» поможет вам здесь, вам нужно будет использовать что-то вроде «em» или «rem», поэтому размер связан с размером шрифта либо текущего элемента, либо корневого элемента.

2. звучит как идея, я буду экспериментировать с этим! Спасибо

3. Нет проблем, это должно значительно упростить эту работу 🙂

Ответ №1:

Итак, я сделал не лучшую, но, по крайней мере, рабочую реализацию для сложной тени, сейчас она работает не на каждой тени, но я довольно близок к лучшей реализации, если кто-то заинтересован или столкнется с такой проблемой, вот фрагмент: (будьте осторожны, это не сработает свставка и вы должны изменить parseShadowToArray, а также цвета должны быть в #01234500 обозначении, но не стесняйтесь изменять его, если вам нужно!)

 function replacePxWithEmEquivalent(shadowStr, fontSize=16) {
    console.log(fontSize);
    const shadowArr = parseShadowStrToArray(shadowStr);
    let resultShadowStr = shadowArr.reduce((acc, shadowObj, i) => {
        return acc   `${(shadowObj.x_offset/fontSize)}em ${(shadowObj.y_offset/fontSize)}em ${(shadowObj.blur_radius/fontSize)}em ${(shadowObj.color)}${i === shadowArr.length-1 ? '' : ", "} `
    }, "");
    resultShadowStr = resultShadowStr.slice(0, -1);
    return resultShadowStr;
}

function parseShadowStrToArray(shadowStr) {
    const shadows = [];
    let shadowStrArray = shadowStr.replaceAll('px', '');
    shadowStrArray = shadowStrArray.split(',');
    shadowStrArray = shadowStrArray.map(shadowStr => shadowStr[0] === ' ' ? shadowStr.substring(1) : shadowStr);
    shadowStrArray.map(shadowStr => {
        const shadowParts = shadowStr.split(' ');
        shadows.push({
            x_offset: parseInt(shadowParts[0]),
            y_offset: parseInt(shadowParts[1]),
            blur_radius: parseInt(shadowParts[2]),
            color: shadowParts[3],
        })
    }
    );

    return shadows;
}
Метки: